Socket.IO客户端与服务端通信失败问题求助

问题描述 #

基于Socket.IO的JavaScript项目，服务端配置CORS后可正常访问/help页面，但客户端与服务端无法建立Socket.IO通信，服务端接收不到客户端发送的消息。服务端与客户端Socket.IO版本均为4.6.1，版本匹配。

核心问题分析 #

• 服务端启动方式错误：服务端使用app.listen()启动，但Socket.IO绑定的是http.createServer(app)创建的server实例，app.listen()会新建独立的HTTP服务器，导致Socket.IO的监听逻辑未关联到实际运行的服务器上。
• 客户端同步死循环阻塞事件循环：客户端代码中的while(1>0)是同步无限循环，Node.js单线程模型下，该循环会完全占用主线程，导致Socket.IO的连接建立、消息发送等异步逻辑根本无法执行。
• CORS配置不规范：手动通过Express中间件设置Access-Control-Allow-Origin，未覆盖Socket.IO通信所需的全部CORS规则，可能导致跨域握手失败。

修复步骤 #

1. 修正服务端启动方式 #

将app.listen()替换为server.listen()，确保Socket.IO绑定的服务器是实际运行的实例：

// 替换原有的app.listen
server.listen(port, () => {
  console.log(`Server Socket.IO listen on: ${port}`);
});

2. 移除客户端同步死循环，改用定时器触发消息发送 #

删除while(1>0)循环，用setInterval定时调用sendMessage，避免阻塞事件循环：

// 替换原有的死循环代码
setInterval(() => {
  sendMessage();
}, 5000);

3. 规范Socket.IO的CORS配置 #

在Socket.IO初始化时直接配置CORS，替代手动的Express中间件，确保所有Socket.IO通信的跨域规则正确：

const io = new Server(server, {
  cors: {
    origin: "*", // 生产环境建议指定具体域名
    methods: ["GET", "POST"]
  }
});

同时可移除手动添加的CORS中间件，避免规则冲突。

完整修复代码 #

服务端代码 #

import express from 'express';
import http from 'http';
import { Server } from 'socket.io';

const app = express();
app.use(express.static('public'));

const server = http.createServer(app);
// 规范配置Socket.IO的CORS
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});
const port = 3000;

app.get('/help', (req, res) => {
  res.send('HELP PAGE')
})

io.on('connection', (socket) => {
  console.log(socket.id);
  console.log('user connected');

  socket.on('message', (msg) => {
    console.log('Message: ' + msg);
    io.emit('message', msg);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

// 使用server.listen启动
server.listen(port, () => {
  console.log(`Server Socket.IO listen on: ${port}`);
});

客户端代码 #

import {io} from 'socket.io-client';

const socket = io.connect('http://localhost:3000');

socket.on('connect', () => {
  console.log('Connected to server!');
});
console.log("there")

socket.on('message', (data) => {
  console.log(`Received message: ${data}`);
});

const sendMessage = () => {
  const message = "message to send";
  console.log("sending");
  socket.emit('message', "message");
};

// 用定时器定时发送消息，替代死循环
setInterval(sendMessage, 5000);

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