如何使用laravel-echo-server 搭建一個事件廣播平台

這篇文章給大家介紹的文章內容是關於使用laravel-echo-server 搭建事件廣播平台，有很好的參考價值，希望可以協助到有需要的朋友。

此文記錄一下之前項目中遇到的laravel後台廣播訊息到vue前台的實現過程。Laravel 並未內建一個 Socket.IO 伺服器實現，不過，這裡有一個第三方實現的 Socket.IO 驅動：laravel-echo-server，相當於一個中介軟體；技術要點：laravel + laravel-echo-server + vue/laravel-echo

整體架構

1. laravel-echo-server

詳細介紹參見：https://github.com/tlaverdure...

1.1 laravel-echo-server伺服器直接搭建在laravel項目中：

① 全域安裝laravel-echo-server： npm install laravel-echo-server -g;
② 控制台進入laravel項目，運行命令：laravel-echo-server init

在laravel項目中會多出一個laravel-echo-server.json檔案，裡麵包含了所有的配置資訊；
③ 通過運行laravel-echo-server start 命令列啟動服務

1.2 laravel-echo-server伺服器獨立部署

我們發現，其實只要有一個laravel-echo-server.json檔案就能啟動服務，那麼顯然可以將服務獨立出laravel項目進行部署（覺得沒必要可以不用這麼折騰）。
使用Http的方式推送訊息至laravel-echo-server伺服器，格式如下：

POST http://app.dev:6001/apps/your-appId/events?auth_key=you-key'

用postman測試：

測試成功，laravel-echo-server伺服器搭建成功

2. laravel後台

定義BroadcastHttpPush.php作為介面

<?phpnamespace App\HelpTrait;use GuzzleHttp\Client;trait BroadcastHttpPush{    public function push($data)    {        $baseUrl = env('WEBSOCKET_BASEURL', 'http://localhost:6001/');        $appId = env('WEBSOCKET_APPID', '3ccfbd93b5e2906a');        $key = env('WEBSOCKET_KEY', '6509c546c053d59057a61e46ae9a7898');        $httpUrl = $baseUrl . 'apps/' . $appId . '/events?auth_key=' . $key;              $client = new Client([            'base_uri' => $httpUrl,            'timeout' => 2.0,        ]);        $response = $client->post($httpUrl, [            'json' => $data        ]);        $code = $response->getStatusCode();    }}

使用：

<?phpnamespace App\Controllers;use App\HelpTrait\BroadcastHttpPush;class SendMessage{    use BroadcastHttpPush;        public function index()    {        $broadcastChannel = array(            "channel" => "private-Message",   // 通道名，`private-`表示私人            "name" => "sayHello",    // 事件名            "data" => array(                "status" => 200,                 "message" => "hello world!"            )        );        $this->push($broadcastChannel);    }}

3. vue前端

定義UserActionNotification.vue

<template>  <p>      </p></template><script>import Echo from 'laravel-echo'import io from 'socket.io-client'export default {  mounted() {    window.io = io    window.Echo = new Echo({      broadcaster: 'socket.io',      host: 'http://localhost:6001',    })    window.Echo.private('Message').listen('.sayHello', (res) => {       if (res.status === 200) {         console.log(res.message)       } else {         console.log('something wrong!')       }    })  }}</script><style lang="sass" scoped>

註：事件sayHello前面要加., 不然需要帶上事件的網域名稱空間；