同一DO Droplet上Preact应用无法连接Socket.io服务器问题排查

我来帮你拆解下这个问题的核心原因，以及对应的解决办法——你遇到的情况其实很常见，主要是HTTPS混合内容限制和Nginx缺少WebSocket代理配置这两个点在搞鬼：

为什么本地正常，部署到Nginx就失败？ #

1. 混合内容安全拦截 #

你的前端现在是通过HTTPS访问的（因为配置了Let's Encrypt证书），但客户端代码里直接写了io.connect('app.ardilabs.com:9080')——浏览器会默认把这个请求当成HTTP协议的连接。而现代浏览器的安全策略会阻止HTTPS页面加载HTTP资源（也就是「混合内容」），直接把socket连接给拦截了。

本地运行时你可能是用HTTP访问的，所以没有这个限制，自然能正常连接。

2. Nginx未处理WebSocket请求 #

Socket.io的连接依赖WebSocket协议，而Nginx默认不会自动处理WebSocket的升级请求。即使你绕过了混合内容的问题，Nginx也不会把socket的请求转发到你的Node.js服务器，导致连接无法建立。

具体解决步骤 #

第一步：修改客户端Socket连接代码 #

把客户端的连接代码改成适配HTTPS的方式，避免混合内容问题：

import io from 'socket.io-client';
// 方案1：用相对路径，自动匹配当前页面的协议（HTTPS对应wss，HTTP对应ws）
const socket = io.connect('/', { path: '/socket.io' });

// 方案2：明确指定wss协议（适合固定域名的场景）
// const socket = io.connect('wss://app.ardilabs.com', { path: '/socket.io' });

第二步：配置Nginx支持WebSocket代理 #

修改你的Nginx站点配置文件（通常在/etc/nginx/sites-available/app.ardilabs.com.conf），添加socket.io的反向代理规则：

server {
    listen 443 ssl;
    server_name app.ardilabs.com;

    # 你的Let's Encrypt证书配置（应该已经存在，这里仅作示意）
    ssl_certificate /etc/letsencrypt/live/app.ardilabs.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/app.ardilabs.com/privkey.pem;

    # Preact构建后静态文件的根目录
    root /var/www/your-preact-app/build;
    index index.html;

    # 核心：处理socket.io的WebSocket请求
    location /socket.io {
        proxy_pass http://localhost:9080;
        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;
    }

    # 单页应用路由兼容（避免刷新页面404）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

这些配置的作用：

• proxy_http_version 1.1：开启HTTP/1.1支持，WebSocket必须依赖这个版本
• Upgrade和Connection头：告诉Nginx把请求升级为WebSocket连接
• 其他Header：让Node.js服务器能正确获取客户端的真实IP和请求协议

第三步：重启服务生效 #

# 重启Nginx加载新配置
sudo systemctl restart nginx

# 重启你的Node.js服务（如果需要的话）
pm2 restart your-node-app-name

验证方法 #

部署修改后的前端代码后，打开浏览器开发者工具（F12）：

1. 查看Console标签，有没有混合内容或连接失败的错误
2. 查看Network标签，筛选WS类型，确认是否有成功建立的WebSocket连接

这样应该就能解决你的问题，Postman推送的数据也能正常同步到前端了。

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