Laravel  广播系统后端配置

1、所需安装

(1) composer require pusher/pusher-php-server

(2) npm install -g laravel-echo-server

注： 需执行npm config set registry <u>https://registry.npmjs.org/</u>

将npm镜像修改为国外镜像

2、初始化laravel-echo-server

执行 laravel-echo-server init 初始化laravel-echo-server服务

3、修改初始化生成的laravel-echo-server.json文件

(1) authHost 修改为当前服务器域名或IP

(2) 检查Port 端口是否正确

4、注册laravel的广播服务

(1) Config 文件夹下的 app.php，取消BroadcastServiceProvider 在这个 Providers 数组中的注释

5、修改.env 文件

(1) PUSHER_APP_ID修改为laravel-echo-server.json里的clients数组内的appid

(2) PUSHER_APP_KEY修改为laravel-echo-server.json里的clients数组内的key

(3) BROADCAST_DRIVER修改为laravel-echo-server.json里的database对应的数据

6、修改广播配置（config文件夹下的broadcasting.php）

1、检查默认的驱动方式是否为env的BROADCAST_DRIVER配置项

2、检查connections数组下的pusher数组内的key与appid的值是否从.Env读取

7、修改config下的database.php

(1) 将redis下的options下的prefix修改为空

8、在app文件夹下Providers文件下的EventServiceProvider文件内的listen属性内创建OrderShipped 事件和相关的监听器。

例：

  protected $listen = [
    'App\Events\OrderShipped' => [ // OrderShipped 为事件，

        'App\Listeners\SendShipmentNotification',
          //SendShipmentNotification 为监听器
    ],
];

（<u>点击此处查看事件系统文档</u>）

然后项目中执行php artisan event:generate命令，系统会自动创建相关的事件文件和监听器文件。

广播事件OrderShipped必须继承ShouldBroadcast接口（事件名称可随意定义，但需有前端监听的事件名称一致）

9、修改OrderShipped事件内的broadcastOn方法

(1) 修改为 return new Channel('orderStatus');

此为定义广播频道，括号内的字符串为广播频道名称

广播频道需与前端监听的频道名称保持一致

10、若需携带参数则可使用broadcastWith方法

public function broadcastWith(){

        return [

            'data' => 'key'

        ];

}

11、需要调用广播时通过event方法调用广播事件即可

(1) 例： event(new OrderShipped($id));

12、在服务器执行laravel-echo-server start 启动广播服务

Laravel广播系统前端配置

1、安装npm包

(1) npm install --save laravel-echo pusher-js

(2) npm install socket.io-client --save

2、文件中引入包

(1) import io from 'socket.io-client'

(2) import Echo from 'laravel-echo'

3、调用代码

window.Echo = new Echo({

   broadcaster: 'socket.io',

   host: '192.168.0.200:6001'  // socket服务器代码

 });

  window.Echo.channel(`orderStatus`) // 广播频道名称

   .listen('OrderShipped', (e) => { // 消息名称 （后端事件名称）

    console.log(e); // 收到消息进行的操作，参数 e 为所携带的数据

   });