Socket.IO实时聊天异常：发送方消息需接收方发消息才显示

问题根源 #

1. 消息广播范围错误：服务端使用socket.emit('message-from-server', messages)时，仅会将消息回传给发送该消息的客户端（即发送方自己），其他在线客户端无法实时收到消息通知。只有当接收方自己发送消息时，才会触发服务端返回完整消息列表，因此才会看到之前的消息。
2. 新连接客户端无历史消息同步：新打开的客户端连接后，没有主动获取历史聊天记录，必须自身发送消息才能触发服务端返回消息列表。

解决方案 #

服务端代码修改

调整服务端的Socket.IO事件处理逻辑，实现消息全局广播，并在客户端连接时主动推送历史消息：

io.on('connection', (socket) => {
    // 新客户端连接时，立即推送历史消息
    socket.emit('message-from-server', messages);
    
    socket.on('send-message', (data) => {
        messages.push(data);
        // 向所有连接的客户端广播消息（包括发送方）
        io.emit('message-from-server', messages);
        console.log(messages); 
    })
});

客户端代码优化（可选）

确保Socket连接的生命周期管理，避免内存泄漏：

useEffect(() => {
  const newSocket = io("http://localhost:3010");
  setSocket(newSocket);
  
  // 组件卸载时断开连接
  return () => {
    newSocket.disconnect();
  };
}, []);

修改说明 #

• io.emit：替代socket.emit后，服务端会将消息发送给所有当前连接的客户端，实现实时消息同步，发送方和接收方都会立刻看到新消息。
• 连接时推送历史消息：新客户端一进入聊天页面，就能获取并展示之前的全部聊天记录，无需等待自身发送消息。

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