使用 Laravel-echo-server 構建實時應用

文章轉發自專業的Laravel開發者社區，原始連接：learnku.com/laravel/t/1…

在我看來，實時通訊纔是 APP 應用的未來。 Socket 服務一般不是那麼容易實現，可是 Laravel Echo 服務改變了這個狀況。

在本文中，我將會簡要的介紹如何創建一個能夠運行的 Socket 服務而且在這個服務上進行事件的廣播。(github.com/tlaverdure/…, Laravel 的支持文檔: laravel.com/docs/5.6/br…)

它是徹底免費的，你只要運行你本身的 Socket 服務。你也可使用 Laravel 默認集成的 Pusher ，惟一的缺點是它是有限制的，若是超出限制則須要付費。我更喜歡本身來架構這些東西。

要求：

• Laravel 框架 （本教程使用了 5.6 版本）
• Redis 服務
• 基本的 Laravel 知識

安裝 laravel-echo-server

首先咱們須要全局安裝 laravel-echo-server ,你只需在終端輸入下面的命令。

$ npm install -g laravel-echo-server
複製代碼

安裝完成後，打開你的 Laravel 應用，或者新啓一個測試項目：

$ composer create-project --prefer-dist laravel/laravel echo-test
複製代碼

接下來爲咱們的應用安裝 Predis ：

$ composer require predis/predis
複製代碼

安裝完成後，切換到項目根目錄下，初始化 Socket 服務：

$ laravel-echo-server init
複製代碼

執行這條命令後，會詢問你一些關於 Socket 服務的配置信息，你能夠根據本身的狀況填寫：

切記在生產環境中，不管你何時使用它，都應該關掉你的開發者模式。

咱們能夠嘗試啓動服務，看看它是否正常運行：

$ laravel-echo-server start
複製代碼

輸出結果看起來像這樣：

配置 Laravel 使 Laravel Echo Server 正常工做

打開你的  config/app.php 文件而且取消 BroadcastServiceProvider 在這個 Providers 數組中的註釋：

App\Providers\BroadcastServiceProvider::class,

這個 Provider 將會啓動廣播路由（你或許已經在 routes/channels.php 文件裏面已經看到了）

打開 .env  文件，修改  BROADCAST_DRIVER 的值爲你在 laravel-echo-server 初始化時定義的值（Redis 或者 Log）。在本教程中咱們將使用 Redis 驅動程序。 同時修改  QUEUE_DRIVER 爲你喜歡的任何隊列驅動程序，在這個示例中你能夠輕鬆的將其更改成 Redis 驅動程序，由於你在前面已經安裝而且在運行了。

接下來咱們必須安裝 Socket.io 客戶端和 Laravel-Echo 包，你能夠經過如下操做來安裝：

$ npm install --save socket.io-client
$ npm install --save laravel-echo
複製代碼

（在運行這個以前你可能須要運行  npm install  來安裝 Laravel 及相關依賴）

接下來打開  resources/assets/js/bootstrap.js  文件， 或者你本身的 引入全部 JS 基礎代碼的 JS 文件。

如今咱們要添加啓動 Echo 基礎服務的代碼：

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('test-event')
    .listen('ExampleEvent', (e) => {
        console.log(e);
    });
複製代碼

咱們經過 JS 代碼告訴程序咱們訂閱了名爲 ’test-event' 的頻道, 並監聽 ‘ExampleEvent’ 事件 （這是事件的類名，你也能夠根據你的須要自定義）。

讓咱們建立這個事件類:

$ php artisan make:event ExampleEvent
複製代碼

這將會在 App/Events 目錄下面建立一個叫作 ExampleEvent.php 的事件類 讓咱們對這個事件類稍做調整使得它可以在咱們的 Socket 服務 中可以正常運行，首先確保你的事件類繼承於 ShouldBroadcast 接口，就像下面這樣；

class ExampleEvent implements ShouldBroadcast

接下來向下滾動找到  broadcastOn  函數，修改它使得咱們可以在正確的頻道上進行廣播：

public function broadcastOn()
{
    return new Channel('test-event');
}
複製代碼

讓咱們在下面新建一個函數，這樣咱們纔能有一些實例數據：

public function broadcastWith()
{
    return [
        'data' => 'key'
    ];
}
複製代碼

這個函數在事件被調用時調用，它將會把數據返回到你的 Socket 服務中。

如今讓咱們開始嘗試它吧！打開你的 routes/web.php 文件而且新增一個測試路由：

Route::get('test-broadcast', function(){
    broadcast(new \App\Events\ExampleEvent);
});
複製代碼

（有不少種方式來廣播 ExampleEvent  類 ，在這個示例中我使用 Laravel 提供的 broadcast() 助手，在我看來這是最簡潔的方式）

啓動隊列監聽：

$ php artisan queue:listen --tries=1
複製代碼

瀏覽器打開一個包含 JS 文件的頁面（能夠是 Laravel 默認的歡迎頁面），這是第一個頁面，請不要關閉次頁面，咱們已經在此頁面上訂閱了 Socket 服務。

接下來打開另外一個頁面訪問  /test-broadcast ，這將會返回一個空白頁面，可是它將會經過你的 ExampleEvent  類廣播到你的 Socket 服務上。返回到咱們的第一個頁面，打開瀏覽器控制檯，應該能夠看到相似信息：

正如你所看到的，數據經過這種形式展現在咱們的客戶端。你能輸入任意數據經過你的  ExampleEvent 類來廣播他們，這些數據能夠是新聞更新，頁面更新，總瀏覽量或者更多。

由於咱們有在 laravel-echo-server 配置中有設置開發者模式，因此你能看到 Socket 服務上的全部基本信息：

如今你已經安裝並運行了一個基本的 Socket 服務！但這並非所有，你能夠根據這個來作更多的事情，好比爲單個用戶提供認證的私有渠道。（當您想廣播訂單更新或私人消息時）

要作到這一點，我建議你去查看 Laravel 文檔瞭解更多相關的內容。經過這個主題你能作不少事情，讓你的應用程序變得更加神奇。你能夠在這裏找到相應的文檔：

Broadcasting - Laravel - The PHP framework for web artisans.laravel.com

其餘： 在生產環境中運行

正如我以前所說，你必須在 laravel-echo-server.json 配置文件中禁用開發者模式。 固然在服務器上你能夠忽略這個文件，從新初始化它，由於你的主機可能和本地不一樣。

你還須要保持你的 Socket 服務在你的生產環境中運行，你能夠用 Supervisor ，可是我一般使用 *PM2 * ，它能夠方便快速的管理你的服務。 (http://pm2.keymetrics.io/)

這裏是我使用 PM2 的 Socket.sh 基本配置：

#!/usr/bin/env bash 
laravel-echo-server  start
複製代碼

安裝了 PM2 後， 你能夠經過 pm2 start socket.sh 命令來啓動腳本，運行你的 Socket 服務。

我但願它可以幫助到你。 這篇文章主要介紹的是一些基礎知識，接下來咱們會繼續討論廣播路由的受權和不一樣的廣播頻道。

感謝你的閱讀！