Laravel 8+BeyondCode WebSocket自定义事件不触发/Echo未监听问题

1. 确保队列服务正在运行 #

实现ShouldBroadcast接口的事件默认会推送到队列执行广播逻辑，若队列未启动，事件仅会触发构造函数日志，不会执行broadcastOn方法及后续广播操作。

• 启动队列Worker：

php artisan queue:work

• 本地开发可使用实时监听模式：

php artisan queue:listen

2. 统一事件广播名称（核心修复） #

Laravel默认将事件的全限定类名作为广播标识（如App\Events\OrderShipmentStatusUpdated），但前端Echo若仅监听短类名会导致匹配失败，可通过两种方式修正：

方式一：在事件类中指定广播别名 #

修改OrderShipmentStatusUpdated事件类，添加broadcastAs方法：

public function broadcastAs()
{
    return 'OrderShipmentStatusUpdated';
}

方式二：前端监听时使用完整类名 #

调整前端监听代码，使用事件的完整命名空间（注意类名前加.，反斜杠转义）：

Echo.channel("orders")
    .listen('.App\\Events\\OrderShipmentStatusUpdated', (e) => {
        console.log(e);
    });

3. 修正WebSocket连接配置 #

检查bootstrap.js中的wsHost配置，若应用运行域名与WebSocket服务绑定地址不一致，会导致连接异常，直接指定服务地址：

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: '127.0.0.1', // 替换window.location.hostname
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
});

修改后重新编译前端资源：

npm run dev

4. 清除配置缓存 #

Laravel配置缓存可能导致.env中的广播配置未生效，执行以下命令清除缓存：

php artisan config:clear
php artisan cache:clear

5. 验证事件触发方式 #

在Tinker中触发事件时，务必使用正确的命名空间：

php artisan tinker
event(new App\Events\OrderShipmentStatusUpdated());

6. 检查WebSocket服务状态 #

确保BeyondCode的WebSocket服务处于运行状态：

php artisan websockets:serve

打开WebSocket面板（默认路径/laravel-websockets），查看Events标签页，触发事件后是否有新的事件记录。

补充：添加事件广播数据 #

当前事件类未传递任何业务数据，前端console.log(e.order)会输出undefined，可在事件类中添加公共属性并赋值：

public $order;

public function __construct($order)
{
    $this->order = $order;
    Log::info('event triggered');
}

触发事件时传入数据：

event(new App\Events\OrderShipmentStatusUpdated(['id' => 1, 'status' => 'shipped']));

内容的提问来源于stack exchange，提问作者Gautam Yadav