React集成Socket.io开发聊天应用时接收方重复收消息问题

问题根因 #

• 直接诱因：聊天组件内绑定message received事件的useEffect未做监听器清理。该effect的依赖列表包含activeChat、notifications等多个会频繁变化的状态，每次依赖更新时，都会给同一个socket实例新增一个事件回调，旧的回调不会被自动移除。消息抵达时所有已绑定的回调会依次执行，导致同一条消息被多次插入消息列表、多次触发通知更新。
• 潜在风险：客户端同时加入了用户专属ID房间和当前聊天的chatId房间，若后续服务端发消息时同时向两个房间推送同一条内容，会进一步触发重复投递。

修复步骤 #

1. 前端修复事件监听器逻辑 #

修改聊天组件内的消息监听effect，每次effect重跑或组件卸载前，必须移除已绑定的旧监听器，同时精简依赖列表减少不必要的重绑：

useEffect(() => {
  if (!socket) return;

  // 抽离独立的消息处理回调，用于后续精准移除监听器
  const handleNewMessage = (message) => {
    if (!activeChat[0]._id || message.chat._id !== activeChat[0]._id) {
      if (!notifications) return;
      setNotifications(prevState => [message, ...prevState]);
      return;
    }
    setMessages(prevState => [...prevState, message]);
  };

  // 绑定事件监听器
  socket.on('message received', handleNewMessage);

  // 清理函数：effect重跑/组件卸载前移除当前绑定的监听器，避免重复绑定
  return () => {
    socket.off('message received', handleNewMessage);
  };
  // 仅保留真正需要触发监听器重绑的依赖，移除引用稳定、不影响回调逻辑的依赖项
}, [socket, activeChat, notifications, setNotifications]);

现有Socket上下文中的单例维护逻辑是正确的：将socket存在全局上下文、仅在用户切换时关闭旧连接创建新连接的写法，解决了之前把socket放在聊天组件内、组件卸载就关闭连接导致无法跨聊天收消息的问题，这部分不需要调整。
聊天切换时的加入/离开房间逻辑也无需修改，保持现有写法即可。

2. 服务端逻辑校验（可选，规避后续迭代风险） #

当前服务端仅向用户专属MongoDB ID房间推送消息的逻辑是正确的，不需要额外往chatId房间推送消息，避免重复投递。原有服务端代码可保留，若需要调试可临时加日志确认每个socket的事件监听器数量符合预期：

io.on('connection', socket => {
  socket.on('setup', userData => {
    socket.join(userData._id);
  });

  socket.on('join chat', chatId => {
    socket.join(chatId);
  }); 

  socket.on('new message', message => {
    let chat = message.chat;
    chat.users.forEach(user => {
      if (user._id === message.sender._id) return;
      // 保持仅向用户专属房间发消息的逻辑，不要额外向chatId房间重复emit同一条消息
      socket.to(user._id).emit('message received', message);
    });
  });

  socket.on('leave chat', chatId => {
    socket.leave(chatId);
  });
});

验证方式 #

修复完成后，在handleNewMessage回调内加打印日志，发送一条测试消息，若日志仅打印一次、页面仅渲染一条消息，即说明问题解决。

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