Laravel開發：如何使用Laravel Echo Server實現WebSockets通訊？-Laravel-PHP中文網

Laravel開發：如何使用Laravel Echo Server實現WebSockets通訊？

王林

發布： 2023-06-14 15:09:19

原創

1878 人瀏覽過

Laravel開發：如何使用Laravel Echo Server實現WebSockets通訊？

在現代Web應用程式中，即時訊息通訊是至關重要的。 WebSockets是一個用於實現雙向通訊的協定。除了HTTP之外，WebSockets允許伺服器在必要時傳送訊息給客戶端。

Laravel Echo Server 是一個基於 Node.js 建立 WebSockets 伺服器，用於實現即時訊息通訊。它允許您使用 Laravel Echo 套件來輕鬆地和客戶端進行 WebSockets 通信，從而更輕鬆地建立即時通訊。

在本篇文章中，我們將討論如何使用 Laravel Echo Server 來實作 WebSockets 通訊。

步驟1 - Laravel 和 Laravel Echo 的安裝

在使用 Laravel Echo Server 之前，我們需要先安裝 Laravel 及其相依性。

我們可以在以下位置找到關於Laravel 的更多資訊：https://laravel.com/docs/8.x/installation

同樣，在本文中，也需要安裝Laravel Echo 包。我們可以使用 Composer來安裝它：

$ composer require laravel/echo

登入後複製

步驟2 - 安裝 Laravel Echo Server

現在，我們需要安裝 Laravel Echo Server。

$ npm install -g laravel-echo-server

登入後複製

步驟3 - 設定檔

一旦安裝了 Laravel Echo Server，我們需要建立一個設定檔。可以使用以下命令來產生預設設定檔：

$ laravel-echo-server init

登入後複製

這將在目前目錄中產生一個 laravel-echo-server.json 檔案。

接下來，我們需要修改此文件的一些配置，以確保它符合我們的應用程式需求。

在laravel-echo-server.json 檔案中，我們需要設定以下屬性：

{
    "authHost": "http://your-app.com",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "127.0.0.1",
            "port": "6379"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

登入後複製

authHost：定義Echo Server要監聽的位址（一般情況下與應用程式的位址相同）。
authEndpoint：定義了 Echo Server 將在此位址上等待用戶端發送 Auth 訊息以進行身份驗證。
database：定義 Echo Server 用於儲存連接和頻道資訊的資料庫的類型。
databaseConfig：具體的資料庫配置，這裡我們使用 Redis。
devMode：如果設定為 true，你將會看到偵錯日誌。
host：定義 Echo Server 監聽的位址。如果未設定，Echo Server 將監聽所有可用的網路介面。
port：定義 Echo Server 監聽的連接埠。
protocol：定義 Echo Server 使用的協定。
socketio：更進階的設定參數，請查閱文件。
sslCertPath：路徑到 SSL 根憑證。
sslKeyPath：路徑到 SSL 金鑰。
sslCertChainPath：用於上傳選用 SSL 根憑證鏈。
sslPassphrase：如果寫入了 SSL 金鑰，則可能需要該值。
subscribers：定義能夠訂閱 Echo Server 的客戶端類型。
apiOriginAllow：允許跨域請求的主機。

一旦我們完成了上述配置並保存laravel-echo-server.json 文件，我們可以使用以下命令啟動Echo Server：

$ laravel-echo-server start

登入後複製

步驟4 - 前端程式碼

現在，需要在我們的前端程式碼中引入Echo 套件。確保在底部添加以下程式碼

<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.9.3/dist/echo.js"></script>

登入後複製

在您的 JavaScript 檔案中新增以下程式碼：

import Echo from 'laravel-echo'

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    }
});

window.Echo.channel('YourChannel')
    .listen('YourEvent', (e) => {
        console.log(e);
    });

登入後複製

這將連接到 Echo 伺服器並使用權限呼叫進行身份驗證。也會建立一個 YourChannel 頻道並監聽 YourEvent 事件。

步驟5 - 應用程式場景

現在，我們已經成功設定了 Laravel Echo Server 和前端程式碼。我們可以將這些工具用於多種應用場景，例如：