React集成Socket.io：服务端向客户端推送事件未被接收问题

看起来你现在卡在两个关键问题上：客户端收不到服务端推送的事件，还有WebSocket连接处于pending状态。我来帮你一步步排查和解决：

1. 服务端推送范围搞错了！ #

你当前服务端用的是socket.emit('eventCreated', result)，这个方法只会把事件推送给创建该事件的那个客户端，而不是所有在线用户——这就是其他用户看不到新事件的核心原因！

要实现「所有用户实时看到新事件」，你需要把推送范围改成全局：

// 发给所有在线客户端（包括创建事件的用户自己）
io.emit('eventCreated', result);

// 如果不想让创建者重复收到（比如前端已经通过acknowledge拿到结果了），可以用broadcast
// socket.broadcast.emit('eventCreated', result);

2. 重复创建Socket实例导致pending连接 #

网络面板里的pending连接，大概率是因为你在组件内部重复初始化了Socket.io实例。比如每次组件挂载都新建一个socket，就会导致多个未正确建立的连接堆积。

解决办法是把Socket实例做成全局单例：

• 单独创建一个socket.js文件：

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

// 替换成你的服务端地址，确保和服务端跨域配置一致
const socket = io('http://localhost:3000');

export default socket;

• 在组件里导入这个单例，而不是每次挂载都新建：

import socket from './socket';

class YourEventComponent extends React.Component {
  componentDidMount () {
    this.getEventsFromDB();
    // 用全局单例的socket监听事件
    socket.on('eventCreated', (event) => {
      console.log('收到新事件:', event);
      this.props.dispatch(addEvent({ event }));
    });
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏和重复触发
    socket.off('eventCreated');
  }
}

3. 额外检查项 #

• 版本兼容性：确保服务端的socket.io和客户端的socket.io-client版本完全一致（比如都是4.x系列），版本不匹配会导致连接或事件接收失败。
• 跨域配置：如果React项目和Socket服务端不在同一域名/端口，服务端需要配置跨域允许：

// 服务端初始化时添加cors配置
const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:3000", // React项目的地址
    methods: ["GET", "POST"]
  }
});

按照这几步调整后，应该就能解决你的问题：服务端会把新事件推送给所有用户，客户端能正确接收并更新Redux store，pending的连接问题也会消失。

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