#Laravel イベントをブロードキャストする
- Laravel 8.9.0
- Docker 19.03.12
イベントの作成
まずはプロジェクトを用意する。
laravel new chat-server && cd $_
BroadcastServiceProvider をコメントインして有効にする。
code config/app.php
// ...
App\Providers\BroadcastServiceProvider::class,
// ..
適当なイベントを作る。
php artisan make:event MessageReceived
class MessageReceived implements ShouldBroadcast
{
// ...
public function broadcastOn()
{
return new Channel('test');
}
public function broadcastWith()
{
return [
'message' => 'hello broadcast',
];
}
}
動作確認
メッセージを発行してみる。
php artisan tinker
broadcast(new App\Events\MessageReceived());
デフォルトの BROADCAST_DRIVER=log なら storage/logs/laravel.log に書き込まれる。
Redis
Pub/Sub サーバーとして Redis をセットアップする。
code docker-compose.yml
version: "3"
services:
redis:
container_name: chat_redis_1
image: redis:latest
ports:
- 6379:6379
docker-compose up -d
Redis クライアントを導入する。
composer require predis/predis
デフォルトは phpredis なので predis/predis を使うように切り替える。
code .env
REDIS_CLIENT=predis
Redis を使ってブロードキャストするように設定する。
code .env
BROADCAST_DRIVER=redis
Laravel Echo Server
WebSocket サーバーとして Laravel Echo Server を導入する。
npm install laravel-echo-server
npx laravel-echo-server init
# ? Do you want to run this server in development mode? Yes
# ? Which port would you like to serve from? 6001
# ? Which database would you like to use to store presence channel members? redis
# ? Enter the host of your Laravel authentication server. http://localhost:8000
# ? Will you be serving on http or https? http
# ? Do you want to generate a client ID/Key for HTTP API? No
# ? Do you want to setup cross domain access to the API? No
# ? What do you want this config to be saved as? laravel-echo-server.json
development mode を有効にしておくとクライアントの接続やサーバーからのメッセージをコンソールに出力してくれる。
config/database.php の redis.options.prefix に合わせて、databaseConfig.redis に keyPrefix を設定する。
code laravel-echo-server.json
"keyPrefix": "laravel_database_"
code ~/chat/ws-server/package.json
"scripts": {
"echo": "laravel-echo-server start",
# ...
}
Laravel Echo
クライアントもEchoで用意する。
npm i laravel-echo socket.io-client
code resources/js/bootstrap.js
import Echo from "laravel-echo";
window.io = require("socket.io-client");
window.Echo = new Echo({
broadcaster: "socket.io",
host: window.location.hostname + ":6001"
});
適当なリスナーを作る。
code resources/js/app.js
// ...
window.Echo.channel("test").listen("MessageReceived", e => {
console.info("Message received");
});
CSRFトークンのメタデータとJSアセットを読み込む。
code resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="antialiased">
</body>
</html>
動作確認
Laravel Echo Server と Laravel 本体を起動する。
npm run echo &
npm run dev
php artisan serve &
購読ページを開いて、コンソールを確認できる状態にする。
Tinker からイベントを発行する。
php artisan tinker
broadcast(new App\Events\MessageReceived());
初回がうまく送られないことがあるので、届かなかったら二度三度送ってみよう。
{ message: "``hello broadcast``" } を受け取れたら成功。