从零构建类ChatGPT前端：技术选型与实现细节解析

2次阅读

没有评论

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

构建一个类 ChatGPT 的前端界面，看似简单，实则面临诸多技术挑战。实时对话 UI 与传统网页应用的最大区别在于对即时性和交互性的高要求。具体来说，我们需要解决以下几个核心问题：

消息流处理：如何高效处理服务器推送的连续消息片段
实时渲染优化：避免频繁 DOM 操作导致的性能瓶颈
状态管理：维护复杂的对话历史和多轮交互状态
网络稳定性：在弱网环境下保证消息的可靠传输

WebSocket
全双工通信，最适合实时对话场景
保持持久连接，减少握手开销
支持二进制和文本数据传输
Server-Sent Events (SSE)
服务器单向推送
基于 HTTP，兼容性更好
不支持双向通信
长轮询
兼容性最佳
高延迟，资源消耗大
不适合高频交互场景

基于以上分析，我们选择 WebSocket 作为核心通信协议，它完美契合实时对话的需求，同时现代浏览器对其支持度已达 98% 以上。

使用 Vite 创建 React+TypeScript 项目：

npm create vite@latest chatgpt-ui --template react-ts

// websocket.service.ts
class WebSocketService {
  private socket: WebSocket | null = null;
  private messageQueue: string[] = [];

  connect(url: string): Promise<WebSocket> {return new Promise((resolve, reject) => {this.socket = new WebSocket(url);

      this.socket.onopen = () => {this.flushMessageQueue();
        resolve(this.socket!);
      };

      this.socket.onerror = (error) => {reject(error);
      };
    });
  }

  sendMessage(message: string): void {if (this.socket?.readyState !== WebSocket.OPEN) {this.messageQueue.push(message);
      return;
    }

    this.socket.send(JSON.stringify({
      type: 'user_message',
      content: message
    }));
  }

  private flushMessageQueue(): void {while (this.messageQueue.length > 0) {const message = this.messageQueue.shift();
      this.socket?.send(JSON.stringify({
        type: 'user_message',
        content: message
      }));
    }
  }
}

// useChatStore.ts
import {create} from 'zustand';

type Message = {
  id: string;
  content: string;
  role: 'user' | 'assistant';
  timestamp: number;
};

type ChatState = {messages: Message[];
  addMessage: (message: Message) => void;
  updateLastMessage: (content: string) => void;
};

const useChatStore = create<ChatState>((set, get) => ({messages: [],

  addMessage: (message) => {set((state) => ({messages: [...state.messages, message]
    }));
  },

  updateLastMessage: (content) => {set((state) => {const lastMessage = state.messages[state.messages.length - 1];
      if (!lastMessage) return state;

      return {
        messages: [...state.messages.slice(0, -1),
          {
            ...lastMessage,
            content: lastMessage.content + content
          }
        ]
      };
    });
  }
}));

// MessageStream.tsx
import {useEffect, useRef} from 'react';
import {useChatStore} from './useChatStore';

const MessageStream = () => {const { messages} = useChatStore();
  const endRef = useRef<HTMLDivElement>(null);

  useEffect(() => {endRef.current?.scrollIntoView({ behavior: 'smooth'});
  }, [messages]);

  return (
    <div className="message-container">
      {messages.map((message) => (
        <div 
          key={message.id} 
          className={`message ${message.role}`}
        >
          {message.content}
        </div>
      ))}
      <div ref={endRef} />
    </div>
  );
};

当对话历史较长时，我们需要实现虚拟滚动来优化性能：

// VirtualMessageList.tsx
import {FixedSizeList} from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

const VirtualMessageList = ({messages}) => {const Row = ({ index, style}) => (<div style={style} className={`message ${messages[index].role}`}>
      {messages[index].content}
    </div>
  );

  return (
    <AutoSizer>
      {({height, width}) => (
        <FixedSizeList
          height={height}
          width={width}
          itemSize={80}
          itemCount={messages.length}
        >
          {Row}
        </FixedSizeList>
      )}
    </AutoSizer>
  );
};

对于快速连续的用户输入，我们可以实施请求合并：

// debounceSend.ts
let sendTimer: NodeJS.Timeout | null = null;
const DEBOUNCE_TIME = 300; // ms

const debounceSend = (message: string, sendFn: (msg: string) => void) => {if (sendTimer) {clearTimeout(sendTimer);
  }

  sendTimer = setTimeout(() => {sendFn(message);
    sendTimer = null;
  }, DEBOUNCE_TIME);
};

WebSocket 重连问题
实现指数退避重连机制
监听 onclose 事件并自动重连
最大重试次数限制避免无限循环
消息顺序错乱
为每条消息添加序列号
客户端维护消息队列缓冲区
按序列号处理确保顺序正确
内存泄漏
及时清理未完成的请求
组件卸载时取消订阅
限制历史消息存储数量
跨平台兼容性
检测浏览器 WebSocket 支持情况
准备 SSE 降级方案
移动端注意心跳保活

使用 react-markdown 库实现 Markdown 解析：

import ReactMarkdown from 'react-markdown';

const MarkdownMessage = ({content}) => (
  <ReactMarkdown components={{code({node, inline, className, children, ...props}) {
      return inline ? (<code className="inline-code" {...props}>
          {children}
        </code>
      ) : (
        <pre className="code-block">
          <code className={className} {...props}>
            {children}
          </code>
        </pre>
      );
    }
  }}>
    {content}
  </ReactMarkdown>
);

结合 prismjs 实现语法高亮：

import {useEffect, useRef} from 'react';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-typescript';

const CodeBlock = ({language, code}) => {const codeRef = useRef(null);

  useEffect(() => {if (codeRef.current) {Prism.highlightElement(codeRef.current);
    }
  }, [code, language]);

  return (<pre className={`language-${language}`}>
      <code ref={codeRef} className={`language-${language}`}>
        {code}
      </code>
    </pre>
  );
};

构建类 ChatGPT 前端界面涉及多个技术领域的深度整合。从实时通信协议的选择到消息流的处理，再到性能优化和扩展功能支持，每个环节都需要精心设计。本文介绍的基于 React+TypeScript+WebSocket 的技术栈，经过生产环境验证，能够提供流畅的对话体验。

未来可能的优化方向包括：