【筆記1】使用laravel-echo-server 搭建事件廣播平臺

此文記錄一下以前項目中遇到的laravel後臺廣播消息到vue前臺的實現過程。Laravel 並未內置一個 Socket.IO 服務器實現，不過，這裏有一個第三方實現的 Socket.IO 驅動： laravel-echo-server，至關於一箇中間件；技術要點： laravel + laravel-echo-server + vue/laravel-echo

0. 總體架構

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=your-key'

用postman測試：

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

2. laravel後臺

定義BroadcastHttpPush.php做爲接口

<?php

namespace 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();
    }
}

使用：

<?php

namespace 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>
  <div>
    
  </div>
</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前面要加., 否則須要帶上事件的域名空間；

4. 參考資料

• Laravel 5.5 文檔 進階系列 —— Laravel 中服務端與客戶端事件廣播實現
• tlaverdure/laravel-echo-server
• laravel-echo
• laravel5.5事件廣播系統實例laravel-echo + redis + socket.io