Laravel 廣播入門，彈幕的實現

lufeijun1234發表於2019-10-26
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

建立廣播事件

  1. 使用 php artisan make:event PushMsgEvent，建立事件類

  2. 編寫事件類

    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';
    }
}

  3. 編寫路由及控制器，用於展示彈幕和傳送彈幕

    class BroadcastingController extends Controller
{
  /**
   * 展示彈幕顯示頁面
   */
  public function index()
  {
    return view("broadcasting.index");
  }

 /** 
  * 接受前端彈幕請求，並觸發廣播事件
  */
  public function put( Request $request )
  {
        broadcast(  new PushMsgEvent( $request->msg )  );
  }
}

安裝各種需要的 node 包

  1. 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 的開啟或關閉，這個需要使用守護程式在伺服器上執行

  2. socket.io 客戶端
    npm install --save laravel-echo
    npm install --save socket.io-client

前端頁面編寫

  1. 修改 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');

  2. 編寫 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 );  // 這裡只是彈出彈幕訊息，滾動的效果就不做了
});

  3. 執行 npm run dev 生成 broadcasting.js 檔案

  4. 編寫 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>
  1. 開啟 Socket.IO 服務端程式，laravel-echo-server start
  2. 開始佇列處理程式 php artisan queue:work --timeout=30
  3. 利用 php 提供的內部伺服器 php artisan serve
  4. 在輸入彈幕訊息之後，彈幕展示頁面便會將訊息彈出
  1. laravel 6.0 的 redis 有一個字首配置，需要設定為空，否則在佇列時間中也會預設加上這個字首資訊，導致廣播失敗。
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章