ReactJS中SocketIO客户端无法接收服务端消息问题排查

核心问题在于SocketIO服务端并未将收到的"abc"事件转发给客户端，同时代码中存在几处细节问题需要修正：

1. 修正SocketIO服务端转发逻辑 #

当前服务端仅监听并打印"abc"事件，没有将消息推送给客户端。需要在收到事件后，主动向客户端发送消息：

const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  socket.onAny((key, data) => {
    console.log(key, data);
  });
  // 修正事件接收参数（另一服务端仅发送了一个数据参数）
  socket.on("abc", (data) => {
    console.log("收到另一服务端消息:", data);
    // 将消息广播给所有连接的客户端
    io.emit("abc", data);
    // 若仅需发给当前连接外的其他客户端，可改用 socket.broadcast.emit("abc", data)
  });
});
httpServer.listen(8128);

2. 规范客户端Socket实例管理 #

客户端需正确清理Socket连接，避免内存泄漏，同时确保监听逻辑正常：

useEffect(() => {
    const socket = io('http://localhost:8128');

    socket.on('connect', () => {
        console.log('已连接到SocketIO服务端');
    });
    socket.on('disconnect', () => {
        console.log('与服务端断开连接');
    });

    socket.on('abc', (data) => {
        console.log('收到服务端消息:', data);
    });

    // 组件卸载时断开Socket连接，避免残留连接
    return () => {
        socket.disconnect();
    };
}, []);

3. 验证另一服务端的发送逻辑 #

确保另一服务端的SocketIO客户端初始化及事件发送流程正确：

// 确保客户端初始化方式正确，示例如下：
const socketIOClient = require('socket.io-client')('http://localhost:8128');
socketIOClient.on('connect', () => {
  console.log('已连接到SocketIO服务端');
  socketIOClient.emit("abc", "asd");
});

关键说明 #

• 另一服务端发送"abc"事件到SocketIO服务端后，服务端必须通过io.emit将消息转发给客户端，客户端才能收到并打印内容。
• 客户端的清理函数必须添加socket.disconnect()，否则组件重复渲染时可能产生多个无效Socket连接。

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