前端实现流式AI对话的方法
使用WebSocket建立双向通信
WebSocket协议适合实时数据传输，后端通过分块（chunk）推送AI生成的流式响应。前端通过new WebSocket(url)建立连接，监听onmessage事件逐段接收数据并更新UI。
const socket = new WebSocket('wss://api.example.com/chat'); socket.onmessage = (event) => { const chunk = event.data; document.getElementById('output').innerText += chunk; };SSE（Server-Sent Events）单向流式接收
SSE基于HTTP协议，适用于后端单向推送场景。前端使用EventSource监听流式数据，通过onmessage回调更新内容。
const eventSource = new EventSource('/api/stream'); eventSource.onmessage = (e) => { document.getElementById('output').innerText += e.data; };Fetch API结合ReadableStream
现代浏览器支持通过Fetch API的response.body获取可读流，逐块解析数据。适用于兼容HTTP/2或HTTP/3的场景。
fetch('/api/stream').then(async (response) => { const reader = response.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; const text = new TextDecoder().decode(value); document.getElementById('output').innerText += text; } });关键优化点
UI渲染性能
避免频繁DOM操作，使用documentFragment或requestAnimationFrame批量更新。对于长文本，考虑虚拟滚动技术。
中断与重连机制
为WebSocket或SSE添加onclose和onerror监听，实现自动重连。记录已接收数据位置以便断点续传。
let retryCount = 0; function connect() { const socket = new WebSocket('wss://api.example.com/chat'); socket.onclose = () => { setTimeout(connect, Math.min(1000 * retryCount, 5000)); retryCount++; }; }错误处理与用户体验
网络状态提示
实时显示连接状态（如"连接中"、"在线"、"重连中"），通过CSS动画增强感知。
数据格式协商
与后端约定Content-Type: text/event-stream（SSE）或自定义二进制协议（WebSocket），确保前后端数据解析一致。
安全与兼容性
跨域问题
确保后端配置CORS头部（如Access-Control-Allow-Origin），WebSocket使用wss协议加密传输。
降级方案
对于不支持流式API的客户端，提供长轮询（long polling）作为备选方案，定期请求增量数据。
