MENU
  1. ホーム
  2. Laravel
  3. Laravelでリアルタイム通信（WebSocket）

Laravelでリアルタイム通信（WebSocket）

Laravel
目次

WebSocketとは

WebSocketは、「サーバーとブラウザを常時つなぎっぱなしにして、お互いに好きなタイミングでデータを送り合える技術」といえます

つまり「双方向通信を行うためのプロトコル」です

従来のHTTP通信は一方通行（「クライアントがリクエスト」→「サーバーが返事」）でした。

WebSocket通信（双方向）一度接続したら回線を開きっぱなしにする技術です

Laravel Vueでの実装

┌─────────────────────────────────────────────────────────────┐
│ ユーザーのブラウザ (https://app.bizlabo.site)
│ Vue 3 フロントエンド
└──────┬────────────────────────────────────┬─────────────────┘
       │                                    │
       │ (1) HTTP API Request               │ (2) WebSocket接続
       │ POST /api/documents/{roomId}       │ wss://api.bizlabo.site:443/app
       │                                    │
       ▼                                    ▼
┌─────────────────────────────────────────────────────────────┐
│ Nginx (api.bizlabo.site:443)                                │
│ ├─ /api/* → PHP-FPM (Laravel)                               │
│ └─ /app/* → Reverb (localhost:6000) リバースプロキシ        │
└──────┬──────────────────────────────┬─────────────────────────┘
       │                              │
       │ (3) PHP処理                  │ (4) WebSocket通信
       │                              │
       ▼                              ▼
┌──────────────────────┐      ┌─────────────────────────────┐
│ Laravel (PHP-FPM)    │      │ Reverb WebSocketサーバー    │
│ ・API処理            │      │ (Supervisor管理)            │
│ ・DB保存             │◄─────┤ ・リアルタイム配信          │
│ ・Broadcastイベント  │ (5)  │ ・ポート6000で待受          │
│                      │ HTTP │                             │
│ BROADCAST_HOST=      │      │ REVERB_SERVER_HOST=0.0.0.0  │
│   127.0.0.1:6000     │      │ REVERB_SERVER_PORT=6000     │
└──────┬───────────────┘      └─────────────────────────────┘
       │
       │ (6) DB問い合わせ
       │
       ▼
┌──────────────────────┐
│ MySQL (127.0.0.1)    │
│ shared_documents     │
│ テーブル             │
└──────────────────────┘

【通信フロー】
(1) ユーザーA: 保存ボタン押下 → Laravel API
(2) ユーザーB: WebSocket接続を維持 (待機状態)
(3) Laravel: DBに保存
(4) Laravel: broadcast() → Reverb (http://127.0.0.1:6000)
(5) Reverb: 接続中の全クライアントに配信
(6) ユーザーB: リアルタイムで更新を受信

【ポイント】
・クライアント → Reverb: wss://api.bizlabo.site:443/app (HTTPS, Nginxプロキシ経由)
・Laravel → Reverb: http://127.0.0.1:6000 (HTTP, サーバー内部通信)
・Reverb実体: 0.0.0.0:6000 (全インターフェースで待受)

Laravel Echoとは

Laravel Echoはフロントエンド用のJavaScriptライブラリです。

メソッド名機能
listen(event, callback)特定のイベント名でブロードキャストされたイベントを受信し、処理します。最も一般的な利用方法です。
channel(name)パブリック（誰でもアクセス可能）なブロードキャストチャンネルに接続します。
private(name)認証されたユーザーのみアクセス可能なプライベートチャンネルに接続します。
join(name)認証されたユーザーのみアクセス可能なプレゼンスチャンネルに接続します。接続しているユーザーリストの取得や、ユーザーの入退室イベントも扱えます。
whisper(name, data)サーバーを介さず、接続しているチャンネルメンバー間でクライアント間の通信を行います。

リバースプロキシとは

クライアントとサーバーの間に入って、リクエストを適切なサーバーに振り分ける仕組みです。

今回の構成

ブラウザ
  ↓
  https://api.bizlabo.site/api/documents  ← 1つのドメイン
  ↓
Nginx (リバースプロキシ)
  ├─ /api/* → Laravel (PHP-FPM)
  └─ /app/* → Reverb (WebSocketサーバー)

https://github.com/idw-coder/laravel-rds#websocketlaravel-reverb%E5%B0%8E%E5%85%A5

参考記事

https://zenn.dev/sdb_blog/articles/laravel-reverb

Laravel

関連記事

目次