Laravelで簡単リアルタイム通信

「PHP勉強会in広島 vol.1」の登壇資料です。
https://hiroshimaphp.connpass.com/event/321216/
初めてWebSocketを試した内容をまとめています。

Transcript

1. Laravelで簡単リアルタイム通信 WebSocketを試してみる PHP勉強会in広島 vol.1
2. Profile • 株式会社GoQSystem • バックエンド歴半年強 • PHP、Laravel • 広島出身、広島在住 Name : Rei
3. Agenda 1. 導入 2. 前提知識 3. ゴール 4. WebSocket・LaravelReverb 5. 手を動かす 6. まとめ
4. なぜWebSocketを試すのか
5. チャット作りたい
6. 昔パクりたかったSNS
7. 今なら作れるんじゃない？
8. いろいろ検討
9. チャット機能 よく分からんし面倒臭い...
10. 楽に実装できないか？
11. Laravel11の新機能で WebSocketを扱えるらしい
12. 重い腰が上がった
13. ❏ Laravelは分かる ❏ フロント分からん ❏ WebSocket分からん 前提知識
14. ❏ WebSocketを知る ❏ 何が必要か分かる ❏ 動かして達成感を得る ゴール
15. WebSocket ❏ LINE,Discord ❏ オンラインゲーム ❏ Notion,スプレッドシート
16. LaravelReverb Reverb Pusher 自前でサーバ構築 セットアップ 簡単 簡単（アカウント要） 別途セットアップ 運用コスト サーバ代 無料→従量課金 サーバ代 イベントとの統合 普段の使い方でOK APIの仕様に従う 独自に実装 セキュリティ Laravelに依存 高い 実装次第 認証・認可 Laravelの認証 システムと自動で連携 PusherとLaravelの 認証を連携 独自に実装 LaravelでWebSocketを扱う場合の選択肢
17. 中継 LaravelReverb
18. 今回はここだけ 試してみる LaravelReverb
19. 実際にやってみた LaravelReverb
20. 準備 Laravelのプロジェクトを作成
21. 準備 ブロードキャスティング （LaravelReverb）をインストール
22. 準備 そのままNodeの 依存関係をインストール
23. 準備 環境設定 変える所なし！
24. 準備 追加ファイル サーバーから送信された イベントをUIに反映する WebSocketチャネルの 認証を制御するルート定義 ReverbのWebSocket サーバーに関する設定 ブロードキャストの 設定全般
25. 実装 Bladeで画面表示作成
26. 実装 メッセージpostで イベント実行
27. 実装 イベント作成
28. 実装 認証不要の チャンネルに変更 ShouldBroadcast を継承
29. 実装 メッセージを受信した時に リストに追加する Echoを使って チャンネル指定
30. 実装 つづき blade(welcome.php)で 用意したボタンを操作
31. 動かしていく Webサーバーを起動
32. 動かしていく Job(作ったEvent)を動かす
33. 動かしていく WebSocketサーバーを起動
34. 動かしていく JSの変更を反映するViteサーバーを起動
35. これで動作するはず
36. 試してみる ブラウザA メッセージを送信 ブラウザB
37. 試してみる メッセージが表示される 別ブラウザにも表示される ブラウザA ブラウザB
38. できた！
39. まとめ
40. ゴールに対して ❏ WebSocketを知る ❏ イメージは掴めた ❏ 何が必要か分かる ❏ Node.jsからは逃げられない ❏ 動かして達成感を得る ❏ 満足
41. ❏ LaravelProject内で完結できる ❏ １時間もかからず動かせる ❏ 外部サービス使わずに済む 感想
42. Thanks!!