Socket.io切换聊天房间后发送消息出现重复问题求助

问题根源 #

客户端的socket.on("room__message__incoming")事件监听器未被正确清理。每次组件重新渲染（比如切换房间触发组件更新）时，useEffect会再次执行并绑定一个新的事件监听器。切换房间次数越多，绑定的监听器数量就越多，当服务端推送消息时，所有监听器都会触发，导致同一条消息被多次添加到roomMessage状态中，出现重复显示的情况。

修复方案 #

在useEffect的清理函数中移除对应的socket事件监听器，确保每次组件卸载或重新渲染时，旧的监听器被销毁，避免重复绑定。

修改客户端接收消息的代码如下：

useEffect(() => {
  const handleIncomingMessage = (data) => {
    if (data.senderId !== socket.id)
      setRoomMessage((prev) => [...prev, data]);
  };

  // 绑定事件监听器
  socket.on("room__message__incoming", handleIncomingMessage);

  // 清理函数：移除监听器
  return () => {
    socket.off("room__message__incoming", handleIncomingMessage);
  };
}, [socket]);

额外优化点 #

1. 修正服务端currRoom的存储方式：如果currRoom是全局变量，多个客户端连接时会互相覆盖房间信息，导致消息推送错误。应将其存储在socket的会话数据中：

socket.on("join__room", ({ room }) => {
    // 离开之前的房间（从socket会话中获取）
    socket.leave(socket.currRoom);
    socket.join(room);
    // 将当前房间存储到socket会话
    socket.currRoom = room;
});

2. 确认客户端发送消息的room参数准确性：确保发送room__message时携带的room是当前选中的房间，避免消息推送到错误频道。

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