从零构建Agent Chat UI：React实战与架构设计指南

1次阅读

没有评论

共计 2570 个字符，预计需要花费 7 分钟才能阅读完成。

在构建实时聊天 UI 时，开发者常会遇到以下几个典型问题：

消息闪烁 ：快速连续收到多条消息时，由于 React 的频繁重渲染，UI 会出现闪烁现象
时序错位 ：网络延迟或并发处理不当会导致消息显示顺序与发送顺序不一致
离线恢复 ：用户断网后重新连接时，如何准确恢复未读消息和会话状态
跨设备同步 ：同一账户在多设备登录时的消息同步和状态一致性问题

这些问题在客服系统、AI 助手等场景中尤为突出，直接影响到用户体验和系统可靠性。

全双工通信，适合高频双向数据交换
低延迟（50-200ms），服务器可主动推送
需要单独维护连接状态

仅服务器向客户端单向推送
基于 HTTP 协议，兼容性更好
不支持双向通信

兼容性最佳，所有浏览器支持
高延迟（1- 5 秒），服务器压力大
实现简单但效率低下

选择 WebSocket+React 的理由 ：
1. Agent Chat 场景需要频繁的双向通信
2. React 的虚拟 DOM 能有效处理频繁 UI 更新
3. 现代浏览器对 WebSocket 支持良好

interface ChatState {messages: Message[];
  connectionStatus: 'connecting' | 'connected' | 'disconnected';
  unreadCount: number;
  // ... 其他状态
}

const chatReducer = (state: ChatState, action: ChatAction) => {switch (action.type) {
    case 'MESSAGE_RECEIVED':
      return {
        ...state,
        messages: [...state.messages, action.payload],
        unreadCount: state.unreadCount + 1
      };
    // ... 其他 action 处理
  }
};

消息 ID 生成策略 ：
1. 客户端生成：UUID v4 + 时间戳前缀
2. 服务端生成：递增序列号 + 服务器 ID

// 消息去重示例
const handleNewMessage = (newMessage: Message) => {
  setMessages(prev => {if (prev.some(msg => msg.id === newMessage.id)) return prev;
    return [...prev, newMessage];
  });
};

// 使用 react-window 实现虚拟列表
import {FixedSizeList as List} from 'react-window';

const MessageList = ({messages}) => (
  <List
    height={600}
    itemCount={messages.length}
    itemSize={80}
    width="100%"
  >
    {({index, style}) => (<div style={style}>
        <MessageItem message={messages[index]} />
      </div>
    )}
  </List>
);

class WebSocketManager {
  private socket: WebSocket | null = null;
  private reconnectAttempts = 0;
  private readonly maxReconnectAttempts = 5;

  connect(url: string) {this.socket = new WebSocket(url);

    this.socket.onopen = () => {console.log('WebSocket 连接已建立');
      this.reconnectAttempts = 0;
      // 开始心跳检测
      this.startHeartbeat();};

    this.socket.onclose = () => {if (this.reconnectAttempts < this.maxReconnectAttempts) {const delay = Math.min(1000 * 2 ** this.reconnectAttempts, 30000);
        setTimeout(() => this.connect(url), delay);
        this.reconnectAttempts++;
      }
    };
  }

  private startHeartbeat() {const interval = setInterval(() => {if (this.socket?.readyState === WebSocket.OPEN) {this.socket.send(JSON.stringify({ type: 'heartbeat'}));
      } else {clearInterval(interval);
      }
    }, 30000); // 30 秒心跳
  }
}