Ubuntu SSL服务器部署BeyondCode Laravel WebSocket替代Pusher连接故障排查

1. 修正环境变量配置错误 #

你的PUSHER_HOST环境变量带了https://前缀，会导致WebSocket连接地址解析异常。正确配置需仅保留域名：

PUSHER_HOST=example.com
PUSHER_APP_ID=some_id
PUSHER_APP_KEY=some_app_key
PUSHER_APP_SECRET=some_secrete
PUSHER_PORT=6001
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

同时确保.env.production中VITE_PUSHER_HOST也改为纯域名，不要带协议前缀。

2. 开放服务器端口与防火墙规则 #

• 在Ubuntu服务器上开放6001端口：

  ufw allow 6001/tcp
  ufw reload
  

• 若使用云服务商（如阿里云、AWS），需在安全组规则中添加6001端口的TCP入站权限。

3. 修复Laravel Echo配置问题 #

（1）替换React环境中无效的Blade语法 #

React项目无法解析Blade的{{csrf_token()}}，需通过Cookie获取XSRF Token：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;

// 从Cookie提取XSRF Token的工具函数
function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    wsHost: import.meta.env.VITE_PUSHER_HOST,
    wssHost: import.meta.env.VITE_PUSHER_HOST,
    wsPort: import.meta.env.VITE_PUSHER_PORT,
    wssPort: import.meta.env.VITE_PUSHER_PORT,
    forceTLS: true,
    encrypted: true,
    enableTransports: ['wss'], // 生产环境仅保留wss协议即可
    auth: {
        headers: {
            'XSRF-TOKEN': getCookie('XSRF-TOKEN')
        }
    }
});

（2）简化传输协议配置 #

生产环境使用SSL，无需保留ws传输协议，避免无效连接尝试。

4. 确保WebSocket服务持续运行 #

使用Supervisor管理WebSocket进程，防止服务意外中断：

1. 安装Supervisor：

   apt-get install supervisor
   

2. 创建配置文件/etc/supervisor/conf.d/laravel-websockets.conf：

   [program:laravel-websockets]
   process_name=%(program_name)s_%(process_num)02d
   command=php /path/to/your/project/artisan websockets:serve
   autostart=true
   autorestart=true
   user=www-data
   numprocs=1
   redirect_stderr=true
   stdout_logfile=/path/to/your/project/storage/logs/websockets.log
   

3. 更新并启动服务：

   supervisorctl reread
   supervisorctl update
   supervisorctl start laravel-websockets:*
   

4. 查看日志排查启动错误：

   tail -f storage/logs/websockets.log
   

5. 配置Nginx反向代理（推荐） #

若不想直接暴露6001端口，可通过Nginx反向代理WebSocket请求，同时确保SSL证书配置正确：

server {
    listen 443 ssl;
    server_name example.com;

    # SSL证书配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 其他Nginx基础配置...

    # WebSocket仪表盘代理
    location /laravel-websockets {
        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;
    }

    # Pusher协议路径代理
    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;
        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;
    }
}

配置完成后重启Nginx：systemctl restart nginx，同时修改环境变量PUSHER_PORT为443，Echo配置中的wsPort和wssPort也改为443。

6. 配置WebSocket服务SSL证书（直接使用6001端口时） #

若直接通过6001端口提供SSL连接，需在config/websockets.php中添加SSL配置：

'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'path' => env('PUSHER_APP_PATH'),
        'capacity' => null,
        'enable_client_messages' => true,
        'enable_statistics' => true,
    ],
],
'ssl' => [
    'local_cert' => env('WEBSOCKET_SSL_LOCAL_CERT', '/path/to/cert.pem'),
    'local_pk' => env('WEBSOCKET_SSL_LOCAL_PK', '/path/to/key.pem'),
    'passphrase' => env('WEBSOCKET_SSL_PASSPHRASE', ''),
],

在环境变量中补充证书路径后，重启WebSocket服务即可启用SSL。

完成以上步骤后，重新部署应用并重启相关服务，再尝试连接仪表盘和收发实时消息。

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