Node.js后端Socket.io配置失败：前端与Postman均无法连接

问题描述 #

Node.js后端的Socket.io配置失败，前端React应用与Postman均无法建立连接，无法获取后端内存中的在线用户列表。

前端终端错误信息 #

App.js:6 

 GET https://project001db-11.onrender.com/socket.io/?EIO=4&transport=polling&t=P1GAxrA 404 (Not Found)
create  @   polling.js:298
Request @   polling.js:237
request @   polling.js:190
doPoll  @   polling.js:215
poll    @   polling.js:96
doOpen  @   polling.js:56
open    @   transport.js:46
open    @   socket.js:170
Socket  @   socket.js:111
open    @   manager.js:108
Manager @   manager.js:38
lookup  @   index.js:29
./src/App.js    @   App.js:6
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:22
fn  @   hot module replacement:61
./src/index.js  @   TextDecoratorBgIMG.js:21
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:22
(anonymous) @   startup:7
(anonymous)

Postman错误信息 #

Error: Unexpected server response: 404
Handshake Details
Request URL: https://project001db-11.onrender.com/socket.io/?EIO=4&transport=websocket
Request Method: GET
Request Headers
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: V9DaaiwnspTbd2OaBv42BQ==
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Host: project001db-11.onrender.com

配置背景 #

• 后端技术栈：Node.js、Express.js、Socket.io、REST API
• 部署平台：Render Web Service

服务端代码 #

const supabase = require("./configdb.js");
const express = require("express");

//socket.io
const { Server } = require("socket.io");
const { createServer } = require("http");

const app = express();
const cors = require("cors");
const port = 3000;

app.use(cors());

app.use(express.json());

//set up socket connection to record online user
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "https://project001db-11.onrender.com",
  },
});

let onlineUser = {};

io.on("connection", (socket) => {
  socket.on("userConnected", (user) => {
    onlineUser[socket.id] = user;
    io.emit("updateUserList", Object.values(onlineUsers));
  });

  socket.on("disconnect"),
    () => {
      delete onlineUsers[socket.id];
      io.emit("updateUserList", Object.values(onlineUsers));
    };
});

// Set port, listen for requests.
app.listen(port, () => {
  console.log(`Server is running on port ${port}.`);
});

// Add routes routes.
require("./routes/chat.routes.js")(express, app);

客户端代码 #

import "./App.css";
import Chatroom from "./Chatroom";
import { io } from "socket.io-client";
import { useEffect } from "react";

const socket = io("https://project001db-11.onrender.com");

function App() {
  useEffect(() => {
    socket.emit("userConnected", { username: "JohnDoe" });

    socket.on("updateUserList", (users) => {
      console.log("Updated user list:", users);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  return <Chatroom />;
}

export default App;

问题排查与修复方案 #

1. 核心问题：启动对象错误 #

你创建了httpServer挂载Socket.io，但最终启动的是Express的app实例，而非绑定了Socket.io的httpServer。Socket.io依赖这个HTTP服务器才能正常提供服务，必须修正启动代码：

// 替换原app.listen代码
httpServer.listen(port, () => {
  console.log(`Server is running on port ${port}.`);
});

2. 变量名拼写错误 #

服务端定义的变量是onlineUser，但后续逻辑中错误使用了onlineUsers（多了末尾的s），会导致运行时错误。统一变量名：

let onlineUsers = {};

io.on("connection", (socket) => {
  socket.on("userConnected", (user) => {
    onlineUsers[socket.id] = user;
    io.emit("updateUserList", Object.values(onlineUsers));
  });
});

3. 语法错误：事件绑定格式错误 #

原代码中socket.on("disconnect"), () => {...}的逗号位置错误，导致断开连接的回调无法被正确绑定，修正为：

socket.on("disconnect", () => {
  delete onlineUsers[socket.id];
  io.emit("updateUserList", Object.values(onlineUsers));
});

4. Render平台适配优化 #

Render会自动分配端口，建议使用环境变量获取端口，避免硬编码：

const port = process.env.PORT || 3000;

修改代码后重新部署Render服务，确保配置生效。

完成以上修改后，前端与Postman即可正常建立Socket.io连接，获取在线用户列表。

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