Laravel 广播入门，弹幕的实现

lufeijun1234 的个人博客 / 5 / 2 / 创建于 6年前 / 更新于 6年前 / 2 个改进

laravel 广播介绍

laravel 的广播模块，本质是利用 websocket 建立客户端和服务端的双向链接，通过各种频道进行通信，完成信息的更新显示

开工前准备

laravel 6.0 版本
laravel 队列，本例使用 redis 作为队列驱动
laravel/ui 提供的前端脚手架
laravel 事件

配置

redis 相关配置
开启广播服务提供者
在 config/app.php 中取消 App\Providers\BroadcastServiceProvider::class, 前边的注释
设置队列、广播为 redis 驱动
在 .env 中，设置
BROADCAST_DRIVER=redis
QUEUE_CONNECTION=redis

开始

创建广播事件

使用 php artisan make:event PushMsgEvent，创建事件类

编写事件类

class PushMsgEvent implements ShouldBroadcast
{  
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $msg;

    /**
     *  定义 msg 变量，保存弹幕消息
     */
    public function __construct( $msg )
    {
        // 简单的消息列表
        $this->msg = $msg;
    }

    /**
     *  弹幕所有人都可以收到，所以返回公共频道就 OK 的
     */
    public function broadcastOn()
    {
        return new Channel('push');
    }

   /**
    *  重命名一下广播名称，一般默认为类名
    */
    public function broadcastAs()
    {
         return 'push.msg';
    }
}

编写路由及控制器，用于展示弹幕和发送弹幕

class BroadcastingController extends Controller
{
  /**
   * 展示弹幕显示页面
   */
  public function index()
  {
    return view("broadcasting.index");
  }

 /** 
  * 接受前端弹幕请求，并触发广播事件
  */
  public function put( Request $request )
  {
        broadcast(  new PushMsgEvent( $request->msg )  );
  }
}

安装各种需要的 node 包

laravel-echo-server 包，与 laravel 兼容的 Socket.IO 服务器
- npm install -g laravel-echo-server 全局安装
- laravel-echo-server init 初始化配置信息，在根目录下生成 laravel-echo-server.json 文件
- laravel-echo-server start | stop ， Socket.IO 的开启或关闭，这个需要使用守护进程在服务器上运行
socket.io 客户端
npm install --save laravel-echo
npm install --save socket.io-client

前端页面编写

修改 webpack.min.js ，生成单独使用的 broadcasting.js 文件

 mix.js('resources/js/app.js', 'public/js')
       .js('resources/js/vue-component.js', 'public/js')
       .js('resources/js/broadcasting.js', 'public/js')  /// 新增
       .sass('resources/sass/app.scss', 'public/css');

编写 resources/js/broadcasting.js

// 引入该引入的包
import Echo from 'laravel-echo';
window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});
window.Echo.channel('push')
.listen('.push.msg', (e) => {
    alert( e.msg );  // 这里只是弹出弹幕消息，滚动的效果就不做了
});

运行 npm run dev 生成 broadcasting.js 文件

编写 broadcasting.index blade 文件

<div class="my-container container">
  <div class="col-xs-12" style="min-height: 600px;">
  </div>
</div>
<script src="{{ asset('js/broadcasting.js') }}" defer></script>