Laravel 10与Soketi的WebSocket连接超时问题求助

根据你的配置和报错信息，核心问题集中在前端WebSocket协议不匹配、跨域限制以及前后端加密配置不一致这几个点，以下是具体解决步骤：

1. 修正前端Laravel Echo的连接配置 #

你的报错显示前端尝试用wss://连接，但当前Soketi并未配置HTTPS/TLS，强制使用加密连接会直接失败。修改前端配置如下：

const echo = new Echo({
  broadcaster: 'pusher',
  key: 'app-key',
  wsHost: '127.0.0.1',
  wsPort: 6001,
  // 移除不必要的wssPort配置（未启用HTTPS）
  forceTLS: false,
  encrypted: false, // 改为false，对应Soketi的HTTP协议
  disableStats: true,
  enabledTransports: ['ws'], // 仅保留ws协议即可
});

2. 为Soketi添加跨域配置（关键） #

浏览器端WebSocket连接受跨域策略限制，即使地址正确，若Soketi未允许前端域名的跨域请求，也会导致连接失败。在docker-compose.yml的Soketi服务中添加CORS相关环境变量：

soketi:
  image: 'quay.io/soketi/soketi:latest-16-alpine'
  environment:
    SOKETI_DEBUG: "${SOKETI_DEBUG-1}"
    SOKETI_METRICS_SERVER_PORT: "9601"
    SOKETI_METRICS_ENABLED: "${SOKETI_METRICS_ENABLED-1}"
    # 添加跨域配置，替换为你的前端实际地址（如http://localhost:5173）
    SOKETI_CORS_ALLOWED_ORIGINS: "${APP_URL},http://localhost:5173"
    SOKETI_CORS_ALLOW_CREDENTIALS: "true"
  ports:
    - "6001:6001"
    - "9601:9601"

3. 统一后端广播配置的加密设置 #

你的broadcasting.php中encrypted: true和useTLS: false存在矛盾，后端连接Soketi用的是HTTP，需把encrypted改为false：

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'host' => env('PUSHER_HOST', '127.0.0.1'),
        'port' => env('PUSHER_PORT', 6001),
        'scheme' => env('PUSHER_SCHEME', 'http'),
        'encrypted' => false, // 改为false，与协议一致
        'useTLS' => env('PUSHER_SCHEME', 'http') === 'https',
    ],
],

4. 验证最终连接流程 #

1. 重启Soketi容器：docker-compose restart soketi
2. 重新触发后端事件，确认Soketi日志正常接收
3. 打开浏览器控制台，检查WebSocket连接是否变为ws://127.0.0.1:6001/...，且无跨域报错

如果仍有问题，可尝试：

• 确认前端服务和Soketi在同一网络环境（如均为本地localhost，无容器内部地址混淆）
• 检查防火墙是否拦截了6001端口
• 在Soketi环境变量中添加SOKETI_DEBUG=2，获取更详细的连接日志排查问题

内容的提问来源于stack exchange，提问作者Minh Trần