MERN应用部署后Socket.io运行异常报错404，如何排查解决？

核心问题定位 #

• 你当前的错误本质是客户端Socket.io请求发往了Netlify的域名而非Heroku后端域名，Netlify仅支持静态资源托管，不运行Node服务端逻辑，所以请求/socket.io路径直接返回404。
• 除此之外还有几个部署配置错误也会导致Socket.io连接失败，需要一并修改。

具体修复步骤 #

1. 修正客户端Socket.io初始化配置 #

你当前的初始化缺少跨域配置，且可能存在环境变量配置错误导致请求默认发往当前页面域名（即Netlify域名），修改客户端代码如下：

// 初始化时明确指定后端地址，同时开启跨域相关配置，兼容两种传输方式
const socket = io("https://替换为你的Heroku后端实际域名", {
  transports: ['websocket', 'polling'],
  rejectUnauthorized: false
});
// 不需要手动emit connection事件，Socket.io初始化会自动触发连接
socket.on("connect", () => {
  socket.emit("Join", {sender: 替换为你的sender参数});
});

注意：不要手动调用socket.emit("connection")，connection是Socket.io内置事件，由连接建立时自动触发，手动发送无效还可能导致逻辑冲突。

2. 修正服务端Socket.io配置 #

Heroku会自动为你分配SSL证书，不需要你手动加载本地测试用的证书文件，本地的test-key.pem等证书部署到Heroku后不存在，会直接导致服务启动失败，修改服务端代码如下：

const app = express();
const PORT = process.env.PORT || 5000;
// 生产环境不需要自定义https证书，直接用http模块创建服务即可，Heroku的反向代理会自动处理SSL
const server = require('http').createServer(app);
const io = require('socket.io')(server, {
  cors: {
    origin: "替换为你的Netlify前端实际域名",
    methods: ["GET", "POST"]
  }
});

io.on("connection",(socket)=>{
    socket.on("Join", async({sender})=>{
        console.log("connection accepted")
        // 后续你的业务逻辑
    })
})

// 注意是server监听端口，不是app监听
server.listen(PORT, () => {
  console.log(`服务运行在端口${PORT}`);
});

3. 检查Heroku服务端启动配置 #

确认你的package.json中scripts字段的start命令是启动编译后的服务端文件，示例如下：

"scripts": {
  "start": "node server.js"
}

同时确认你本地的.gitignore没有把服务端运行必须的文件排除提交。

4. 本地测试验证 #

修改完成后先本地分别启动前后端，确认Socket.io连接正常后再重新部署到Heroku和Netlify即可。

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