# Laravel Echo Server 推播機制
###### tags: `PHP`

在 Laravel 中想達到 websocket 效果，由後端主動傳訊給前端，比較簡單的方法是使用 broadcasting 將 event 廣播出去，由前端來接收訊息。

流程如下:

1. 使用 Laravel broadcasting 廣播 Event 到 Queue(Redis)。
2. Laravel Queue Listener 讀取 Event，並使用 Redis 的 Sub/Pub 機制把 Event 發送給 laravel-echo-server。
3. laravel-echo-server 接收到 Event，並透過socket.io 將 Event 發送给 laravel-echo。
4. laravel-echo 解析接收到的 Event。

</br>

做法如下:

## 安裝與設定 Redis

安裝 Predis

$ composer require predis/predis

.env 設定

QUEUE_CONNECTION=redis
BROADCAST_DRIVER=redis

安裝 Redis

[Windows]<br>https://github.com/microsoftarchive/redis/releases
點選.msi檔案下載安裝

[Linux]

# sudo apt update
# sudo apt install redis-server
# redis-server  // 啟動
# redis-cli  // 查看 Redis 是否啟動

<br>

## Laravel Echo
安裝

$ npm install --save socket.io-client
$ npm install --save laravel-echo

resources/js/bootstrap 加入以下 socket.io

import Echo from 'laravel-echo';
window.io = require('socket.io-client');
window.Echo = new Echo({
　　broadcaster: 'socket.io',
　　host: window.location.hostname + ':6001'
});

build code

$ npm run dev

- 會將 resources/js build 到 public/js
- 由於 app.js 中有引用 bootstraps.js，所以在頁面中引用 app.js 就能使用 Echo

<br>

## Laravel Echo Server
安裝

$ npm install -g laravel-echo-server

初始化 laravel-echo-server (問題皆用預設)，會在根目錄產生一個 laravel-echo-server.json 設定檔

$ laravel-echo-server init

更改設定
* 若要使用 https 需要提供 SSL .cert .key 路徑

啟動

$ laravel-echo-server start


<br>

## 註冊 BroadcastServiceProvider
註冊 Provider，在 config/app.php 設定檔找到 providers 陣列並取消註解。

<br>

## 新增 Event 來推播
新增

$ php artisan make:event sendMessage

<br>

將 code 修改如下:

- implements ShouldBroadcast 當事件被觸發會推播出去
- broadcastOn() 設定要廣播到哪個頻道，包括 Channel (公共頻道)/ PrivateChannel (私人頻道)
- broadcastAs() 自訂廣播名稱

<br>

將 event 推播出去

event(new sendMessage('Hello world'));

<br>

查看排程(需先下 php artisan queue:work 啟動排程機制)

<br>

查看 echo-server(需先下laravel-echo-server start 啟動 echo server)


至此已經成功將事件推播到 echo server 上，接下來只要設定前端監聽 laravel echo 就能實現 websocket

<br>

## 監聽 Laravel Echo
javascript 監聽 message 頻道的 sendMessage 事件 (前面.需要加)

<script src="js/app.js"></script>
window.Echo.channel('message').listen('.SendMessage', (e) => {
    console.log(e.msg);
});

<br>

## 問題
- 若發現 Channel name 多出 prefix，可在 config/database.php 設定拿掉

<br>

- 若發現前端一直無法收到訊息，可以到 package.json 將 socket.io-client 降為安裝 2.3.0版本

修改完後下

npm install

<br>

- 若發現前端無法跟 echo-server 連上線有可能是 6001 Port 被防火牆擋住了。

<br>

- npm 安裝套件出現 Error: error:0308010C:digital envelope routines::unsupported
https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

<br>

- composer 出現 sockets 問題
php.ini 啟用 extension

<br>

## 參考
- https://github.com/tlaverdure/laravel-echo-server
- https://vocus.cc/article/6294a796fd897800014ab9ad