Laravel+WebSocket线上环境WSS连接失败问题求助

问题场景 #

本地环境使用ws://127.0.0.1:6000运行聊天应用正常，部署到服务器后通过wss://my-domain.com连接时出现错误：

WebSocket connection to 'wss://shueur-app.shueur.com/app/865dc1ca593866642712?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

当前配置信息 #

.env 文件 #

PUSHER_APP_ID=1870264
PUSHER_APP_HOST="my-domain.com"
PUSHER_APP_KEY=key
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=mt1
PUSHER_APP_PORT=443
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_APP_HOST}"
VITE_PUSHER_PORT="${PUSHER_APP_PORT}"
VITE_PUSHER_SCHEME="https"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="/home/shueurco/ssl/certs/shueur_app_shueur_com_d089e_8225b_1735046002_86197ef80e37f38293f9f3f8b4b5167c.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="/home/shueurco/ssl/keys/d089e_8225b_a195c551e1e59eb253da9d44c2872131.key"

broadcast.php 配置 #

'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'),
            'encrypted' => true,
            'useTLS' => true,
             'host' => env('PUSHER_APP_HOST'),
             'port' => env('PUSHER_APP_PORT'),
            'scheme' => 'https',
            'curl_options' => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0
            ]
        ],

websockets.php 配置 #

'dashboard' => [
    'port' => env('LARAVEL_WEBSOCKETS_PORT', 443),
],

app.js 配置 #

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 || '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',
    enabledTransports: ['ws', 'wss'],
    encrypted: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
      auth: {
         headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token'),
       }
     }
  });

排查修复步骤 #

1. 验证SSL证书配置 #

• 确认.env中LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT和LARAVEL_WEBSOCKETS_SSL_LOCAL_PK的文件路径正确，服务器上对应文件存在且权限设置为600（仅允许所有者读写）。
• 检查证书域名是否匹配shueur-app.shueur.com，避免域名不匹配导致SSL握手失败。

2. 完善WebSocket服务SSL配置 #

在config/websockets.php中补充SSL开启配置，确保服务启用WSS：

'ssl' => [
    'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT'),
    'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK'),
    'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', ''),
    'verify_peer' => false,
],

注意：dashboard端口仅用于后台面板，不影响WebSocket服务的监听端口，需确保服务实际监听端口（默认6000）可被访问或通过反向代理转发。

3. 修正前端Echo配置 #

• 明确区分WS和WSS端口，避免混淆：

wsPort: 80,
wssPort: 443,

• 将wsHost设置为实际的WebSocket域名shueur-app.shueur.com，而非my-domain.com，保证域名一致。

4. 服务器端口与反向代理设置 #

• 确认服务器防火墙（UFW/云安全组）已开放443和6000端口的入站连接。
• 使用Nginx反向代理时，添加以下配置实现WSS转发：

location /app {
    proxy_pass http://127.0.0.1:6000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

此时.env中PUSHER_APP_PORT保持443，由Nginx转发到WebSocket服务的6000端口。

5. 清除缓存并重启服务 #

执行以下命令更新配置并重启服务：

php artisan config:clear
php artisan cache:clear
php artisan websockets:serve --port=6000

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