Laravel11 Sail+Reverbでのブロードキャスト機能開発環境の構築

Laravel Reverbが登場してbeyondcode/laravel-websocketsが終了。2022年の記事が古くなってたので書き直し。
https://invokable.net/article/sail-horizon-broadcast

あくまで開発環境までの話。本番環境で動かす話は含まない。

1. 環境
2. 新規プロジェクト作成
3. Breezeインストール
4. docker-compose.ymlでReverbも起動
5. .envの変更
6. Sail起動
7. ReverbはWebSocketサーバー
8. 新規ユーザーを作成
9. PresenceChannel
10. PrivateChannel
11. 最後の動作確認
12. 片付け
13. 終わり

_環境

• Laravel 11.x
• PHP 8.3
• Sail 1.x
• Breeze 2.x Inertia(Vue)
• Reverb 1.x

Horizonは開発環境では使いにくいのでなし。

将来のバージョンではこのまま真似しても動かない可能性が高いので注意。

_新規プロジェクト作成

curl -s "https://laravel.build/sail-reverb-project" | bash

cd sail-reverb-project

Laravel11ではブロードキャスト機能はデフォルトでは無効なのでインストールして有効化。ここでReverbも一緒にインストールされる。

php artisan install:broadcasting

_Breezeインストール

PrivateChannelやPresenceChannelも試したいのでスターターキットをインストール。今回はBreezeのVue版。好きなスターターキットを使えばいい。ReactならEchoを使うのでほとんど同じ。Livewireを使うのが最も簡単。

composer require laravel/breeze --dev

php artisan breeze:install vue

_docker-compose.ymlでReverbも起動

    reverb:
        image: sail-8.3/app
        ports:
            - '${REVERB_PORT:-8080}:8080'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
        volumes:
            - '.:/var/www/html'
        command: php artisan reverb:start --debug
        restart: always
        networks:
            - sail
        depends_on:
            - mysql
            - redis

_.envの変更

Sailで起動するなら重要。

REVERB_HOSTはdocker-compose.ymlのサービス名と合わせる。
VITE_REVERB_HOSTはDockerの外から接続する用なのでlocalhost。

REVERB_HOST="reverb"
VITE_REVERB_HOST="localhost"

DB_HOST=mysqlと同様reverbの名前で接続できる。内部ではLaravelのlaravel.testからReverbのreverb:8080にリクエストを送っている。REVERB_HOSTを変更してないとlaravel.testからlocalhost:8080に送ろうとしてエラーになる。

_Sail起動

migrateしてviteのdevサーバー起動。

sail up -d

sail art migrate

sail npm run dev

Sail外でもいい。

npm run dev

_ReverbはWebSocketサーバー

Pusherやbeyondcode/laravel-websockets使ってた部分の代わりがReverb。前回の記事でのこの辺りの作業が全部不要になった。

_新規ユーザーを作成

ここからはブロードキャスト機能の確認。

簡易的なのでチャットっぽいものを作るだけ。DBにログは残さずその場だけのチャット。

• PresenceChannel : ログイン中のユーザー共通のチャット。
• PrivateChannel : 自分だけのチャット。

前回の記事と同じなのでコピーして最新のInertiaで動くように修正しただけ。

_PresenceChannel

長くなったのでコードはGitHubで。

https://github.com/kawax/sail-reverb-project/blob/main/resources/js/Pages/PresenceChannel.vue
https://github.com/kawax/sail-reverb-project/blob/main/app/Http/Controllers/PresenceController.php
https://github.com/kawax/sail-reverb-project/blob/main/app/Events/PresenceSubmit.php

処理の流れ

1. DashboardのPresenceChannel.vueを表示したらEcho.join('presence')でPresenceChannelに参加。
2. フォームからチャットを送信。
3. Laravel側のPresenceController→PresenceSubmitイベントと進んでPresenceSubmitからブロードキャスト。
4. フロント側に戻ってきて.listen('PresenceSubmit',で受信。

VueかReactで変わる表示部分は重要ではないのでこの流れを理解。

_PrivateChannel

PresenceChannelとほとんど同じなのでファイルをコピーしてPrivateChannel用を作成。

_最後の動作確認

2ユーザー作ってPresenceChannelには両方のチャットが表示、PrivateChannelには送信したユーザーだけ表示されることを確認。

_片付け

終了時は

sail down

viteはCtrl+Cで終了。

_終わり

ここまでできれば後はLaravelのドキュメントを見てブロードキャスト機能を使っていける。