Laravel Sail(Docker)部署Soketi遇WebSocket连接失败求助

WebSocket is closed before the connection is established.

请求地址显示为：wss://127.0.0.1:6001/app/app-key?protocol=7&client=js&version=8.0.2&flash=false

用户提供的配置信息如下：

broadcasting.php 配置 #

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY', 'app-key'),
    'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
    'app_id' => env('PUSHER_APP_ID', 'app-id'),
    'options' => [
        'host' => env('PUSHER_HOST', '127.0.0.1'),
        'port' => env('PUSHER_PORT', 6001),
        'scheme' => env('PUSHER_SCHEME', 'http'),
        'encrypted' => true,
        'useTLS' => env('PUSHER_SCHEME') === 'https',
    ],
],

bootstrap.js 配置 #

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    encrypted: true,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post('/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                .then(response => {
                    callback(false, response.data);
                })
                .catch(error => {
                    callback(true, error);
                });
            }
        };
    }
});

.env 配置 #

VITE_HOST='my-domain.com'
VITE_PORT=5173
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
# VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_HOST="127.0.0.1"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

问题核心是前端代码尝试连接服务器本地的127.0.0.1:6001，而非公网可访问的域名地址，这是部署服务器后常见的配置错误，具体修改步骤如下：

1. 修正 .env 中的 VITE_PUSHER_HOST #

将VITE_PUSHER_HOST从127.0.0.1改为你的服务器域名my-domain.com；后端PUSHER_HOST可保留127.0.0.1（Docker内部通信场景），但前端必须指向公网地址：

VITE_PUSHER_HOST="my-domain.com"
PUSHER_HOST="127.0.0.1"

2. 调整WebSocket端口与HTTPS配置 #

• 生产环境推荐用Nginx反向代理，无需暴露6001端口，设置VITE_PUSHER_PORT为443（HTTPS默认端口）：

VITE_PUSHER_PORT=443
VITE_PUSHER_SCHEME="https"

• 若直接暴露6001端口，需确保服务器防火墙开放该端口，同时前端wssPort对应6001，但此方式不建议生产环境使用。

3. 修正 bootstrap.js 中的端口逻辑 #

当前代码wssPort直接取VITE_PUSHER_PORT会导致端口不匹配，调整为HTTPS场景自动用443端口：

wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
wssPort: (import.meta.env.VITE_PUSHER_SCHEME === 'https') ? 443 : import.meta.env.VITE_PUSHER_PORT ?? 80,

4. 配置Nginx反向代理（HTTPS场景） #

添加WebSocket代理规则，将域名请求转发到Soketi容器的6001端口，示例配置：

location /app/ {
    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;
}

5. 重启服务并重新构建前端 #

修改配置后，重启Laravel Sail容器并重新编译前端资源：

sail down && sail up -d
npm run build

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