从零构建ChatGPT对话前端页面：技术选型与实现详解

1次阅读

没有评论

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

在开发实时对话界面时，我们常常会遇到以下几个核心问题：

消息排序 ：在多用户并发场景下，确保消息按照正确的时间顺序显示
流式响应 ：处理 AI 生成内容的分块传输与渐进式渲染
会话状态管理 ：维护复杂的对话上下文和临时状态

这些挑战在前端开发中尤为突出，需要我们仔细考虑技术选型和实现细节。

实时通信方案对比：

WebSocket
全双工通信
低延迟
适合高频交互场景
实现复杂度较高
SSE(Server-Sent Events)
服务器单向推送
基于 HTTP 协议
自动重连机制
适合内容更新不频繁的场景
长轮询
兼容性最好
资源消耗大
延迟较高

对于 ChatGPT 类应用，WebSocket 和 SSE 都是不错的选择。WebSocket 适合需要双向通信的场景，而 SSE 在只需要接收服务器推送时更简单高效。

flowchart TD
    App --> ChatContainer
    ChatContainer --> MessageList
    ChatContainer --> InputArea
    MessageList --> MessageItem
    InputArea --> SendButton

function MessageList({messages}) {
  return (
    <div className="message-container">
      {messages.map((msg, index) => (
        <MessageItem 
          key={`msg-${index}-${msg.timestamp}`}
          message={msg}
          isAI={msg.sender === 'ai'}
        />
      ))}
    </div>
  );
}

interface ChatSession {
  id: string;
  createdAt: number;
  messages: Array<{
    content: string;
    sender: 'user' | 'ai';
    timestamp: number;
  }>;
}

const saveSession = (session: ChatSession) => {
  try {const sessions = JSON.parse(localStorage.getItem('chatSessions') || '[]');
    const updated = sessions.filter(s => s.id !== session.id).concat(session);
    localStorage.setItem('chatSessions', JSON.stringify(updated));
  } catch (error) {console.error('Failed to save session', error);
  }
};

去重：基于消息 ID 和时间戳双重校验
排序：使用稳定排序算法保证时序
节流：限制高频更新触发重新渲染

const processIncomingMessages = (current: Message[], 
  incoming: Message[],
  throttle = 300
): Message[] => {
  // 去重逻辑
  const uniqueMessages = incoming.filter(
    newMsg => !current.some(existing => existing.id === newMsg.id)
  );

  // 合并并排序
  const merged = [...current, ...uniqueMessages].sort((a, b) => a.timestamp - b.timestamp
  );

  // 节流控制
  if (Date.now() - lastRenderTime < throttle) {return current;}

  lastRenderTime = Date.now();
  return merged;
};

实现指数退避重连机制
添加心跳检测
提供用户手动重连按钮

const setupWebSocket = (url) => {
  let retries = 0;
  const maxRetries = 5;

  const connect = () => {const ws = new WebSocket(url);

    ws.onclose = () => {const delay = Math.min(5000, 1000 * Math.pow(2, retries));
      if (retries < maxRetries) {setTimeout(connect, delay);
        retries++;
      }
    };

    return ws;
  };

  return connect();};

const sanitizeInput = (text: string): string => {
  const patterns = [/<script\b[^>]*>([\s\S]*?)<\/script>/gi,
    /on\w+=".*?"/gi
  ];

  return patterns.reduce((acc, pattern) => acc.replace(pattern, ''), 
    text
  );
};

import React, {useState, useEffect, useCallback} from 'react';

interface Message {
  id: string;
  content: string;
  sender: 'user' | 'ai';
  timestamp: number;
}

const ChatApp: React.FC = () => {const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [ws, setWs] = useState<WebSocket | null>(null);

  useEffect(() => {const socket = new WebSocket('wss://api.example.com/chat');

    socket.onmessage = (event) => {const data = JSON.parse(event.data);
      setMessages(prev => [...prev, data]);
    };

    setWs(socket);

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

  const sendMessage = useCallback(() => {if (!input.trim() || !ws) return;

    const msg: Message = {id: Date.now().toString(),
      content: input,
      sender: 'user',
      timestamp: Date.now(),};

    ws.send(JSON.stringify(msg));
    setMessages(prev => [...prev, msg]);
    setInput('');
  }, [input, ws]);

  return (
    <div className="chat-app">
      <MessageList messages={messages} />
      <div className="input-area">
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
};