Laravel 9配置WebSocket遇问题：无法接收API消息、Echo未监听事件

仪表盘显示已订阅状态，但始终无法接收事件消息，相关配置信息如下：

.env 配置 #

BROADCAST_DRIVER=pusher
QUEUE_CONNECTION=sync

PUSHER_APP_ID=123
PUSHER_APP_KEY=p123
PUSHER_APP_SECRET=s123
PUSHER_HOST='127.0.0.1'
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

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,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
    encrypted: false,
});

排查与修复方案 #

1. 统一.env与Echo的主机/端口配置 #

当前.env和Echo配置存在端口、协议不一致的问题：

• 修改.env：移除PUSHER_HOST的单引号（env变量无需引号），调整端口和协议以匹配Laravel WebSockets默认设置：

  PUSHER_HOST=127.0.0.1
  PUSHER_PORT=6001
  PUSHER_SCHEME=http
  

• 同步VITE环境变量（确保前端读取到正确配置）
• 更新Echo配置，改用VITE变量统一配置，避免硬编码：

  window.Echo = new Echo({
      broadcaster: 'pusher',
      key: import.meta.env.VITE_PUSHER_APP_KEY,
      cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
      wsHost: import.meta.env.VITE_PUSHER_HOST,
      wsPort: import.meta.env.VITE_PUSHER_PORT,
      forceTLS: import.meta.env.VITE_PUSHER_SCHEME === 'https',
      encrypted: import.meta.env.VITE_PUSHER_SCHEME === 'https',
      disableStats: true,
  });
  

2. 确认Laravel WebSockets服务运行状态 #

• 执行php artisan websockets:serve启动服务，查看终端输出是否正常，无报错信息
• 访问WebSocket仪表盘（默认路径/laravel-websockets），检查连接状态和事件推送记录

3. 验证事件广播配置 #

• 确保事件类实现了ShouldBroadcast接口，且broadcastOn()方法返回正确的频道实例：

  class YourTestEvent implements ShouldBroadcast
  {
      public function broadcastOn()
      {
          return new Channel('your-channel-name');
      }
  }
  

• 添加测试路由手动触发事件，验证广播是否正常：

  Route::get('/test-broadcast', function () {
      event(new \App\Events\YourTestEvent());
      return 'Event broadcasted';
  });
  

  访问该路由后，查看WebSocket仪表盘是否有事件记录

4. 检查前端监听代码 #

• 确认前端正确订阅目标频道并监听事件，同时打开浏览器控制台查看错误日志：

  window.Echo.channel('your-channel-name')
      .listen('YourTestEvent', (eventData) => {
          console.log('Received event:', eventData);
      });
  

5. 清理队列（若使用同步队列） #

• 执行php artisan queue:clear清空队列，避免未处理的任务阻塞广播

内容的提问来源于stack exchange，提问作者Hexaphor Technologies