SocketIO无法建立服务端与客户端连接，请求返回404错误求助

问题现象 #

GET /socket.io/?EIO=4&transport=polling&t=OhMOw8Z 404 0.180 ms - 149

你的代码存在几个关键问题，导致SocketIO无法正常建立连接，以下是针对性的修复步骤：

1. 调整SocketIO实例的初始化位置 #

SocketIO必须绑定到HTTP服务器实例，且要在全局初始化，不能放在控制器函数内（否则每次HTTP请求都会重复初始化，且绑定时机错误）。

修改server.js：

const PORT = process.env.PORT || 3001;
const http = require('http')
const app = require("./app");
const { Server } = require("socket.io");

require("./routes/auth.routes")(app);
require("./routes/socket.routes")(app);

const server = http.createServer(app)

// 全局初始化SocketIO并绑定到HTTP服务器
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
  cookie: true,
})

// 全局监听客户端连接事件，只绑定一次
io.on('connection', (socket) => {
  console.log("Socket Connection Established:", socket.id);
})

server.listen(PORT, () => {
  console.log(`Listening on PORT:${PORT}`);
});

// 导出server和io实例供其他模块使用
module.exports = { server, io };

2. 修正控制器代码 #

控制器不需要初始化SocketIO，直接导入全局的io实例即可，同时移除重复的connection事件监听：

修改data.controller.js：

// 根据server.js的实际路径调整导入路径
const { io } = require("../server");

const getPrices = async (req, res) => {
  console.log(req.body)
  console.log('SERVER')
  
  // 如需向客户端推送数据，可直接使用io操作，例如：
  // io.emit('price-update', { data: '实时价格数据' })
  
  res.status(200).json({ message: "请求已接收" });
};

module.exports = { getPrices };

3. 修复客户端错误逻辑 #

客户端不需要手动触发connection事件，创建socket实例时会自动发起连接，同时确保token变量已正确获取：

修改Socket.js：

// 先确保token已正确获取（根据你的业务逻辑调整）
const token = TokenService.getUser();
const socket = io('http://localhost:3001', {
  transportOptions: {
    polling: {
      extraHeaders: {
        'X-Auth-Token': token,
      },
    },
  }
})

export default socket;

修改Data.js：

import socket from "./Socket";
const handleSubmit = async (e) => {
  e.preventDefault();

  try {
    const token = TokenService.getUser()
    await axios.post("http://localhost:3001/socket", {
      token
    });

    console.log('GET DATA!')

    // 移除错误的 socket.emit('connection')
    // 如果需要向服务端发送自定义请求，可改为：
    // socket.emit('request-prices', { token })

  } catch (error) {
    console.log("Data Error: ", error.message);
  }
};

4. 验证修复 #

1. 重启服务端
2. 加载客户端页面后，服务端控制台应输出Socket Connection Established: [socket唯一ID]
3. 此时/socket.io/路径不会再返回404错误

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