さてさて、Laravelは今や世界中の開発者に利用される人気フレームワークになったわけですが、その結果として映画のスピンオフのようにLaravelを利用した様々なパッケージが公開されいます。
そして、つい数日前にLaravel WebSocketsというパッケージが公開されました。
Laravel WebSocketsは、Laravelに独自のウェブソケットを実装することができるパッケージで、つまりはチャットのようにリアルタイムに情報をやりとりできるようになります。
そして、私は結構新しいもの好きな一面もありますし、この間 Laravel+Vueでリアルタイム・チャットをつくる（ダウンロード可） という記事も公開しているので、この新しいパッケージを実際に試してみることにしました。
ということで、今回はLaravel Websocketsの使い方を紹介します。
ぜひ参考にしてみてくださいね。
※ 実行環境： Laravel 5.7
目次
パッケージをインストールする
Pusherをインストール
ちょっと奇妙に聞こえるかもしれませんが、まずはPusherを使えるようにしておきましょう。
理由は、ウェブサイトにも書かれていますが一番シンプルにLaravel Websocketsを使う方法は、Pusherを置き換える（のっとる）形だからです。
そのため、Laravel+Vueでリアルタイム・チャットをつくる（ダウンロード可）の記事を参考にして、pusher/pusher-php-serverやlaravel-echo、pusher-jsなどのインストールを完了させ、さらにビルドもしておいてください。（つまり、この記事のPusher以外の部分を実行しておいてください）
Laravel Websocketsをインストール
そして、Laravel Websocketsの本体をインストールします。
composer require beyondcode/laravel-websockets
インストールが完了したら、次のコマンドでマイグレーションを実行してください。
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate
マイグレーションが完了するとwebsockets_statistics_entriesというテーブルが作成されることになり、ここにアクセス情報が保存されていきます。
つぎに、設定ファイルもコピーして使えるようにしておきましょう。
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"
これで、config/websockets.phpが作成されましたので、このファイル内に設定を書き込むことになります。
コンフィグを設定する
先ほども書きましたが、Laravel WebsocketsはPusherの設定を利用して接続をしますので、設定するのは、config/broadcasting.php内のpusherの部分です。
初期状態では、書かれていないhost、port、schemeを追加してください。
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true,
'host' => 'l57.test', // ご自身のホスト名
'port' => 6001,
'scheme' => 'http' // or https
],
],
そして、resources/js/bootstrap.js内のLaravel Echoにも同じくwsHost、wsPortを追加します。
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true,
wsHost: window.location.hostname,
wsPort: 6001,
// disableStats: true,
});
なお、もしウェブソケットの接続データが必要ない場合はdisableStatsをtrueに設定してください。（初期状態では有効になっています。）
また、ウェブサイトがHTTPS接続できる場合はencryptedもtrueにする方がいいでしょう。
では、ビルドしてapp.jsを更新します。
npm run dev
※ 注意する点
なお、私の環境では始め実際にPusherで設定したアクセス情報を使っていましたが、この場合、従来通りPusherへアクセスされてしまう場合があるようでした。そのため、.envは次のようにするといいでしょう。
PUSHER_APP_ID=1 PUSHER_APP_KEY=laravelWebsockets PUSHER_APP_SECRET=laravelWebsockets PUSHER_APP_CLUSTER=ap1
ウェブソケットサーバーを起動する
では実際にこの設定で、「Laravel+Vueでリアルタイム・チャットをつくる」で作成したチャットを実行してみます。
まずは次のコマンドでウェブソケット・サーバーを開始します。
php artisan websockets:serve
するとコマンド上に、Starting the WebSocket server on port 6001...という表示がされて、アクセスを待機していることがわかります。
※ ちなみに終了する際はCrtl + cです。
ではチャットページにアクセスして開発者ツールで読み込み内容を確認してみます。
現在はpusher.comではなく指定したホストへアクセスされるようになっています。
では実際にメッセージを入力して・・・・・・
送信します。
思い通りうまくいきました！
これで完了です。
お疲れ様でした。
おまけ
Laravel Websocketsにはデバッグ用のダッシュボードも用意されています。
http(s)://******/laravel-websockets へアクセスすると次のような表示になりますので、「Connect」ボタンをクリックしてください。
すると、次のように様々な情報にアクセスできるようになります。
おわりに
ということで、今回はLaravelパッケージの中からLarave-Websocketsを使ってリアルタイムチャットを実装してみました。
サイトの規模が小さい場合は、Pusherの無料プランで十分対応できると思うので、そちらをおすすめしますが、徐々にサイト規模が大きくなってきた場合に自前でウェブソケットを実装する場合は今回のLaravel-Websocketsも選択肢に入ってくるのではないでしょうか。
もちろん、node.jsの方がパフォーマンスは早そうですが、Laravelだけで完結できるのは大きなアドバンテージになるでしょう。
みなさんの参考になれば嬉しいです。
ではでは〜！
開発のご依頼お待ちしております 😊✨
開発効率を上げるための機材・まとめ
