Socket.io聊天应用接收端重复接收消息问题求助

问题1：发送方发送消息后显示自己输入的内容 #

常见两种诱因：

• 客户端发送消息时，直接把输入内容加到本地消息列表，同时服务端又把消息广播回发送方，造成重复显示。
• 服务端用了全局广播（比如io.emit()），没排除发送者本身，导致发送方收到自己发的消息。

修复思路：

• 选其一即可：
  1. 客户端只在收到服务端的消息回调时，再把消息加到本地列表，发送时不主动添加。
  2. 服务端用socket.broadcast.emit()替代io.emit()，这样消息只会发给除发送方外的所有客户端；如果需要发送方自己也显示，要么服务端广播后单独给发送方发一次确认消息，要么客户端发送后本地加一条，但要和服务端的消息逻辑错开，避免重复。

问题2：接收端重复接收消息（User2收两次、User3收三次） #

核心问题是客户端重复绑定了消息监听事件。比如每次组件渲染、页面刷新，或者触发某个操作时，都重新执行socket.on('message', ...)，导致同一个事件被绑定了N次，触发一次就会执行N次回调，接收次数等于绑定次数。

修复思路：

• 确保消息监听只绑定一次：
  • React项目：在useEffect里绑定事件，同时在清理函数中移除监听，避免组件重复渲染时重复绑定：

    useEffect(() => {
      const handleNewMessage = (message) => {
        // 处理接收到的消息逻辑
      };
      socket.on('message', handleNewMessage);
      // 组件卸载时移除监听
      return () => {
        socket.off('message', handleNewMessage);
      };
    }, [socket]); // 依赖只传socket，防止重复执行
    

  • 普通JS项目：把socket.on()的绑定代码放在页面初始化的入口（比如window.onload里），不要放在会重复触发的函数（比如点击事件、循环渲染逻辑）中。
• 排查代码中是否有其他重复绑定的场景，比如路由切换时重新初始化socket并绑定事件，导致多个监听实例共存。

另外可以顺带检查下服务端是否存在重复调用emit的逻辑，但这种情况概率较低，优先排查客户端的重复绑定问题。

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