Laravel Reverbって何?WebSocketでリアルタイム?Chat?

Laravel ReverbはWebSocketを利用してLaravelサーバとブラウザ間でリアルタイムにデータの送受信を行うことができるWebSocketサーバです。Pusherなどの商用のサービスを使わずにLaravelと一緒に利用することができます。
実際にローカルで動作確認を行う前にLaravel Reverbを利用するとどのような流れでリアルタイムにデータの送受信を行うのか簡単に説明しておきます。
- Laravelのアプリケーションでイベントを実行
- 実行されたイベントをLaravel Reverbのサーバが受信
- Laravel Reverbサーバからブラウザに受け取ったデータを送信
- ブラウザはLaravel Reverbサーバから受け取ったデータをJavaScriptを利用してブラウザのリロードを行うことなくブラウザ上に反映
Laravel ReverbはLaravelのBroadcasting, Event, Queue, Laravel Echoの機能と一緒に利用するのでこれらの知識も必要になりますが本文書に沿って設定を行うことで上記の説明もすっきり理解できるようになります。
少し古い記事ですが公開済みの記事でPusher(商用サービス)を利用したWebSocketによるリアルタイムのデータを送受信をLaravel+Vue.jsで設定しています。基本的な動作についてはLaravel Reverbでも違いありません。
macOS上でLaravel11を利用して動作確認を行っています。
目次
プロジェクトの作成
OS上の任意のディレクトリでcomposerコマンドを利用してLaravelのプロジェクトを作成します。
インストールしたLaravelのバージョンを確認しておきます。
Reverbのインストール
プロジェクトの作成が完了したらLaravel Reverbのインストールを行います。Laravel 11ではLaravel Reverbを利用する際に必須となるBroadcastingの機能はデフォルトではインストールされていないのでインストールを行います。Broadcastingのインストールと一緒にLaravel Reverbをインストールするか、ブラウザ側で利用するJavaScriptのパッケージのインストールするかの確認が行われるのでどちらも”Yes”を選択します。
JavaScriptの確認
インストールしたJavaScriptにはどのようなものがあるか確認するためにpackage.jsonファイルの確認を行っておきます。
デフォルトから指定されているパッケージに加えてlaravel-echoとpusher-jsが追加されています。pusher-jsとありますがPusherで利用するパッケージをReverbでも利用しています。
それらのパッケージがどのようにあ利用されているかも確認しておきます。resource/js/bootstrap.jsファイルを見るとecho.jsファイルのimportが追加されています。
echo.jsファイルの中身を確認するとインストールしたlaravel-echoとpusher-jsがimportされています。2つのパッケージが利用させていることがわかりました。
Reverbに関する設定の確認
Broadcastingをインストールすることでconfigディレクトリにbroadcastiong.phpファイル, routesディレクトリにchannels.phpファイルが作成されます。
Reverbをインストールすることでconfigディレクトリにreverb.phpファイルが作成されます。
.envファイルの中にはReverbに関する環境変数が設定されています。値はすべて自動で設定が行われています。本文書ではこの環境変数の値の変更は行いません。
.envに設定されている環境変数はreverb.phpとbroadcating.phpファイルで利用されています。
Eventの作成
Eventを実行してBroadcastingすることでLaravel ReverbにChannelを通してデータを送信するのでまずEventを作成します。名前はTestEventとしています。
実行するとappディレクトリにEventsディレクトリが作成され、その下にTestEvent.phpファイルが作成されます。
デフォルトでは未使用のShouldBroadcastをimplementsで継承する必要があります。デフォルトではPrivateChannelを設定していますが動作確認なので認証なしで受け取れるChannelに変更します。Channelの名前もtest-channelに変更しておきます。データを受信するブラウザ側ではこのChannelを利用してデータの受信を行います。
Broadcastingの動作確認
Broadcatingの設定ではconfig/broadcasting.phpファイルのdriverでどのサービス(Laravel Reverb, Pusherなど)を利用するか指定することができます。動作確認用にlogというdriverも準備されているので.envファイルのBROADCAST_CONNECTIONの値をreverbからlogに変更することでlog driverを利用することができます。logに設定するとBroadcastingされたイベントの内容をログファイルで確認することができます。logでの動作確認後にBROADCAST_CONNECTIONの値をreverbに戻します。
作成したTestEventをweb.phpファイルで実行できるように設定します。”/”にアクセスがあると必ず実行されます。通常は何かの処理が完了した後にイベントを実行します。
開発サーバを起動してブラウザからlocalhost:8000にアクセスを行います。アクセスが完了したらstorage/logs/laravel.logファイルを確認します。
ブラウザ上にはWelcomeページが表示されていますがログファイルには何も記述されません。

本文書ではTablePlusというデータベース管理ソフトウェアを利用してSQLiteデータベースにアクセスを行いjobsテーブルを確認します。payloadの列にApp\\Events\\TesxtEventの名前を確認することができます。jobsテーブルには先ほど実行したイベントが登録されています。

直接SQLiteデータベースにアクセスを行いテーブルの情報を確認したい場合はこちらの記事が参考になります。
Queue Workerの起動
jobsテーブルに登録されたイベントを実行するためにphp artisan queue:workを実行します。コマンドを実行した瞬間にテーブルに登録されていたい処理が実行されます。
再度laravel.logファイルを確認すると実行したEventの情報が表示されていることが確認できます。ファイルが作成されていない場合はここで作成されます。
jobsテーブルでは処理が完了するとEvent情報がなくなり空になります。
ここまでの動作確認でEventを利用してBroadcastingが正常に動作していることを確認できました。
logを利用した動作確認が完了したのでBROADCAST_CONNECTIONの値をlogからreverbに戻します。
.envファイルを更新後はphp artisan serveコマンドを再起動しておきます。
Reverbサーバの起動
Reverbサーバの起動を行うために”php artisan reverb:start”コマンドを実行します。
先ほどの動作確認と同様にブラウザからアクセスを行います。php artisan queue:workを実行しているのでEventの処理のメッセージは表示されます。

しかし、Reverbを起動したターミナルにも何もメッセージは表示されないため何が行っているのかわかりません。
ブラウザ側でのデータの受信
実際にReverbサーバが動作しているのか確認するためにブラウザ側でReverbサーバから送信されたデータが受信できるのか確認するために設定を行っていきます。
ブラウザ側での受信設定はJavaScriptで行うためresource/js/bootstrap.jsファイルに以下の設定を追加します。Echo.channelの引数にはTestEventのChannelの引数で設定したChannel名とlistenメソッドの引数にはEventの名前を指定します。
welcome.blade.phpファイルでJavaScriptファイルを読み込めるように以下のコードをheadタグの閉じタグの前に設定します。
更新したbootstrap.jsファイルの内容を反映させるためにViteの開発サーバを起動します。
ブラウザからアクセスを行うとデベロッパーのコンソールに”received a message”が表示されます。

ブラウザ上でLaravel Reverbを経由してデータが受信できることが確認できました。
Reverbサーバを起動したターミナルには特に何も表示されないのでdebugを有効するために一度Reverbサーバを停止して–debugオプションをつけて起動を行います。ブラウザからアクセスするとメッセージが表示されるようになりました。
メッセージの受信
ブラウザ側でTestEvent.phpファイルに設定したメッセージを受信する方法を確認します。TestEvent.phpファイルで$messageを定義して”Hello, world!”を設定します。
bootstrap.jsで受信したmessageをconsole.logで表示させるように設定します。
ブラウザ側では受信したメッセージがコンソールに表示されます。

ブラウザ上でのメッセージの表示
受信したメッセージをブラウザ上に表示できるようにwelcome.blade.phpファイルを更新します。idにmessageを持つdiv要素を追加します。
bootstrap.jsファイルではdocument.getElementById(“message”)でdiv要素にアクセスしてtextContextプロパティに受信したデータを設定します。
設定後にブラウザからアクセスするとページを開いてから暫くして”Hello, world!”がブラウザ上に表示されます。

ここまでの設定でLaravelアプリケーションで実行されたEventによって送信されたデータをLaravel Reverbが受け取り、受け取ったデータをブラウザに送信してブラウザ側で受信することができるようになりました。
簡単なChat機能の追加
ここではinput要素に文字列を入力して送信ボタンを押したらアクセスしているブラウザすべてで入力したメッセージをリアルタイムで表示する簡単なChat機能の追加を行います。表示するためにページのリロードは行いません。
welcome.blade.phpファイルに入力フォームとボタンを追加し、メッセージはul, liタグを利用してリスト化していきます。
Reverbから受信したデータをli要素を作成してul要素に追加しています。
bootstap.jsではbuttonにclickイベントを設定してボタンが押されたらinput要素に入力したテキストを取得し、”/”にPOSTリクエストと一緒に送信します。
web.phpに”/”のルーティングを追加します。
2つのブラウザを起動してどちらかのinput要素に文字列を入力するとどちらのブラウザ上にも表示されます。

簡単なChat機能を追加できました。ここまでの設定でLaravel Reverbがどのような機能なのか理解できたのではないでしょうか。