Laravelで作るリアルタイムWebソケットアプリ：Reverb＋Broadcasting実装パターン

Client (Browser)
  ├─ HTTP: 認証/初期表示/操作
  └─ WS : subscribe(channels) -> receive(events)

Laravel App
  ├─ Event: implements ShouldBroadcast
  ├─ Channel Auth: routes/channels.php
  ├─ Queue Worker: broadcast jobs（構成次第）
  └─ Reverb Server: WS接続を保持し配信

# .env 例（名前は環境に合わせて）
BROADCAST_CONNECTION=reverb
QUEUE_CONNECTION=redis

# Reverb系（例）
REVERB_APP_ID=local
REVERB_APP_KEY=localkey
REVERB_APP_SECRET=localsecret
REVERB_HOST=127.0.0.1
REVERB_PORT=8080
REVERB_SCHEME=http

# フロント側が参照するWS（例）
VITE_REVERB_HOST=127.0.0.1
VITE_REVERB_PORT=8080
VITE_REVERB_SCHEME=http

# 例：WSサーバ起動（コマンドは環境のReverb導入方法に合わせる）
php artisan reverb:start

# 例：キューワーカー（配信をキューに流す場合）
php artisan queue:work

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;

    public function __construct(
        public int $orderId,
        public string $status,
        public int $updatedByUserId
    ) {}

    public function broadcastOn(): Channel
    {
        // 注文IDごとのプライベートチャンネル
        return new PrivateChannel("orders.{$this->orderId}");
    }

    public function broadcastAs(): string
    {
        return 'order.status.updated';
    }

    public function broadcastWith(): array
    {
        return [
            'order_id' => $this->orderId,
            'status' => $this->status,
            'updated_by' => $this->updatedByUserId,
        ];
    }
}

use App\Models\Order;
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('orders.{orderId}', function ($user, $orderId) {
    $order = Order::find($orderId);
    if (!$order) return false;

    // 例：注文の所有者 or 管理者のみ購読OK
    return $order->user_id === $user->id || $user->can('manage-orders');
});

use App\Events\OrderStatusUpdated;

DB::transaction(function () use ($order, $newStatus) {
    $order->update(['status' => $newStatus]);

    event(new OrderStatusUpdated(
        orderId: $order->id,
        status: $order->status,
        updatedByUserId: auth()->id()
    ));
});

import Echo from 'laravel-echo';

window.Echo = new Echo({
  broadcaster: 'reverb',
  key: import.meta.env.VITE_REVERB_APP_KEY,
  wsHost: import.meta.env.VITE_REVERB_HOST,
  wsPort: Number(import.meta.env.VITE_REVERB_PORT),
  forceTLS: import.meta.env.VITE_REVERB_SCHEME === 'https',
  enabledTransports: ['ws', 'wss'],
});

window.Echo.private(`orders.${orderId}`)
  .listen('.order.status.updated', (e) => {
    // e: { order_id, status, updated_by }
    renderStatus(e.status);
  });

# サーバ側（例）
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('room.{roomId}', function ($user, $roomId) {
    return ['id' => $user->id, 'name' => $user->name];
});

# クライアント側（例）
window.Echo.join(`room.${roomId}`)
  .here((users) => renderUsers(users))
  .joining((user) => addUser(user))
  .leaving((user) => removeUser(user));