如何配置laravel-websockets使其适配子目录部署的Laravel应用

AI 小北

2026-10-8

解决方案

核心原因是Laravel Echo默认发起WebSocket连接时不会自动携带应用部署的子目录路径，需要手动指定路径参数，配合反向代理配置即可解决：

第一步：修改前端`app.js`配置

在Echo初始化参数中新增path参数，值为子目录前缀加Websocket服务默认路径：

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.MIX_PUSHER_APP_KEY,
  wsHost: window.location.hostname,
  wsPort: 6001,
  wssPort: 6001,
  forceTLS: true,
  disableStats: true,
  // 新增配置，子目录前缀和你实际部署的路径保持一致
  path: '/app1/ws'
});

如果子目录不固定，可以用动态拼接方式避免硬编码：path: window.location.pathname.replace(/\/$/, '') + '/ws'

第二步：配置Nginx反向代理

需要将带子目录前缀的Websocket请求代理到本地Websocket服务端口，同时重写路径去掉子目录前缀：

location /app1/ws {
    proxy_pass http://127.0.0.1:6001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    # 重写路径去掉/app1前缀，匹配Websocket服务端的默认路径规则
    rewrite ^/app1/ws/(.*)$ /ws/$1 break;
}

第三步：修改后端`config/broadcasting.php`配置（可选）

如果后端主动推送事件也异常，在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' => '127.0.0.1',
    'encrypted' => false,
    'port' => 6001,
    'scheme' => env('HTTP_SCHEME', 'http'),
    // 新增配置
    'path' => '/app1/ws'
  ]
],