React+Node+Nginx配置WebSocket连接失败问题求助

核心问题排查 #

• 客户端连接地址错误：你当前用wss://localhost:3000/ws，部署后前端通过Nginx虚拟主机（域名/IP）访问，localhost仅在树莓派本地有效，外部设备访问时这个地址指向自身，必然无法连接。应该改为wss://你的域名/ws或wss://树莓派IP/ws，无需加3000端口——Nginx会把443端口的请求转发给Node服务。
• Nginx缺失WebSocket代理配置：默认Nginx不会自动处理WebSocket的升级请求，必须在虚拟主机配置中添加对应规则。
• Node服务监听范围限制：如果Node服务仅监听localhost，Nginx无法从本机网络转发请求，需改为监听0.0.0.0。

具体修复步骤 #

1. 修正客户端WebSocket连接代码 #

把原连接代码：

new WebSocket('wss://localhost:3000/ws');

替换为：

// 自动适配当前页面域名/IP，或直接写死你的域名/树莓派IP
new WebSocket(`wss://${window.location.host}/ws`);

2. 配置Nginx虚拟主机的WebSocket转发 #

打开你的Nginx虚拟主机配置文件（通常在/etc/nginx/sites-available/你的域名.conf），添加或修改如下配置：

server {
    listen 443 ssl;
    server_name 你的域名或树莓派IP;

    # SSL证书路径（根据实际情况修改）
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # React前端静态文件目录
    root /var/www/react-app/build;
    index index.html;

    # 处理前端路由刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # WebSocket代理核心配置
    location /ws {
        proxy_pass http://localhost:3000;  # 指向Node服务的地址和端口
        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;

        # 可选：设置长连接超时，避免空闲断开
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

配置完成后重启Nginx：

sudo nginx -t  # 先校验配置是否合法
sudo systemctl restart nginx

3. 调整Node服务的监听地址 #

确保你的Node WebSocket服务监听0.0.0.0而非localhost，示例代码：

const WebSocket = require('ws');
// 监听0.0.0.0允许本机所有网络接口访问
const wss = new WebSocket.Server({ port: 3000, host: '0.0.0.0' });

wss.on('connection', (ws) => {
    console.log('客户端已连接');
    // 你的业务逻辑代码
});

4. 检查防火墙设置 #

如果树莓派使用ufw防火墙，确保开放443端口：

sudo ufw allow 443/tcp
sudo ufw reload

3000端口可仅允许本地访问，避免外部直接连接：

sudo ufw allow from 127.0.0.1 to any port 3000/tcp

验证方法 #

• 重启Node服务和Nginx后，打开前端页面，按F12打开浏览器控制台，查看Network标签下的WebSocket请求状态，确认是否连接成功。
• 树莓派本地测试：先安装wscat（npm install -g wscat），然后执行wscat -c wss://你的域名/ws，检查是否能正常连接。

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