廣播系統 · laravel 5.4

<article><h1>Laravel 的事件廣播系統</h1><ul><li><a href="#introduction">簡介</a><ul><li><a href="#configuration">配置</a></li><li><a href="#driver-prerequisites">對驅動器的要求</a></li></ul></li><li><a href="#concept-overview">概念綜述</a><ul><li><a href="#using-example-application">使用示例程序</a></li></ul></li><li><a href="#defining-broadcast-events">定義廣播事件</a><ul><li><a href="#broadcast-name">廣播名稱</a></li><li><a href="#broadcast-data">廣播數據</a></li><li><a href="#broadcast-queue">廣播隊列</a></li></ul></li><li><a href="#authorizing-channels">頻道授權</a><ul><li><a href="#defining-authorization-routes">定義授權路由</a></li><li><a href="#defining-authorization-callbacks">定義授權回調</a></li></ul></li><li><a href="#broadcasting-events">對事件進行廣播</a><ul><li><a href="#only-to-others">只廣播給他人</a></li></ul></li><li><a href="#receiving-broadcasts">接收廣播</a><ul><li><a href="#installing-laravel-echo">安裝 Laravel Echo</a></li><li><a href="#listening-for-events">對事件進行監聽</a></li><li><a href="#leaving-a-channel">退出頻道</a></li><li><a href="#namespaces">命名空間</a></li></ul></li><li><a href="#presence-channels">Presence 頻道</a><ul><li><a href="#authorizing-presence-channels">授權 Presence 頻道</a></li><li><a href="#joining-presence-channels">加入 Presence 頻道</a></li><li><a href="#broadcasting-to-presence-channels">廣播到 Presence 頻道</a></li></ul></li><li><a href="#client-events">客戶端事件</a></li><li><a href="#notifications">消息通知</a></li></ul><a name="introduction"></a><h2><a href="#introduction">簡介</a></h2>在現代的 web 應用程序中，WebSockets 被用來實現需要實時、即時更新的接口。當服務器上的數據被更新后，更新信息將通過 WebSocket 連接發送到客戶端等待處理。相比于不停地輪詢應用程序，WebSocket 是一種更加可靠和高效的選擇。為了幫助你建立這類應用，Laravel 將通過 WebSocket 連接來使「廣播」<a href="/docs/5.4/events">事件</a> 變得更加輕松。廣播事件允許你在服務端代碼和客戶端 JavaScript 應用之間共享相同的事件名。<blockquote class="has-icon tip"><div class="flag"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0px" y="0px" width="56.6px" height="87.5px" viewBox="0 0 56.6 87.5" enable-background="new 0 0 56.6 87.5" xml:space="preserve"><path fill="#FFFFFF" d="M28.7 64.5c-1.4 0-2.5-1.1-2.5-2.5v-5.7 -5V41c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v10.1 5 5.8C31.2 63.4 30.1 64.5 28.7 64.5zM26.4 0.1C11.9 1 0.3 13.1 0 27.7c-0.1 7.9 3 15.2 8.2 20.4 0.5 0.5 0.8 1 1 1.7l3.1 13.1c0.3 1.1 1.3 1.9 2.4 1.9 0.3 0 0.7-0.1 1.1-0.2 1.1-0.5 1.6-1.8 1.4-3l-2-8.4 -0.4-1.8c-0.7-2.9-2-5.7-4-8 -1-1.2-2-2.5-2.7-3.9C5.8 35.3 4.7 30.3 5.4 25 6.7 14.5 15.2 6.3 25.6 5.1c13.9-1.5 25.8 9.4 25.8 23 0 4.1-1.1 7.9-2.9 11.2 -0.8 1.4-1.7 2.7-2.7 3.9 -2 2.3-3.3 5-4 8L41.4 53l-2 8.4c-0.3 1.2 0.3 2.5 1.4 3 0.3 0.2 0.7 0.2 1.1 0.2 1.1 0 2.2-0.8 2.4-1.9l3.1-13.1c0.2-0.6 0.5-1.2 1-1.7 5-5.1 8.2-12.1 8.2-19.8C56.4 12 42.8-1 26.4 0.1zM43.7 69.6c0 0.5-0.1 0.9-0.3 1.3 -0.4 0.8-0.7 1.6-0.9 2.5 -0.7 3-2 8.6-2 8.6 -1.3 3.2-4.4 5.5-7.9 5.5h-4.1H28h-0.5 -3.6c-3.5 0-6.7-2.4-7.9-5.7l-0.1-0.4 -1.8-7.8c-0.4-1.1-0.8-2.1-1.2-3.1 -0.1-0.3-0.2-0.5-0.2-0.9 0.1-1.3 1.3-2.1 2.6-2.1H41C42.4 67.5 43.6 68.2 43.7 69.6zM37.7 72.5H26.9c-4.2 0-7.2 3.9-6.3 7.9 0.6 1.3 1.8 2.1 3.2 2.1h4.1 0.5 0.5 3.6c1.4 0 2.7-0.8 3.2-2.1L37.7 72.5z"></path></svg></div> 在深入了解事件廣播之前，請確認你已閱讀所有關于 Laravel <a href="/docs/5.4/events">事件和偵聽器</a> 的文檔。</blockquote><a name="configuration"></a><h3>配置</h3>所有關于事件廣播的配置都被保存在 <code class=" language-php">config/broadcasting.php</code> 文件中。Laravel 自帶了幾個廣播驅動器：<a href="https://pusher.com">Pusher</a>， <a href="/docs/5.4/redis">Redis</a>，和一個用于本地開發與調試的 <code class=" language-php">log</code> 驅動器。另外，還有一個 <code class=" language-php">null</code> 驅動器可以讓你完全關閉廣播功能。每一個驅動的示例配置都可以在 <code class=" language-php">config/broadcasting.php</code> 文件中被找到。<h4>廣播服務提供者</h4>在對事件進行廣播之前，你必須先注冊 <code class=" language-php">App\Providers\BroadcastServiceProvider</code>。對于一個全新安裝的 Laravel 應用程序，你只需在 <code class=" language-php">config/app.php</code> 配置文件的 <code class=" language-php">providers</code> 數組中取消對該提供者的注釋即可。該提供者將允許你注冊廣播授權路由和回調。<h4>CSRF 令牌</h4><a href="#installing-laravel-echo">Laravel Echo</a> 會需要訪問當前會話的 CSRF 令牌。如果可用，Echo 會從 <code class=" language-php">Laravel.csrfToken</code> JavaScript 對象中獲取該令牌。如果你運行了 <code class=" language-php">make:auth</code> Artisan 命令，該對象會在 <code class=" language-php">resources/views/layouts/app.blade.php</code> 布局文件中被定義。如果你未使用該布局文件，可以在應用程序的 <code class=" language-php">head</code> HTML 元素中定義一個 <code class=" language-php">meta</code> 標簽：<pre class=" language-php"><code class=" language-php"><meta name="csrf-token" content="{{ csrf_token() }}"></code></pre><a name="driver-prerequisites"></a><h3>對驅動器的要求</h3><h4>Pusher</h4>如果你使用 <a href="https://pusher.com">Pusher</a> 對事件進行廣播，請用 Composer 包管理器來安裝 Pusher PHP SDK：<pre class=" language-php"><code class=" language-php">composer require pusher/pusher-php-server</code></pre>然后，你需要在 <code class=" language-php">config/broadcasting.php</code> 配置文件中填寫你的 Pusher 證書。該文件中已經包含了一個 Pusher 示例配置，你只需指定 Pusher key、secret 和 application ID 即可。<code class=" language-php">config/broadcasting.php</code> 中的 <code class=" language-php">pusher</code> 配置項同時也允許你指定 Pusher 支持的 <code class=" language-php">options</code>，例如 cluster：<pre class=" language-php"><code class=" language-php">'options' => [ 'cluster' => 'eu', 'encrypted' => true ],</code></pre>當把 Pusher 與 <a href="#installing-laravel-echo">Laravel Echo</a> 一起使用時，你應該在實例化 Echo 對象時指定 broadcaster 為 <code class=" language-php">pusher</code>：<pre class=" language-php"><code class=" language-php">import Echo from "laravel-echo" window.Echo = new Echo({ broadcaster: 'pusher', key: 'your-pusher-key' });</code></pre><h4>Redis</h4>如果你使用 Redis 廣播器，請安裝 Predis 庫：<pre class=" language-php"><code class=" language-php">composer require predis/predis</code></pre>Redis 廣播器會使用 Redis 的「生產者/消費者」特性來廣播消息；盡管如此，你仍需將它與 WebSocket 服務器一起使用。WebSocket 服務器會從 Redis 接收消息，然后再將消息廣播到你的 WebSocket 頻道上去。當 Redis 廣播器發布一個事件時，該事件會被發布到它指定的頻道上去，傳輸的數據是一個采用 JSON 編碼的字符串。該字符串包含了事件名、<code class=" language-php">data</code> 數據和生成該事件套接字 ID 的用戶（如果可用的話）。<h4>Socket.IO</h4>如果你想把 Redis 廣播器和 Socket.IO 服務器一起使用，你需要將 Socket.IO JavaScript 客戶端庫文件包含到應用程序的 <code class=" language-php">head</code> HTML 元素中。當 Socket.IO 服務啟動的時候，它會自動把 Socket.IO JavaScript 客戶端庫暴露在一個標準的 URL中。例如，如果你的應用和 Socket.IO 服務器運行在同域名下，你可以像下面這樣來訪問你的 Socket.IO JavaScript 客戶端庫：<pre class=" language-php"><code class=" language-php"><script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script></code></pre>接著，你需要在實例化 Echo 時指定 <code class=" language-php">socket.io</code> 連接器和 <code class=" language-php">host</code> 。<pre class=" language-php"><code class=" language-php">import Echo from "laravel-echo" window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001' });</code></pre>最后，你需要運行一個與 Laravel 兼容的 Socket.IO 服務器。Laravel 官方并沒有實現 Socket.IO 服務器；不過，可以選擇一個由社區驅動維護的項目 <a href="https://github.com/tlaverdure/laravel-echo-server">tlaverdure/laravel-echo-server</a>，目前托管在 GitHub。<h4>對隊列的要求</h4>在開始廣播事件之前，你還需要配置和運行 <a href="/docs/5.4/queues">隊列偵聽器</a>。所有的事件廣播都是通過隊列任務來完成的，因此應用程序的響應時間不會受到明顯影響。<a name="concept-overview"></a><h2><a href="#concept-overview">概念綜述</a></h2>Laravel 的事件廣播允許你使用基于驅動的 WebSockets 將服務端的 Larevel 事件廣播到客戶端的 JavaScript 應用程序。當前的 Laravel 自帶了 <a href="http://pusher.com">Pusher</a> and Redis 驅動。通過使用 <a href="#installing-laravel-echo">Laravel Echo</a> 的 Javascript 包，我們可以很方便地在客戶端消費事件。事件通過「頻道」來廣播，這些頻道可以被指定為公開的或私有的。任何訪客都可以訂閱一個不需要認證和授權的公開頻道；然而，如果想訂閱一個私有頻道，那么該用戶必須通過認證，并獲得該頻道的授權。<a name="using-example-application"></a><h3>使用示例程序</h3>讓我們先用一個電子商務網站作為例子來概覽一下事件廣播。我們不會討論如何配置 <a href="http://pusher.com">Pusher</a> 和 <a href="#echo">Laravel Echo</a> 的細節，因為這些會在本文檔的其他章節被詳細介紹。在我們的應用程序中，讓我們假設有一個允許用戶查看訂單配送狀態的頁面。有一個 <code class=" language-php">ShippingStatusUpdated</code> 事件會在配送狀態更新時被觸發：<pre class=" language-php"><code class=" language-php">event(new ShippingStatusUpdated($update));</code></pre><h4><code class=" language-php">ShouldBroadcast</code> 接口</h4>當用戶在查看自己的訂單時，我們不希望他們必須通過刷新頁面才能看到狀態更新。我們希望一旦有更新時就主動將更新信息廣播到客戶端。所以，我們必須讓 <code class=" language-php">ShippingStatusUpdated</code> 事件實現 <code class=" language-php">ShouldBroadcast</code> 接口。這會讓 Laravel 在事件被觸發時廣播該事件：<pre class=" language-php"><code class=" language-php"><?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Queue\SerializesModels; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class ShippingStatusUpdated implements ShouldBroadcast { /** * Information about the shipping status update. * * @var string */ public $update; }</code></pre><code class=" language-php">ShouldBroadcast</code> 接口要求事件實現 <code class=" language-php">broadcastOn</code> 方法。該方法負責指定事件被廣播到哪些頻道。在通過 Artisan 命令生成的事件類中，一個空的 <code class=" language-php">broadcastOn</code> 方法已經被預定義好了，所以我們要做的僅僅是指定頻道。我們希望只有訂單的創建者能夠看到狀態更新，所以我們要把該事件廣播到與這個訂單綁定的私有頻道上去：<pre class=" language-php"><code class=" language-php">/** * Get the channels the event should broadcast on. * * @return array */ public function broadcastOn() { return new PrivateChannel('order.'.$this->update->order_id); }</code></pre><h4>頻道授權</h4>記住，用戶只有在被授權后才能監聽私有頻道。我們可以在 <code class=" language-php">routes/channels.php</code> 文件中定義頻道的授權規則。在本例中，我們需要對試圖監聽私有 <code class=" language-php">order.1</code> 頻道的所有用戶進行驗證，確保只有訂單的創建者才能進行監聽：<pre class=" language-php"><code class=" language-php">Broadcast::channel('order.{orderId}', function ($user, $orderId) { return $user->id === Order::findOrNew($orderId)->user_id; });</code></pre><code class=" language-php">channel</code> 方法接收兩個參數：頻道名稱和一個回調函數，該回調通過返回 <code class=" language-php">true</code> 或 <code class=" language-php">false</code> 來表示用戶是否被授權監聽該頻道。所有的授權回調接收當前被認證的用戶作為第一個參數，任何額外的通配符參數作為后續參數。在本例中，我們使用 <code class=" language-php">{orderId}</code> 占位符來表示頻道名稱的「ID」部分是通配符。<h4>對事件廣播進行監聽</h4>接下來，就只剩下在 JavaScript 應用程序中監聽事件了。我們可以使用 Laravel Echo 來實現。首先，使用 <code class=" language-php">private</code> 方法來訂閱私有頻道。然后，使用 <code class=" language-php">listen</code> 方法來監聽 <code class=" language-php">ShippingStatusUpdated</code> 事件。默認情況下，事件的所有公有屬性會被包括在廣播事件中：<pre class=" language-php"><code class=" language-php">Echo.private(`order.${orderId}`) .listen('ShippingStatusUpdated', (e) => { console.log(e.update); });</code></pre><a name="defining-broadcast-events"></a><h2><a href="#defining-broadcast-events">定義廣播事件</a></h2>要告知 Laravel 一個給定的事件是廣播類型，只需在事件類中實現 <code class=" language-php">Illuminate\Contracts\Broadcasting\ShouldBroadcast</code> 接口即可。該接口已經被導入到所有由框架生成的事件類中，所以你可以很方便地將它添加到你自己的事件中。<code class=" language-php">ShouldBroadcast</code> 接口要求你實現一個方法：<code class=" language-php">broadcastOn</code>。<code class=" language-php">broadcastOn</code> 方法返回一個頻道或一個頻道數組，事件會被廣播到這些頻道。頻道必須是 <code class=" language-php">Channel</code>、<code class=" language-php">PrivateChannel</code> 或 <code class=" language-php">PresenceChannel</code> 的實例。<code class=" language-php">Channel</code> 實例表示任何用戶都可以訂閱的公開頻道，而 <code class=" language-php">PrivateChannels</code> 和 <code class=" language-php">PresenceChannels</code> 則表示需要 <a href="#authorizing-channels">頻道授權</a> 的私有頻道：<pre class=" language-php"><code class=" language-php"><?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Queue\SerializesModels; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class ServerCreated implements ShouldBroadcast { use SerializesModels; public $user; /** * 創建一個新的事件實例 * * @return void */ public function __construct(User $user) { $this->user = $user; } /** * 指定事件在哪些頻道上進行廣播 * * @return Channel|array */ public function broadcastOn() { return new PrivateChannel('user.'.$this->user->id); } }</code></pre>然后，你只需要像你平時那樣 <a href="/docs/5.4/events">觸發事件</a>。一旦事件被觸發，一個 <a href="/docs/5.4/queues">隊列任務</a> 會自動廣播事件到你指定的廣播驅動器上。<a name="broadcast-name"></a><h3>廣播名稱</h3>Laravel 默認會使用事件的類名作為廣播名稱來廣播事件。不過，你也可以在事件類中通過定義一個 <code class=" language-php">broadcastAs</code> 方法來自定義廣播名稱:<pre class=" language-php"><code class=" language-php">/** * 事件的廣播名稱。 * * @return string */ public function broadcastAs() { return 'server.created'; }</code></pre><a name="broadcast-data"></a><h3>廣播數據</h3>當一個事件被廣播時，它所有的 <code class=" language-php">public</code> 屬性會自動被序列化為廣播數據，這允許你在你的 JavaScript 應用中訪問事件的公有數據。因此，舉個例子，如果你的事件有一個公有的 <code class=" language-php">$user</code> 屬性，它包含了一個 Elouqent 模型，那么事件的廣播數據會是：<pre class=" language-php"><code class=" language-php">{ "user": { "id": 1, "name": "Patrick Stewart" ... } }</code></pre>然而，如果你想更細粒度地控制你的廣播數據，你可以添加一個 <code class=" language-php">broadcastWith</code> 方法到你的事件中。這個方法應該返回一個數組，該數組中的數據會被添加到廣播數據中：<pre class=" language-php"><code class=" language-php">/** * 指定廣播數據 * * @return array */ public function broadcastWith() { return ['id' => $this->user->id]; }</code></pre><a name="broadcast-queue"></a><h3>廣播隊列</h3>默認情況下，每一個廣播事件都被添加到默認的隊列上，默認的隊列連接在 <code class=" language-php">queue.php</code> 配置文件中指定。你可以通過在事件類中定義一個 <code class=" language-php">broadcastQueue</code> 屬性來自定義廣播器使用的隊列。該屬性用于指定廣播使用的隊列名稱：<pre class=" language-php"><code class=" language-php">/** * 指定事件被放置在哪個隊列上 * * @var string */ public $broadcastQueue = 'your-queue-name';</code></pre><a name="authorizing-channels"></a><h2><a href="#authorizing-channels">頻道授權</a></h2>對于私有頻道，用戶只有被授權后才能監聽。實現過程是用戶向你的 Laravel 應用程序發起一個攜帶頻道名稱的 HTTP 請求，你的應用程序判斷該用戶是否能夠監聽該頻道。在使用 <a href="#installing-laravel-echo">Laravel Echo</a> 時，上述 HTTP 請求會被自動發送；盡管如此，你仍然需要定義適當的路由來響應這些請求。<a name="defining-authorization-routes"></a><h3>定義授權路由</h3>幸運的是，我們可以在 Laravel 里很容易地定義路由來響應頻道授權請求。在 <code class=" language-php">BroadcastServiceProvider</code> 中，你會看到一個對 <code class=" language-php">Broadcast::routes</code> 方法的調用。該方法會注冊 <code class=" language-php">/broadcasting/auth</code> 路由來處理授權請求：<pre class=" language-php"><code class=" language-php">Broadcast::routes();</code></pre><code class=" language-php">Broadcast::routes</code> 方法會自動把它的路由放進 <code class=" language-php">web</code> 中間件組中；另外，如果你想對一些屬性自定義，可以向該方法傳遞一個包含路由屬性的數組：<pre class=" language-php"><code class=" language-php">Broadcast::routes($attributes);</code></pre><a name="defining-authorization-callbacks"></a><h3>定義授權回調</h3>接下來，我們需要定義真正用于處理頻道授權的邏輯。這是在 <code class=" language-php">routes/channels.php</code> 文件中完成。在該文件中，你可以用 <code class=" language-php">Broadcast::channel</code> 方法來注冊頻道授權回調函數：<pre class=" language-php"><code class=" language-php">Broadcast::channel('order.{orderId}', function ($user, $orderId) { return $user->id === Order::findOrNew($orderId)->user_id; });</code></pre><code class=" language-php">channel</code> 方法接收兩個參數：頻道名稱和一個回調函數，該回調通過返回 <code class=" language-php">true</code> 或 <code class=" language-php">false</code> 來表示用戶是否被授權監聽該頻道。所有的授權回調接收當前被認證的用戶作為第一個參數，任何額外的通配符參數作為后續參數。在本例中，我們使用 <code class=" language-php">{orderId}</code> 占位符來表示頻道名稱的「ID」部分是通配符。<h4>授權回調模型綁定</h4>就像 HTTP 路由一樣，頻道路由也可以利用顯式或隱式<a href="/docs/5.4/routing#route-model-binding">路由模型綁定</a>。例如，相比于接收一個字符串或數字類型的 order ID，你也可以請求一個真正的 <code class=" language-php">Order</code> 模型實例:<pre class=" language-php"><code class=" language-php">use App\Order; Broadcast::channel('order.{order}', function ($user, Order $order) { return $user->id === $order->user_id; });</code></pre><a name="broadcasting-events"></a><h2><a href="#broadcasting-events">對事件進行廣播</a></h2>一旦你已經定義好了一個事件并實現了 <code class=" language-php">ShouldBroadcast</code> 接口，剩下的就是使用 <code class=" language-php">event</code> 函數來觸發該事件。事件分發器會識別出實現了 <code class=" language-php">ShouldBroadcast</code> 接口的事件并將它們加入到隊列進行廣播：<pre class=" language-php"><code class=" language-php">event(new ShippingStatusUpdated($update));</code></pre><a name="only-to-others"></a><h3>只廣播給他人</h3>當創建一個使用到事件廣播的應用程序時，你可以用 <code class=" language-php">broadcast</code> 函數來替代 <code class=" language-php">event</code> 函數。和 <code class=" language-php">event</code> 函數一樣，<code class=" language-php">broadcast</code> 函數將事件分發到服務端偵聽器：<pre class=" language-php"><code class=" language-php">broadcast(new ShippingStatusUpdated($update));</code></pre>不同的是 <code class=" language-php">broadcast</code> 函數有一個 <code class=" language-php">toOthers</code> 方法允許你將當前用戶從廣播接收者中排除：<pre class=" language-php"><code class=" language-php">broadcast(new ShippingStatusUpdated($update))->toOthers();</code></pre>為了更好地理解什么時候使用 <code class=" language-php">toOthers</code> 方法，讓我們假設有一個任務列表的應用程序，用戶可以通過輸入任務名稱來新建任務。為了新建任務，你的應用程序需要發起一個請求到 <code class=" language-php">/task</code> 路由，該路由在接收到請求并成功創建新任務后會觸發一個任務被新建的事件廣播，并返回新任務的 JSON 響應。當你的 JavaScript 應用程序接收到來自該路由的響應時，它會直接將新任務插入到任務列表，就像這樣：<pre class=" language-php"><code class=" language-php">axios.post('/task', task) .then((response) => { this.tasks.push(response.data); });</code></pre>然而，別忘了我們還將接收到一個事件廣播。如果你的 JavaScript 應用程序同時監聽該事件以便添加新任務到任務列表，你將會在你的列表中看到重復的任務：一份來自路由響應，另一份來自廣播。你可以通過使用 <code class=" language-php">toOthers</code> 方法讓廣播器只廣播事件到其他用戶來解決該問題。<h4>配置</h4>當你實例化 Laravel Echo 實例時，一個套接字 ID 會被指定到該連接。如果你使用 <a href="https://vuejs.org">Vue</a> 和 <a href="https://github.com/mzabriskie/axios">Axios</a>，套接字 ID 會自動被添加到每一個請求的 <code class=" language-php">X-Socket-ID</code> 頭中。然后，當你調用 <code class=" language-php">toOthers</code> 方法時，Laravel 會從頭中提取出套接字 ID，并告訴廣播器不要廣播任何消息到該套接字 ID 的連接上。如果你沒有使用 Vue 和 Axios，則需要手動配置 JavaScript 應用程序來發送 <code class=" language-php">X-Socket-ID</code> 頭。你可以用 <code class=" language-php">Echo.socketId</code> 方法來獲取套接字 ID：<pre class=" language-php"><code class=" language-php">var socketId = Echo.socketId();</code></pre><a name="receiving-broadcasts"></a><h2><a href="#receiving-broadcasts">接收廣播</a></h2><a name="installing-laravel-echo"></a><h3>安裝 Laravel Echo</h3>Laravel Echo 是一個 JavaScript 庫，它使得訂閱頻道和監聽由 Laravel 廣播的事件變得非常容易。你可以通過 NPM 包管理器來安裝 Echo。在本例中，因為我們將使用 Pusher 廣播器，請安裝 <code class=" language-php">pusher-js</code> 包：<pre class=" language-php"><code class=" language-php">npm install --save laravel-echo pusher-js</code></pre>一旦 Echo 被安裝好，你就可以在你應用程序的 JavaScript 中創建一個全新的 Echo 實例。做這件事的一個理想地方是在 <code class=" language-php">resources/assets/js/bootstrap.js</code> 文件的底部，Laravel 框架自帶了該文件：<pre class=" language-php"><code class=" language-php">import Echo from "laravel-echo" window.Echo = new Echo({ broadcaster: 'pusher', key: 'your-pusher-key' });</code></pre>當你使用 <code class=" language-php">pusher</code> 連接器來創建一個 Echo 實例的時候，你需要指定 <code class=" language-php">cluster</code> 以及指定連接是否需要加密：<pre class=" language-php"><code class=" language-php">window.Echo = new Echo({ broadcaster: 'pusher', key: 'your-pusher-key', cluster: 'eu', encrypted: true });</code></pre><a name="listening-for-events"></a><h3>對事件進行監聽</h3>一旦你安裝好并實例化了 Echo，你就可以開始監聽事件廣播了。首先，使用 <code class=" language-php">chennel</code> 方法來獲取一個頻道實例，然后調用 <code class=" language-php">listen</code> 方法來監聽指定的事件：<pre class=" language-php"><code class=" language-php">Echo.channel('orders') .listen('OrderShipped', (e) => { console.log(e.order.name); });</code></pre>如果你想監聽私有頻道上的事件，請使用 <code class=" language-php">private</code> 方法。你可以通過鏈式調用 <code class=" language-php">listen</code> 方法來監聽一個頻道上的多個事件：<pre class=" language-php"><code class=" language-php">Echo.private('orders') .listen(...) .listen(...) .listen(...);</code></pre><a name="leaving-a-channel"></a><h3>退出頻道</h3>如果想退出頻道，你需要在你的 Echo 實例上調用 <code class=" language-php">leave</code> 方法：<pre class=" language-php"><code class=" language-php">Echo.leave('orders');</code></pre><a name="namespaces"></a><h3>命名空間</h3>你可能注意到了在上面的例子中我們沒有為事件類指定完整的命名空間。這是因為 Echo 會自動認為事件在 <code class=" language-php">App\Events</code> 命名空間下。你可以在實例化 Echo 的時候傳遞一個 <code class=" language-php">namespace</code> 配置選項來指定根命名空間：<pre class=" language-php"><code class=" language-php">window.Echo = new Echo({ broadcaster: 'pusher', key: 'your-pusher-key', namespace: 'App.Other.Namespace' });</code></pre>另外，你也可以在使用 Echo 訂閱事件的時候為事件類加上 <code class=" language-php">.</code> 前綴。這時需要填寫完全限定名稱的類名：<pre class=" language-php"><code class=" language-php">Echo.channel('orders') .listen('.Namespace.Event.Class', (e) => { // });</code></pre><a name="presence-channels"></a><h2><a href="#presence-channels">Presence 頻道</a></h2>Presence 頻道是在私有頻道的安全性基礎上，額外暴露出有哪些人訂閱了該頻道。這使得它可以很容易地建立強大的、協同的應用，如當有一個用戶在瀏覽頁面時，通知其他正在瀏覽相同頁面的用戶。<a name="joining-a-presence-channel"></a><h3>授權 Presence 頻道</h3>Presence 頻道也是私有頻道；因此，用戶必須 <a href="#authorizing-channels">獲得授權后才能訪問他們</a>。與私有頻道不同的是，在給 presence 頻道定義授權回調函數時，如果一個用戶已經加入了該頻道，那么不應該返回 <code class=" language-php">true</code>，而應該返回一個關于該用戶信息的數組。由授權回調函數返回的數據能夠在你的 JavaScript 應用程序中被 presence 頻道事件偵聽器所使用。如果用戶沒有獲得加入該 presence 頻道的授權，那么你應該返回 <code class=" language-php">false</code> 或 <code class=" language-php">null</code>：<pre class=" language-php"><code class=" language-php">Broadcast::channel('chat.*', function ($user, $roomId) { if ($user->canJoinRoom($roomId)) { return ['id' => $user->id, 'name' => $user->name]; } });</code></pre><a name="joining-presence-channels"></a><h3>加入 Presence 頻道</h3>你可以用 Echo 的 <code class=" language-php">join</code> 方法來加入 presence 頻道。<code class=" language-php">join</code> 方法會返回一個實現了 <code class=" language-php">PresenceChannel</code> 的對象，它通過暴露 <code class=" language-php">listen</code> 方法，允許你訂閱 <code class=" language-php">here</code>、<code class=" language-php">joining</code> 和 <code class=" language-php">leaving</code> 事件。<pre class=" language-php"><code class=" language-php">Echo.join(`chat.${roomId}`) .here((users) => { // }) .joining((user) => { console.log(user.name); }) .leaving((user) => { console.log(user.name); });</code></pre><code class=" language-php">here</code> 回調函數會在你成功加入頻道后被立即執行，它接收一個包含用戶信息的數組，用來告知當前訂閱在該頻道上的其他用戶。<code class=" language-php">joining</code> 方法會在其他新用戶加入到頻道時被執行，<code class=" language-php">leaving</code> 會在其他用戶退出頻道時被執行。<a name="broadcasting-to-presence-channels"></a><h3>廣播到 Presence 頻道</h3>Presence 頻道可以像公開和私有頻道一樣接收事件。使用一個聊天室的例子，我們要把 <code class=" language-php">NewMessage</code> 事件廣播到聊天室的 presence 頻道。要實現它，我們將從事件的 <code class=" language-php">broadcastOn</code> 方法中返回一個 <code class=" language-php">PresenceChannel</code> 實例：<pre class=" language-php"><code class=" language-php">/** * 指定事件在哪些頻道上進行廣播 * * @return Channel|array */ public function broadcastOn() { return new PresenceChannel('room.'.$this->message->room_id); }</code></pre>和公開或私有事件一樣，presence 頻道事件也能使用 <code class=" language-php">broadcast</code> 函數來廣播。同樣的，你還能用 <code class=" language-php">toOthers</code> 方法將當前用戶從廣播接收者中排除：<pre class=" language-php"><code class=" language-php">broadcast(new NewMessage($message)); broadcast(new NewMessage($message))->toOthers();</code></pre>你可以通過 Echo 的 <code class=" language-php">listen</code> 方法來監聽 join 事件：<pre class=" language-php"><code class=" language-php">Echo.join(`chat.${roomId}`) .here(...) .joining(...) .leaving(...) .listen('NewMessage', (e) => { // });</code></pre><a name="client-events"></a><h2><a href="#client-events">客戶端事件</a></h2>有時候你可能希望廣播一個事件給其他已經連接的客戶端，但并不需要通知你的 Laravel 程序。試想一下當你想提醒用戶，另外一個用戶正在輸入中的時候，顯而易見客服端事件對于「輸入中」之類的通知就顯得非常有用了。你可以使用 Echo 的 <code class=" language-php">whisper</code> 方法來廣播客戶端事件：<pre class=" language-php"><code class=" language-php">Echo.channel('chat') .whisper('typing', { name: this.user.name });</code></pre>你可以使用 <code class=" language-php">listenForWhisper</code> 方法來監聽客戶端事件：<pre class=" language-php"><code class=" language-php">Echo.channel('chat') .listenForWhisper('typing', (e) => { console.log(e.name); });</code></pre><a name="notifications"></a><h2><a href="#notifications">消息通知</a></h2>將 <a href="/docs/5.4/notifications">消息通知</a> 和事件廣播一同使用，你的 JavaScript 應用程序可以在不刷新頁面的情況下接收新的消息通知。首先，請先閱讀關于如何使用 <a href="/docs/5.4/notifications#broadcast-notifications">廣播消息通知頻道</a> 的文檔。一旦你將一個消息通知配置為使用廣播頻道，你需要使用 Echo 的 <code class=" language-php">notification</code> 方法來監聽廣播事件。謹記，頻道名稱應該和接收消息通知的實體類名相匹配：<pre class=" language-php"><code class=" language-php">Echo.private(`App.User.${userId}`) .notification((notification) => { console.log(notification.type); });</code></pre>在本例中，所有通過 <code class=" language-php">broadcast</code> 頻道發送到 <code class=" language-php">App\User</code> 實例的消息通知都會被該回調接收到。一個針對 <code class=" language-php">App.User.{id}</code> 頻道的授權回調函數已經被包含在 Laravel 的 <code class=" language-php">BroadcastServiceProvider</code> 中了。</article>