在Laravel中实现WebSocket广播：创建新游戏时实时更新

你遇到的WebSocketsBroadcaster不存在的错误，是因为BeyondCode的Laravel WebSockets包并不提供这个门面——它的作用是模拟Pusher协议，让你可以使用Laravel原生的广播系统，而不是直接调用自定义的广播类。以下是完整的正确集成流程：

一、修正广播配置 #

首先确保项目已正确配置广播驱动：

1. 在.env文件中设置：

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=任意自定义ID
PUSHER_APP_KEY=任意自定义密钥
PUSHER_APP_SECRET=任意自定义密钥
PUSHER_HOST=localhost
PUSHER_PORT=6001
PUSHER_SCHEME=http

2. 在config/broadcasting.php的connections.pusher部分更新配置：

'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'),
        'host' => env('PUSHER_HOST', 'localhost'),
        'port' => env('PUSHER_PORT', 6001),
        'scheme' => env('PUSHER_SCHEME', 'http'),
        'encrypted' => false,
        'useTLS' => env('PUSHER_SCHEME') === 'https',
    ],
],

二、创建广播事件 #

生成符合Laravel广播规范的事件类，封装游戏创建的广播数据：
运行Artisan命令生成事件：

php artisan make:event GameCreated

编辑app/Events/GameCreated.php：

<?php

namespace App\Events;

use App\Models\Game;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class GameCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $game;

    public function __construct(Game $game)
    {
        $this->game = $game;
    }

    public function broadcastOn(): array
    {
        // 广播到公共频道，所有客户端均可监听
        return [
            new Channel('games'),
        ];
    }

    // 自定义广播事件名称（可选，默认是类名）
    public function broadcastAs()
    {
        return 'game.created';
    }
}

三、修改控制器触发广播 #

替换控制器中错误的广播调用，改用Laravel原生事件触发：

use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use App\Models\Game;
use App\Events\GameCreated; // 引入事件类

class GameController extends Controller
{
    public function create(Request $request)
    {
        $accessCode = $this->generateUniqueAccessCode();

        $game = Game::create([
            'access_code' => $accessCode,
            'user_id' => auth()->id(),
        ]);

        $game->participants()->attach(auth()->id());

        if ($game->participants->count() >= 4) {
            $game->update(['status' => 'started']);
        }

        // 触发广播事件
        event(new GameCreated($game));

        return redirect()->route('game.show', $game->id)->with('success', 'Spiel erfolgreich erstellt und beigetreten!');
    }

    // 你的generateUniqueAccessCode方法...
}

四、前端监听广播 #

使用Laravel Echo连接WebSocket服务器，监听games频道的game.created事件：

1. 安装依赖：

npm install laravel-echo pusher-js

2. 在resources/js/bootstrap.js中配置Echo：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST || 'localhost',
    wsPort: import.meta.env.VITE_PUSHER_PORT || 6001,
    forceTLS: false,
    disableStats: true,
});

// 监听游戏创建事件
window.Echo.channel('games')
    .listen('game.created', (e) => {
        console.log('新游戏创建：', e.game);
        // 此处可更新前端UI，比如将新游戏添加到列表
    });

3. 在.env中配置VITE变量：

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"

五、启动WebSocket服务器 #

最后启动BeyondCode的WebSocket服务器：

php artisan websockets:serve

完成以上步骤后，创建新游戏时，事件会通过Laravel广播系统发送到WebSocket服务器，所有已连接的客户端都会收到game.created事件并实时更新。

内容的提问来源于stack exchange，提问作者Bozic Mario