共计 1659 个字符，预计需要花费 5 分钟才能阅读完成。
模拟 ChatGPT 界面的三大核心难点
实现类 ChatGPT 交互效果，关键在于解决三个问题：
- 流式输出 (Streaming Response)：需要模拟服务器逐字返回数据的效果，而非一次性展示全文
- 上下文管理 (Context Management)：对话需要记忆历史消息以实现连贯交流
- 状态持久化 (State Persistence)：刷新页面后应保留最近对话记录
技术方案选型
实时通信协议对比
| 特性 | WebSocket | SSE(Server-Sent Events) |
|---|---|---|
| 延迟 | 极低（全双工） | 中等（单向） |
| 兼容性 | IE10+ | 除 IE 外主流浏览器 |
| 实现复杂度 | 需维护连接状态 | 客户端实现简单 |
| 数据传输方向 | 双向通信 | 仅服务端推送 |
| 推荐场景 | 需要双向交互 | 只需接收服务器更新 |
渐进式文本渲染实现（React Hooks 版）
function TypewriterEffect({text}: {text: string}) {const [displayedText, setDisplayedText] = useState('');
useEffect(() => {
let currentIndex = 0;
let timeoutId: NodeJS.Timeout;
const typeNextChar = () => {if (currentIndex < text.length) {setDisplayedText(prev => prev + text[currentIndex]);
currentIndex++;
timeoutId = setTimeout(typeNextChar, 50); // 控制打字速度
}
};
typeNextChar();
return () => {clearTimeout(timeoutId); // 清除副作用
};
}, [text]); // 依赖项确保文本更新时重置效果
return <div>{displayedText}</div>;
}对话上下文存储方案对比
- SessionStorage 方案
- 优点：页面刷新不丢失数据
- 缺点：仅限字符串存储，5MB 限制
-
适用场景：简单 DEMO，需基础持久化
-
内存 Redux 方案
- 优点：支持复杂数据结构，方便状态管理
- 缺点：刷新后数据丢失
- 适用场景：复杂应用状态管理
关键代码实现
模拟 API 延迟服务
const mockChatAPI = (message: string): Promise<string> => {return new Promise((resolve) => {
// 模拟网络延迟（0.5- 2 秒随机）const delay = 500 + Math.random() * 1500;
setTimeout(() => {const mockResponse = ` 这是对 "${message}" 的模拟响应 `;
resolve(mockResponse);
}, delay);
});
};
// 使用示例
mockChatAPI("你好").then(response => {console.log(response);
});避坑指南
性能优化要点
-
防止重复渲染
const memoizedMessages = useMemo(() => {return messages.map(msg => ({ ...msg, id: nanoid() })); }, [messages.length]); // 仅当消息数量变化时重新计算 -
移动端长连接保活
- 添加心跳检测（每 30 秒发送 ping）
- 监听 visibilitychange 事件，页面隐藏时暂停更新
-
使用指数退避重连策略
-
内存优化方案
- 采用 LRU 缓存算法保留最近 N 条对话
- 大文本内容采用分块加载
- 超过阈值时提醒用户清理历史
进阶思考
- 交互增强 ：如何通过添加暂停按钮控制打字机效果？可以考虑：
- 使用 ref 保存当前进度
-
添加 isPaused 状态控制渲染循环
-
内容处理 ：当响应包含代码块时：
- 识别 Markdown 语法中的 “` 代码块
- 使用 highlight.js 等库实现语法高亮
- 保持代码块整体性（不逐字显示）
通过以上方案，我们就能构建一个高度仿真的 ChatGPT 前端交互 Demo。实际开发中还需要考虑错误边界、加载状态、无障碍访问等细节，这些就留给大家继续探索了。
正文完
