React Fetch API 实现流式聊天功能全攻略1. 流式聊天技术概述在现代Web应用中实时交互体验越来越受到重视。传统的聊天功能通常采用轮询或WebSocket技术但对于AI对话这类场景流式传输(Streaming)提供了更优雅的解决方案。流式传输的核心优势在于实时性数据分块传输用户可以立即看到部分响应效率减少等待时间提升用户体验资源节省避免一次性传输大量数据在React中实现流式聊天主要依赖以下几个关键技术点Fetch API的ReadableStream接口TextDecoder处理二进制流React的状态管理和渲染优化错误处理和边界情况考虑2. 项目环境搭建2.1 初始化React项目首先创建一个新的React项目npx create-react-app stream-chat --template typescript cd stream-chat npm install antd ant-design/icons ahooks react-markdown remark-gfm2.2 基础组件结构我们创建一个基础的聊天界面组件import { useState, useRef, useEffect } from react; import { Input, Button, message } from antd; import { ArrowUpOutlined, LoadingOutlined, CopyOutlined, RedoOutlined } from ant-design/icons; import Markdown from react-markdown; import remarkGfm from remark-gfm; interface Message { type: user | ai; content: string; timestamp: number; } const ChatInterface () { const [messages, setMessages] useStateMessage[]([]); const [input, setInput] useState(); const [loading, setLoading] useState(false); const messagesEndRef useRefHTMLDivElement(null); // 自动滚动到底部 useEffect(() { messagesEndRef.current?.scrollIntoView({ behavior: smooth }); }, [messages]); return ( div classNamechat-container div classNamemessages {messages.map((msg, index) ( div key{index} className{message ${msg.type}} {msg.content} /div ))} div ref{messagesEndRef} / /div div classNameinput-area Input.TextArea value{input} onChange{(e) setInput(e.target.value)} placeholder输入你的问题... autoSize{{ minRows: 2, maxRows: 6 }} / Button typeprimary icon{ArrowUpOutlined /} loading{loading} 发送 /Button /div /div ); };3. 流式API的核心实现3.1 处理ReadableStream流式API的核心在于正确处理Fetch返回的ReadableStreamconst fetchStream async (question: string) { setLoading(true); try { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ question }), }); if (!response.ok) throw new Error(请求失败); if (!response.body) throw new Error(无法读取响应流); const reader response.body.getReader(); const decoder new TextDecoder(); let aiMessage ; // 添加AI消息占位 setMessages(prev [...prev, { type: ai, content: aiMessage, timestamp: Date.now() }]); while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); aiMessage chunk; // 更新最后一条AI消息 setMessages(prev { const newMessages [...prev]; newMessages[newMessages.length - 1].content aiMessage; return newMessages; }); } } catch (error) { message.error(请求出错: error.message); } finally { setLoading(false); } };3.2 优化渲染性能流式响应会导致频繁的状态更新我们需要优化渲染性能防抖处理可以添加简单的防抖逻辑减少渲染次数使用useReducer对于复杂状态逻辑useReducer比useState更高效虚拟列表消息很多时考虑使用虚拟滚动// 使用防抖的更新函数 const debouncedUpdateMessage useMemo( () debounce((newContent: string) { setMessages(prev { const newMessages [...prev]; newMessages[newMessages.length - 1].content newContent; return newMessages; }); }, 100), [] ); // 在流处理循环中使用 while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); aiMessage chunk; debouncedUpdateMessage(aiMessage); }4. 高级功能实现4.1 打字机效果为AI响应添加打字机效果可以提升用户体验const [typing, setTyping] useState(false); const simulateTyping (text: string) { setTyping(true); let displayedText ; let index 0; const typeInterval setInterval(() { if (index text.length) { displayedText text.charAt(index); setMessages(prev { const newMessages [...prev]; newMessages[newMessages.length - 1].content displayedText; return newMessages; }); index; } else { clearInterval(typeInterval); setTyping(false); } }, 30); // 控制打字速度 }; // 在流处理完成后调用 if (!typing) { simulateTyping(aiMessage); }4.2 错误处理与重试机制健壮的错误处理是生产级应用的关键const MAX_RETRIES 3; const fetchWithRetry async (question: string, retries 0) { try { await fetchStream(question); } catch (error) { if (retries MAX_RETRIES) { await new Promise(resolve setTimeout(resolve, 1000 * (retries 1))); return fetchWithRetry(question, retries 1); } message.error(请求失败: ${error.message}); setMessages(prev [...prev, { type: ai, content: 抱歉服务暂时不可用请稍后再试, timestamp: Date.now() }]); } };4.3 Markdown渲染优化使用react-markdown渲染AI返回的Markdown内容Markdown remarkPlugins{[remarkGfm]} components{{ code({node, inline, className, children, ...props}) { return inline ? ( code className{className} {...props} {children} /code ) : ( pre className{className} code {...props}{children}/code /pre ); } }} {message.content} /Markdown5. 性能优化与最佳实践5.1 缓存策略实现简单的对话缓存可以提升用户体验const [conversationId, setConversationId] useState(); // 在发送请求前生成会话ID const handleSend () { if (!input.trim()) return; const newConversationId conversationId || generateId(); setConversationId(newConversationId); setMessages(prev [...prev, { type: user, content: input, timestamp: Date.now() }]); fetchWithRetry(input, newConversationId); setInput(); }; // 生成唯一ID const generateId () { return Date.now().toString(36) Math.random().toString(36).substring(2); };5.2 网络状态检测添加网络状态检测提升健壮性useEffect(() { const handleOnline () { if (navigator.onLine messages.some(m m.type ai m.content 网络已断开)) { message.success(网络连接已恢复); } }; const handleOffline () { message.warning(网络连接已断开); setMessages(prev [...prev, { type: ai, content: 网络已断开请检查您的网络连接, timestamp: Date.now() }]); }; window.addEventListener(online, handleOnline); window.addEventListener(offline, handleOffline); return () { window.removeEventListener(online, handleOnline); window.removeEventListener(offline, handleOffline); }; }, [messages]);5.3 移动端优化针对移动设备的特殊优化// 在输入组件中添加移动端优化 Input.TextArea value{input} onChange{(e) setInput(e.target.value)} placeholder输入你的问题... autoSize{{ minRows: 2, maxRows: 6 }} onKeyPress{(e) { if (e.key Enter !e.shiftKey !isMobile()) { e.preventDefault(); handleSend(); } }} / // 检测移动设备 const isMobile () { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ); };6. 样式与用户体验优化6.1 聊天界面样式使用CSS-in-JS方案优化聊天界面const useStyles createStyles({ chatContainer: { display: flex, flexDirection: column, height: 100vh, maxWidth: 800, margin: 0 auto, padding: 16, }, messages: { flex: 1, overflowY: auto, padding: 16px 0, }, message: { marginBottom: 12, padding: 8px 12px, borderRadius: 8, maxWidth: 80%, wordBreak: break-word, }, user: { alignSelf: flex-end, backgroundColor: #1890ff, color: white, }, ai: { alignSelf: flex-start, backgroundColor: #f0f0f0, color: #333, }, inputArea: { display: flex, gap: 8, padding: 8px 0, }, });6.2 加载状态优化添加优雅的加载状态指示// 在AI消息组件中添加加载指示器 {loading messages[messages.length - 1].type ai ( div classNametyping-indicator span classNamedot/span span classNamedot/span span classNamedot/span /div )} // 对应的CSS .typing-indicator { display: flex; padding: 8px; } .dot { width: 8px; height: 8px; margin: 0 2px; background-color: #999; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }7. 部署与生产环境考虑7.1 API端点配置使用环境变量管理API端点const API_URL process.env.REACT_APP_API_URL || /api/chat; const fetchStream async (question: string) { const response await fetch(API_URL, { // ...其他配置 }); // ...处理流 };7.2 安全考虑确保API通信安全始终使用HTTPS添加CSRF保护实现速率限制考虑使用JWT进行认证const fetchStream async (question: string) { const token localStorage.getItem(authToken); const response await fetch(API_URL, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${token}, X-CSRF-Token: getCSRFToken(), }, body: JSON.stringify({ question }), credentials: include, }); // ...处理流 };7.3 监控与日志添加前端监控和错误日志const logError (error: Error, context: object) { if (process.env.NODE_ENV production) { // 发送到错误监控服务 fetch(/api/log-error, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ error: error.toString(), stack: error.stack, context, timestamp: new Date().toISOString(), }), }); } else { console.error(Error:, error, context); } }; // 在catch块中使用 try { // ...API调用 } catch (error) { logError(error, { question, conversationId }); // ...处理错误 }