Socket IO实时聊天应用：如何将消息追加到对应聊天页面DOM

核心思路是用全局状态管理所有聊天会话的消息数据，让React基于数据自动渲染DOM，而非直接操作DOM。具体实现步骤如下：

1. 设计全局会话数据结构 #

在前端（比如App根组件或全局状态容器）中维护一个对象，以对方用户ID为key，对应的值是该会话的消息数组。示例结构：

const conversations = {
  "322": [ // test2的ID
    { senderId: "322", content: "嗨test1", timestamp: Date.now() },
    { senderId: "32d2", content: "嗨test2", timestamp: Date.now() }
  ],
  "333dw2": [ // test3的ID
    { senderId: "333dw2", content: "test1在吗？", timestamp: Date.now() }
  ]
};

2. 接收Socket消息时更新全局状态 #

不管当前处于哪个聊天页面，收到消息后直接更新全局的conversations，而不是只操作当前页面的DOM。示例代码（结合React Context的简化版）：

// 全局Context定义
import { createContext, useState, useEffect } from 'react';
import io from 'socket.io-client';

export const ChatContext = createContext();

export function ChatProvider({ children }) {
  const [conversations, setConversations] = useState({});
  const socket = io('http://your-backend-url');

  useEffect(() => {
    // 监听服务器发送的消息
    socket.on('send message', (msg) => {
      // 假设msg包含senderId（对方用户ID）、content、timestamp等字段
      setConversations(prev => {
        const targetUserId = msg.senderId;
        return {
          ...prev,
          // 若该会话不存在则新建数组，否则追加新消息
          [targetUserId]: [...(prev[targetUserId] || []), msg]
        };
      });
    });

    return () => socket.disconnect();
  }, [socket]);

  return (
    <ChatContext.Provider value={{ conversations, socket }}>
      {children}
    </ChatContext.Provider>
  );
}

3. 聊天页面基于路由参数渲染对应会话 #

在chat/:userId页面组件中，通过路由参数拿到目标用户ID，从全局状态中取出对应会话的消息数组，由React自动渲染DOM：

import { useParams, useContext } from 'react-router-dom';
import { ChatContext } from './ChatContext';

export function ChatPage() {
  const { userId } = useParams();
  const { conversations } = useContext(ChatContext);
  // 若该会话还没有消息，返回空数组
  const messages = conversations[userId] || [];

  return (
    <div className="chat-window">
      <h2>和{userId}聊天</h2>
      <div className="message-list">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.senderId === userId ? 'received' : 'sent'}`}>
            {msg.content}
            <span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span>
          </div>
        ))}
      </div>
      {/* 发送消息组件 */}
    </div>
  );
}

4. 可选：添加未读消息标记 #

如果需要提醒用户有未读消息，可以在全局状态中新增unreadCounts对象，记录每个会话的未读数量：

// 在ChatProvider中新增状态
const [unreadCounts, setUnreadCounts] = useState({});

// 收到消息时更新未读计数（当前页面不是该会话时）
socket.on('send message', (msg) => {
  const targetUserId = msg.senderId;
  const { pathname } = useLocation();
  const isCurrentChat = pathname === `/chat/${targetUserId}`;

  if (!isCurrentChat) {
    setUnreadCounts(prev => ({
      ...prev,
      [targetUserId]: (prev[targetUserId] || 0) + 1
    }));
  }

  // 同时更新会话消息...
});

// 切换到对应会话时清零未读计数
useEffect(() => {
  const { userId } = useParams();
  if (userId) {
    setUnreadCounts(prev => ({ ...prev, [userId]: 0 }));
  }
}, [useParams().userId]);

这样，当test1在test2的聊天页面时，test3的消息会被存入conversations['333dw2']中，当test1切换到chat/333dw2页面时，组件会自动读取最新的消息数组并渲染，就能看到test3的消息了。

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