rootはじめにはじめまして!PHPチームの高木です。個人的にLaravelでWebsockets通信を実装したい場面があり、Laravelでwebsockets通信を行うにはどうすればよいかを調べていました。APIを使う方法を見つけました。docker環境で実装したいと考えました。Sail上で構築する方法と実際にWebsockets通信が機能するまでをテストする過程を書いていきたいと思います。APIとの互換性をち、パワフルなオープンソースのWebsocketsサーバーを提供する、リアルタイムのデータ同期や通知などの実装が可能なLaravelパッケージ」です。Websocketsを使うメリットは多岐にわたり、リアルタイムでのデータ更新はユーザー体験を大きく向上させ、アプリケーションの反応速度を高めます。Echoとの統合により、フロントエンドでのイベントリスニングが簡単になり、開発プロセスがよりスムーズになります。Websocketsの強力な機能と、それを活用する1つの方法をテストしていきます。Websocketsを使う必要がある?HTTP通信はステートレスな性質を持ち、通常はクライアントやブラウザがURLをリクエストし、サーバーがデータを返す一方通行の流れを取ります。新しい情報をロードするにはページのリフレッシュが必要であり、多くのケースでこれで十分ですが、時にはもっと柔軟な対応が求められます。このHTTP通信の制約を超え、Websockets通信を使い、ユーザーとサーバー間での双方向通信を実現することで、よりダイナミックで応答性の高いウェブ体験を提供できます。本記事について開発環境向けの記事となっています。(ssl通信は実装しないため)下記2つのサイトを参考にしています。構築それでは、さっそく実装パートに進んでいきましょう。sail環境の構築まず、sail環境のインストールを行います。以下のページを参考にすることで、手早くsail環境のインストールが可能です。Websocketsとpusherパッケージのインストールをしていきます。私は下記のリンクを参考にsailのコマンドのエイリアスを作成して以来、./vendor/bin/sailのコマンドが、sailとタイプするだけで実行可能になっています。本ブログでは、sail~~の形でコマンドを記載しています。serverコンテナが正しく動いていることを確認することは、いいプラクティスになることは今回この記事を書いていて勉強になりました。バックエンド設定.env設定まず、.envファイルのBROADCAST_DRIVERの値を変更していきます。BROADCAST_DRIVER=pusher次に、pusherプロックの情報を以下の通り変更していきます。Websocketsパッケージでこの値を使用するためです。次に以下のように、config/broadcasting.phpファイルの設定を行っていきます。WebSocketsパッケージのパブリッシュを行います。このコマンド実行で/database/migrationsフォルダーに新しいマイグレーションファイルが作られ、migrateコマンドでstatistics情報を格納するためのテーブルが作成可能になります。WebSocketsパッケージのコンフィグファイル作成です。このコマンドでコンフィグファイルが作成されます。--tag="config"最後に、カスタマイズ用のDockerfileを作成するためのパブリッシュを行います。このコマンドにより/dockerディレクトリが作成されます。sail:publishDocker関連の設定まず、docker/8.3/supervisord.confの設定です。以下のブロックをファイルの末尾に追加します。websockets:serveコマンドが実行されるようになり、websokcetsサーバが起動するようになります。websockets:servenumprocs=1autostart=trueautorestart=trueuser=sail次に、docker-compose.ymlファイルのlaravel.testのports部分に以下の行を追加します。'${LARAVEL_WEBSOCKETS_PORT:-6001}:6001'supervisord.confに設定した内容を反映させるためにbuildコマンドを実行します。migrateアクセスいよいよブラウザでwebsocketsサーバにアクセスしていきましょう。Dashboardのアドレスでアクセスし、ポート6001が設定されている状態でwebsocketsサーバにコネクトが可能になっているはずです。Websockets機能テスト次は、TinkerというLaravelのコマンドラインツールを使って、実際にWebsocketsが機能するかをテストしていきます。バックエンド設定イベントファイル作成まず、以下のコマンドでイベントを発行するためのファイルを作成します。RealTimeMessage上記コマンド実行後は、app/Events/RealTimeMessage.phpというファイルが作成されていると思いますので、そのファイルを以下のように書き換えます。ここでのポイントは以下です。次に、LaravelのコマンドツールであるTinkerをsail経由で起動し、イベントを発行します。App\Events\RealTimeMessage」という表示が確認できれば設定は成功しているサインです。Echoを使用するため関連パッケージをインストールしていきます。以下のラインをpackage.jsonのdevDependenciesに追加。Echoをフロントエンド側で使用するための設定をresources/js/bootstrap.jsの末尾に追加します。window.location.hostname,});Viewの作成メッセージを表示・確認するためのviewファイルをresources/views/ws.blade.phpとして作成し、以下コードを貼り付けます。Echo.channel('events')の行でパブリックチャネルへのコネクションを張ります。</div></div></body></html>その後、viewを表示するためのrouteを新たにroutes/web.phpの中に作成します。devコマンドでViteを起動し、ブラウザでhttp://localhost/wsにアクセスします。この後にTinkerコマンドを実行する必要があるため、コマンドライン・ブラウザともに別タブをオープンすることをお勧めします。dev再度、LaravelのコマンドツールであるArtisanをsail経由で起動し、イベントを発行します。event'));アクセスhttp://localhost/wsのアドレスでアクセスすると、コンソールログとブラウザボディ上の両方で発行したイベントのメッセージが確認できます。Websocketsをインストール&構築し、Tinkerを使ってイベント発行を行い、発行されたイベントをフロント側でリッスンできるかのテストまでを行ってきましたが、いかがでしたでしょうか。今回がWebsockets通信に触れる機会は、自分自身初めてだったのですが、Tinkerのイベント発行プロセスをコントローラに移動したりすることで幅が広がると思いました。その部分はまた、次のブログ記事の機会があれば書きたいと思います。