傳送實時訊息
接下來我們來實現當某個使用者的賬號在其他地方登入時,傳送一個實時訊息給當前的登入使用者,告訴他的賬號在其他裝置登入了。
後端元件: laravel-websockets
,pusher
我們開始吧!
先來完成後端的功能,開啟 .env
檔案
PUSHER_APP_ID=123123
PUSHER_APP_KEY=321321
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=mt1
這些是 pusher
的配置,隨意填寫,只需要保證和前端的 laravel-echo
一致即可。如果一臺伺服器上有多個站點,需要保證 id 和 key 的唯一性。
安裝元件
laravel-websocets
依賴 guzzlehttp/psr7
元件的 1.5 版本,但是它的最新版本已經到 2.1
,而 guzzlehttp
也依賴它,並且要求最低是 1.8
兩者相沖突了,所以不能直接使用 composer require
命令安裝。
同樣,pusher
也需要使用 3.0
版本。
開啟 composer.json
"require": {
...
"guzzlehttp/psr7": "^1.5",
"beyondcode/laravel-websockets": "^1.12.0",
"pusher/pusher-php-server": "~3.0"
},
我們直接把這兩個元件貼上進去,然後執行命令:
composer update
釋出 laravel-websockets
php artisan vendor:publish
在列表裡選擇 BeyondCode\LaravelWebSockets\WebSocketsServiceProvider
對應的序號。
Laravel
框架的訊息推送功能預設使用的是 pusher
第三方 API 服務,我們使用 laravel-websocket
來攔截 pusher
發出的請求,轉發到我們自己的伺服器。
配置 websocket
關於 websockets
的配置,可以在 config/websockets.php
裡找到
官方文件:點選這裡
你只需要知道它在哪裡即可,我們沒有需要定製的配置。
然後開啟 config/broadcasting.php
,修改 pusher
傳送的請求地址為我們本地 ip 地址。
'connections' => [
'pusher' => [
...
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http'
],
],
好了,元件安裝完成,執行命令啟動 websocket
服務
php artisan websockets:serve
開啟 your-project/laravel-websockets
可以看到控制檯,點選 Connect
可以看到所有的傳送訊息明細。
推送訊息
我們來建立一個事件,在每次使用者登入成功後觸發,執行命令:
php artisan make:event UserAuthenticatedEvent
還記得上一節提到的 authenticated
方法嗎?我們在這個方法裡面來觸發事件:
public function authenticated(Request $request, $user)
{
DB::table('sessions')->where('user_id', $user->id)
->update([
'id' => DB::raw("concat('OUTMAN_', user_id, '_', id)"),
'user_id' => null
]);
// 觸發廣播事件,傳送一個訊息給這個登入使用者
broadcast(new UserAuthenticatedEvent($user));
}
既然是廣播事件,那就需要實現廣播的介面,開啟 UserAuthenticatedEvent.php
<?php
namespace App\Events;
use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class UserAuthenticatedEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $user;
public function __construct(User $user)
{
$this->user = $user;
}
public function broadcastOn()
{
// 傳送頻道拼接 user_id,避免干擾
return new Channel('outman-user-'. $this->user->id);
}
}
再回到首頁登入一次,然後檢視 storage/logs/laravel.log
[2021-12-13 13:34:43] local.INFO: Broadcasting [App\Events\UserAuthenticatedEvent] on channels [outman-user-1] with payload:
{
"user": {
"id": 1,
"name": "ricky",
"email": "ricky@me.com",
"email_verified_at": null,
"created_at": "2021-12-12T14:03:00.000000Z",
"updated_at": "2021-12-12T14:03:00.000000Z"
},
"socket": null
}
訊息已經發出了,因為我們現在的 BROADCAST_DRIVER
還是 log,所以列印到了日誌中。
下一節我們來完成前端實時顯示通知。
本作品採用《CC 協議》,轉載必須註明作者和本文連結