Laravel broadcasting 廣播機制

• 從伺服器廣播訊息到前端接收的流程，大概會是這樣:

1. 使用 Laravel broadcasting(Redis) 廣播 Event 到 Queue(Redis)。
2. Laravel Queue Listener 讀取Event，並使用Redis的Sub/Pub機制把Event發送給laravel-echo-server。
3. laravel-echo-server 接收到 Event，並透過socket.io將Event發送给laravel-echo。
4. laravel-echo解析接收到的 Event。

• 關於事件廣播的設定檔在這: config/broadcasting.php

安裝與設定Redis

$ composer require predis/predis

QUEUE_CONNECTION=redis
BROADCAST_DRIVER=redis

註冊BroadcastServiceProvider

新增Event來廣播

• 新增一個出貨狀態更新的Event:

$ php artisan make:event ShippingStatusUpdated

• implements ShouldBroadcast是為了當event被觸發時，把event廣播出去。
• broadcastOn()用來設定要廣播到哪個頻道，如果我們希望只有這個訂單建立者可以查看更新狀態，就要在訂單的私人頻道廣播這個event，如L26註解的。
• 廣播頻道有三種可以選: Channel/PrivateChannel/PresenceChannel
• Channel 代表任何使用者都可以訂閱的公共頻道，而 PrivateChannel 和 PresenceChannel 則代表需要授權的私人頻道。
• broadcastAs()用來自訂廣播名稱。

定義頻道授權規則

• 如果是用PrivateChannel，需要定義頻道授權規則，如果是公共頻道(Channel)就不用。
• 在routes/channels.php這邊可以定義頻道授權規則，比如「驗證任何在 order.{orderId} 的私人頻道上嘗試監聽的使用者是否為實際該訂單的建立人」:

Broadcast::channel('order.{orderId}', function ($user, $orderId) {
　　return $user->id === Order::findOrNew($orderId)->user_id;
});

• 注意，如果是用JWT來做認證，需修改BroadcastServiceProvider:

Broadcast::routes(['middleware' => ['auth:api']]);

public function broadcastAs()
{
　　return 'OrderUpdated';
}

• 安裝:

$ npm install --save socket.io-client
$ npm install --save laravel-echo

import Echo from 'laravel-echo';
window.io = require('socket.io-client');
window.Echo = new Echo({
　　broadcaster: 'socket.io',
　　host: window.location.hostname + ':6001'
});

$ npm run dev

• 會將resources/js build到 public/js(resources/js/app.js => public/js/app.js)
• 由於app.js中有引用bootstrap.js，所以在頁面中引用app.js就能使用Echo了。

• 其中這行就是引用public/js/app.js。
• 這邊值得提的是，listen OrderUpdated前面要多一個「.」，OrderUpdated是對應到broadcastAs()自訂的廣播名稱。
• Laravel Echo 會需要存取當前 session 的 CSRF token，header中要設定CSRF token。
• L13~L16就是laravel echo在監聽laravel echo server透過socket.io傳過來的訊息。

• 安裝laravel-echo-server:

$ npm install -g laravel-echo-server

• project根目錄下，初始化laravel-echo-server，所有問題都用預設的:

$ laravel-echo-server init

• 啟動laravel-echo-server:

$ laravel-echo-server start

Demo

• 啟動laravel echo server與queue listener，瀏覽器開啟前端，在監聽到event的時候把message print出來。
• 如上述code，為了簡便，本範例是以廣播至公共頻道來demo，雖然訂單狀態應該是只有建立者可以看的到，需改成私有頻道會較合理。若今天應用情境是新聞推播系統，就很符合範例用的公共頻道。

後記

• 將prefix那行註解，就會變成Channel: order。

Laravel Echo listen不到訊息