Laravel Echo与Socket.io无法连接Laravel Echo Server且无法接收事件

你的场景中window.Echo.connector.socket.connected返回false且无法接收事件，主要存在以下几个问题及对应的解决方法：

1. 频道名称不匹配 #

从服务端日志可以看到，实际广播的频道是bilmarken_database_custom_notifications，但你的事件NewNotificationCreated中定义的频道是custom_notifications。这是因为Laravel广播会自动为Redis驱动的频道加上{APP_NAME}_database_前缀（你的APP_NAME或数据库前缀为bilmarken）。

解决方法：
确保前端订阅的频道与服务端广播的频道逻辑一致，直接在前端订阅定义的频道即可（Echo会自动处理前缀匹配）：

window.Echo.channel('custom_notifications')
  .listen('NewNotificationCreated', (event) => {
    console.log('收到通知:', event.msg);
  });

如需自定义前缀，修改config/broadcasting.php中的Redis广播配置：

'redis' => [
    'driver' => 'redis',
    'connection' => 'default',
    'prefix' => env('REDIS_PREFIX', 'your_custom_prefix_'),
],

2. 前端未订阅目标频道 #

你的main.ts仅初始化了Echo实例，但没有订阅任何频道，自然无法接收事件。必须添加频道订阅及事件监听代码。

修改后的main.ts：

import io from 'socket.io-client';
import Echo from 'laravel-echo';

window.io = io;

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: "http://127.0.0.1:6001",
});

// 订阅公共频道并监听事件
window.Echo.channel('custom_notifications')
    .listen('NewNotificationCreated', (event) => {
        console.log('收到通知内容:', event.msg);
    });

3. Socket.io版本兼容性问题 #

Laravel Echo Server 1.6.3仅兼容Socket.io客户端2.x版本，如果你安装的是3.x及以上版本，会直接导致连接失败（connected返回false）。

解决方法：
重新安装兼容版本的socket.io-client：

npm uninstall socket.io-client
npm install socket.io-client@2.4.0

4. 连接地址一致性问题 #

确保前端访问地址与Echo的host地址使用相同的IP/域名，避免跨域或解析异常。比如前端用127.0.0.1:8000访问，Echo的host就设置为http://127.0.0.1:6001，不要混用localhost和127.0.0.1。

5. 基础配置检查 #

• 确认config/broadcasting.php中默认广播驱动为Redis：

  'default' => env('BROADCAST_DRIVER', 'redis'),
  

• 确认.env文件配置正确：

  BROADCAST_DRIVER=redis
  REDIS_HOST=127.0.0.1
  REDIS_PORT=6379
  

• 重启所有服务：Laravel服务、Redis服务、Laravel Echo Server，确保配置生效。

测试验证 #

在Laravel控制器或路由中手动触发事件：

event(new \App\Events\NewNotificationCreated('测试WebSocket通知'));

打开浏览器控制台，查看是否输出连接成功日志，以及是否收到通知内容。

内容的提问来源于stack exchange，提问作者mahan singh