深入浅出 Laravel Echo (2)

本文 4756字,需要 11.89 分钟

看源代码,解析一次完整的 public channel 下发流程。

此图来自网上,如有侵权,通知我删除

通过上图,我们至少要知道两件事:

  1. Laravel 和我们的前端 (vue) 没有直接关联,它们通过 Socket.io Server 来做中转,这是怎么做到的呢?
  2. 怎么发送 Brocadcasted Data?

下面来一一解析。

BroadcastServiceProvider

BroadcastServiceProvider 主要包含了 Broadcast 相关的五个驱动器、Broadcast 事件、Broadcast 队列等方法,比较简单就不在解析了,今天主要说说怎么通过 redis 来驱动 Broadcast 的。

首先还是简单配置下 Broadcastconfig

// broadcasting.php
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                //
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

// .env
BROADCAST_DRIVER=redis
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379

之前了解过 Laravel 的 ServiceProvider 的工作原理,所以我们就不用赘述太多这方面的流程了,我们主要看看 BroadcastServiceProvider 的注册方法:

public function register()
{
    $this->app->singleton(BroadcastManager::class, function ($app) {
        return new BroadcastManager($app);
    });

    $this->app->singleton(BroadcasterContract::class, function ($app) {
        return $app->make(BroadcastManager::class)->connection();
    });

    $this->app->alias(
        BroadcastManager::class, BroadcastingFactory::class
    );
}

我们写一个发送 Broadcast demo:

// routes/console.php
Artisan::command('public_echo', function () {
    event(new RssPublicEvent());
})->describe('echo demo');

// app/Events/RssPublicEvent.php
<?php

namespace App\Events;

use Carbon\Carbon;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class RssPublicEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('public_channel');
    }

    /**
     * 指定广播数据。
     *
     * @return array
     */
    public function broadcastWith()
    {
        // 返回当前时间
        return ['name' => 'public_channel_'.Carbon::now()->toDateTimeString()];
    }
}

有了这下发 Event,我们看看它是怎么执行的,主要看 BroadcastEventhandle方法:

public function handle(Broadcaster $broadcaster)
{
    // 主要看,有没有自定义该 Event 名称,没有的话,直接使用类名
    $name = method_exists($this->event, 'broadcastAs')
            ? $this->event->broadcastAs() : get_class($this->event);

    $broadcaster->broadcast(
        Arr::wrap($this->event->broadcastOn()), $name,
        $this->getPayloadFromEvent($this->event)
    );
}

先看怎么获取参数的 $this->getPayloadFromEvent($this->event)

protected function getPayloadFromEvent($event)
{
    if (method_exists($event, 'broadcastWith')) {
        return array_merge(
            $event->broadcastWith(), ['socket' => data_get($event, 'socket')]
        );
    }

    $payload = [];

    foreach ((new ReflectionClass($event))->getProperties(ReflectionProperty::IS_PUBLIC) as $property) {
        $payload[$property->getName()] = $this->formatProperty($property->getValue($event));
    }

    unset($payload['broadcastQueue']);

    return $payload;
}

主要传入我们自定义的数组,见函数 $event->broadcastWith()['socket' => data_get($event, 'socket')]Event 中定义的所有 public 属性。

最后就是执行方法了:

$broadcaster->broadcast(
    Arr::wrap($this->event->broadcastOn()), $name,
    $this->getPayloadFromEvent($this->event)
);

看上面的例子,$this->event->broadcastOn() 对应的是:

return new Channel('public_channel');

好了,该是看看接口 Broadcaster 了。

<?php

namespace Illuminate\Contracts\Broadcasting;

interface Broadcaster
{
    /**
     * Authenticate the incoming request for a given channel.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    public function auth($request);

    /**
     * Return the valid authentication response.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  mixed  $result
     * @return mixed
     */
    public function validAuthenticationResponse($request, $result);

    /**
     * Broadcast the given event.
     *
     * @param  array  $channels
     * @param  string  $event
     * @param  array  $payload
     * @return void
     */
    public function broadcast(array $channels, $event, array $payload = []);
}

这里主要提供三个函数,我们暂时看目前最关心的 broadcast(),通过「PhpStorm」IDE,我们也能看出,继承这个接口的,主要就是平台 config 配置提供的几个驱动器:

我们开始往下走,看 redis 驱动器:

public function broadcast(array $channels, $event, array $payload = [])
{
    $connection = $this->redis->connection($this->connection);

    $payload = json_encode([
        'event' => $event,
        'data' => $payload,
        'socket' => Arr::pull($payload, 'socket'),
    ]);

    foreach ($this->formatChannels($channels) as $channel) {
        $connection->publish($channel, $payload);
    }
}

这就简单的,无非就是创建 redis 连接,然后将数据 (包含 eventdatasocket构成的数组),利用 redis publish 出去,等着 laravel-echo-server 监听接收!

注:redis 有发布 (publish),就会有订阅,如:Psubscribe。 好了,我们开始研究 laravel-echo-server,看它怎么订阅的。

laravel-echo-server

在 Laravel 项目没有专门提供该 Server,很多项目都是使用 tlaverdure/laravel-echo-server (https://github.com/tlaverdure/laravel-echo-server),其中我们的偶像 Laradock 也集成了该工具。

所以我们就拿 Laradock 配置来说一说。

.
|____Dockerfile
|____laravel-echo-server.json
|____package.json

主要包含三个文件,一个 Dockerfile 文件,用来创建容器;package.json 主要是安装 tlaverdure/laravel-echo-server 插件;laravel-echo-server.json 文件就是与 Laravel 交互的配置文件。

看看 Dockfile 内容:

FROM node:alpine

RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/

RUN apk add --update \
    python \
    python-dev \
    py-pip \
    build-base

RUN npm install

# Bundle app source
COPY laravel-echo-server.json /usr/src/app/laravel-echo-server.json

EXPOSE 3000
CMD [ "npm", "start" ]

主要是以 node:alpine 为底,将项目部署在路径 /usr/src/app/,执行命令 npm install 安装插件,参考文件 package.json:

{
  "name": "laravel-echo-server-docker",
  "description": "Docker container for running laravel-echo-server",
  "version": "0.0.1",
  "license": "MIT",
  "dependencies": {
    "laravel-echo-server": "^1.3.9"
  },
  "scripts": {
    "start": "laravel-echo-server start"
  }
}

然后,在将配置文件加载进该路径下,最后执行 npm start,也就是执行命令 laravel-echo-server start,并且放出 3000 端口。

我们通过启动容器,然后进入容器看看文件结构:

执行 docker-compose up laravel-echo-server 后就可以看到 server 启动:

同样的,我们也可以下载它的源代码,来运行达到效果。

tlaverdure/laravel-echo-server Laravel Echo Node JS Server for Socket.io

下载源代码:

git clone https://github.com/tlaverdure/laravel-echo-server.git

进入项目安装插件:

npm install

执行后,直接生成 dist 文件夹:

.
|____api
| |____http-api.js
| |____index.js
|____channels
| |____channel.js
| |____index.js
| |____presence-channel.js
| |____private-channel.js
|____cli
| |____cli.js
| |____index.js
|____database
| |____database-driver.js
| |____database.js
| |____index.js
| |____redis.js
| |____sqlite.js
|____echo-server.js
|____index.js
|____log.js
|____server.js
|____subscribers
| |____http-subscriber.js
| |____index.js
| |____redis-subscriber.js
| |____subscriber.js

通过提供的 example 可以知道执行的入口在于 EchoServerrun 方法,简单修改下 options 配置:

var echo = require('../dist/index.js');

var options = {
  "authHost": "http://lrss.learning.test",
  "authEndpoint": "/broadcasting/auth",
  "clients": [],
  "database": "redis",
  "databaseConfig": {
    "redis": {
      "port": "63794",
      "host": "0.0.0.0"
    }
  },
  "devMode": true,
  "host": null,
  "port": "6001",
  "protocol": "http",
  "socketio": {},
  "sslCertPath": "",
  "sslKeyPath": ""
};

echo.run(options);

测试一下看看,是否和 Laravel 服务连接到位:

Laravel-echo-server 打印结果:

说明连接上了。

刚才的 dist 文件夹是通过 TypeScript 生成的结果,当然,我们需要通过它的源代码来解读:

.
|____api
| |____http-api.ts
| |____index.ts
|____channels
| |____channel.ts
| |____index.ts
| |____presence-channel.ts
| |____private-channel.ts
|____cli
| |____cli.ts
| |____index.ts
|____database
| |____database-driver.ts
| |____database.ts
| |____index.ts
| |____redis.ts
| |____sqlite.ts
|____echo-server.ts
|____index.ts
|____log.ts
|____server.ts
|____subscribers
| |____http-subscriber.ts
| |____index.ts
| |____redis-subscriber.ts
| |____subscriber.ts

主要包含:接口 (api)、频道 (channels)、 数据库 (database)、订阅 (subscribers) 等,我们会一个个来说的。

我们先看 echo-server.tslisten 函数:

/**
 * Listen for incoming event from subscibers.
 *
 * @return {void}
 */
listen(): Promise<any> {
    return new Promise((resolve, reject) => {
        let http = this.httpSub.subscribe((channel, message) => {
            return this.broadcast(channel, message);
        });

        let redis = this.redisSub.subscribe((channel, message) => {
            return this.broadcast(channel, message);
        });

        Promise.all([http, redis]).then(() => resolve());
    });
}

我们主要看 this.redisSub.subscribe() 无非就是通过 redis 订阅,然后再把 channelmessage 广播出去,好了,我们看看怎么做到订阅的,看 redis-subscribersubscribe() 函数:

/**
 * Subscribe to events to broadcast.
 *
 * @return {Promise<any>}
 */
subscribe(callback): Promise<any> {

    return new Promise((resolve, reject) => {
        this._redis.on('pmessage', (subscribed, channel, message) => {
            try {
                message = JSON.parse(message);

                if (this.options.devMode) {
                    Log.info("Channel: " + channel);
                    Log.info("Event: " + message.event);
                }

                callback(channel, message);
            } catch (e) {
                if (this.options.devMode) {
                    Log.info("No JSON message");
                }
            }
        });

        this._redis.psubscribe('*', (err, count) => {
            if (err) {
                reject('Redis could not subscribe.')
            }

            Log.success('Listening for redis events...');

            resolve();
        });
    });
}

这里我们就可以看到之前提到的 redis 订阅函数了:

this._redis.psubscribe('*', (err, count) => {
    if (err) {
        reject('Redis could not subscribe.')
    }

    Log.success('Listening for redis events...');

    resolve();
});

好了,只要获取信息,就可以广播出去了:

this._redis.on('pmessage', (subscribed, channel, message) => {
    try {
        message = JSON.parse(message);

        if (this.options.devMode) {
            Log.info("Channel: " + channel);
            Log.info("Event: " + message.event);
        }

        // callback(channel, message);
        // return this.broadcast(channel, message);
        if (message.socket && this.find(message.socket)) {
            this.server.io.sockets.connected[message.socket](channel)
            .emit(message.event, channel, message.data);

            return true
        } else {
            this.server.io.to(channel)
            .emit(message.event, channel, message.data);

            return true
        }
    } catch (e) {
        if (this.options.devMode) {
            Log.info("No JSON message");
        }
    }
});

到此,我们已经知道 Laravel 是怎么和 Laravel-echo-server 利用 redis 订阅和发布消息的。同时,也知道是用 socket.io 和前端 emit/on 交互的。

下面我们看看前端是怎么接收消息的。

laravel-echo

前端需要安装两个插件:laravel-echosocket.io-client,除了做配置外,监听一个公开的 channel,写法还是比较简单的:

window.Echo.channel('public_channel')
.listen('RssPublicEvent', (e) => {
    that.names.push(e.name)
});

达到的效果就是,只要接收到服务器发出的在公开频道 public_channel 的事件 RssPublicEvent,就会把消息内容显示出来:

我们开始看看这个 Laravel-echo 源代码了:

先看配置信息:

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth:
        {
            headers:
                {
                'authorization': 'Bearer ' + store.getters.token
                }
        }
});

配置的 broadcaster 是: socket.io,所有用的是:

// echo.ts
constructor(options: any) {
    this.options = options;

    if (typeof Vue === 'function' && Vue.http) {
        this.registerVueRequestInterceptor();
    }

    if (typeof axios === 'function') {
        this.registerAxiosRequestInterceptor();
    }

    if (typeof jQuery === 'function') {
        this.registerjQueryAjaxSetup();
    }

    if (this.options.broadcaster == 'pusher') {
        this.connector = new PusherConnector(this.options);
    } else if (this.options.broadcaster == 'socket.io') {
        this.connector = new SocketIoConnector(this.options);
    } else if (this.options.broadcaster == 'null') {
        this.connector = new NullConnector(this.options);
    }
}

接着看 channel 函数:

// echo.ts
channel(channel: string): Channel {
    return this.connector.channel(channel);
}

// socketio-connector.ts
channel(name: string): SocketIoChannel {
    if (!this.channels[name]) {
        this.channels[name] = new SocketIoChannel(
            this.socket,
            name,
            this.options
        );
    }

    return this.channels[name];
}

主要是创建 SocketIoChannel,我们看看怎么做 listen

// socketio-connector.ts
listen(event: string, callback: Function): SocketIoChannel {
    this.on(this.eventFormatter.format(event), callback);

    return this;
}

继续看 on()

on(event: string, callback: Function): void {
    let listener = (channel, data) => {
        if (this.name == channel) {
            callback(data);
        }
    };

    this.socket.on(event, listener);
    this.bind(event, listener);
}

到这就比较清晰了,利用 this.socket.on(event, listener); 来获取 Laravel-echo-serversocket.io 发出来的消息。

注:更多有关 socketio/socket.io-client,可以看官网:https://github.com/socketio/socket.io-client

总结

到目前为止,通过解读这几个插件和源代码,我们基本跑通了一个 public channel流程。

这过程主要参考:

  1. 简单 16步走一遍 Laravel Echo 的使用 https://mp.weixin.qq.com/s/08ucg0Sq1t3IZWJ-T8SyYw
  2. 看 Laravel 源代码了解 ServiceProvider 的加载过程 https://mp.weixin.qq.com/s/dkbUNSTwVbd6ECs948LgKA

下一步主要看看怎么解析一个 private channel

原文发布于微信公众号 - coding01(coding01)

原文发表时间:2018-09-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lgp20151222

Java规则引擎drools:drt动态生成规则并附上具体项目逻辑

由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面。

2482
来自专栏WindCoder

Laravel API教程:如何构建和测试RESTful API

本文原文:Laravel API Tutorial: How to Build and Test a RESTful API

8802
来自专栏小白安全

可以被XSS利用的HTML标签和一些手段技巧

XSS让我们在渗透中有无限的可能,只要你发挥你的想象。  引用一位前辈总结的很贴切的一句话——“XSS使整个WEB体系变得具有灵性” 。 网上关于XSS的教程数...

4179
来自专栏PhpZendo

深入剖析 Laravel 服务容器

之前在 深度挖掘 Laravel 生命周期 一文中,我们有去探究 Laravel 究竟是如何接收 HTTP 请求,又是如何生成响应并最终呈现给用户的工作原理。

3811
来自专栏前端小吉米

如何写出一手好的小程序之多端架构篇

为了大家能更好的开发出一些高质量、高性能的小程序,这里带大家理解一下小程序在不同端上架构体系的区分,更好的让大家理解小程序一些特有的代码写作方式。

1883
来自专栏FreeBuf

在渗透测试中使用fuzz技术(附windows安装指南)

前言:本文翻译自‍‍‍‍sans.org,有删节。在学习sulley的过程中发现中文参考资料很少,所以抛砖引玉翻译一下,希望对学习协议fuzz测试的同学有帮助。...

2777
来自专栏腾讯Bugly的专栏

移动App入侵与逆向破解技术-iOS篇

如果您有耐心看完这篇文章,您将懂得如何着手进行app的分析、追踪、注入等实用的破解技术,另外,通过“入侵”,将帮助您理解如何规避常见的安全漏洞,文章大纲: 简单...

2.7K6
来自专栏恰童鞋骚年

设计模式的征途—13.代理(Proxy)模式

所谓代购,简单说来就是找人帮忙购买所需要的商品。代购分为两种类型,一种是因为在当地买不到某件商品,又或者是因为当地这件商品的价格比其他地区的贵,因此托人在其他地...

1013
来自专栏皮振伟的专栏

[linux][network]虚拟网卡技术分析

前言: 虚拟化场景下的网卡虚拟化,就是让虚拟机觉得自己有网卡。就有了e1000/rtl8139为代表的物理网卡软件模拟实现;为了加速Guest和Host之间的数...

53311
来自专栏Seebug漏洞平台

TCTF/0CTF2018 XSS Writeup

刚刚4月过去的TCTF/0CTF2018一如既往的给了我们惊喜,其中最大的惊喜莫过于多道xss中Bypass CSP的题目,其中有很多应用于现代网站的防御思路。...

1303

扫码关注云+社区

领取腾讯云代金券