心跳保活Heartbeat: 15s自动重连: 3次
SSE 协议Content-Type: text/event-stream━━━━━━━━━━━━━━━━━━id | event | data | retry
分块传输编码Transfer-Encoding: chunked━━━━━━━━━━━━━━实时流式传输
HTTP/1.1 持久连接Keep-Alive: timeout=60
网络传输层 Network Layer
流式处理
核心服务
图例
协议: HTTP/SSE/WebSocket格式: JSON/NDJSON编码: UTF-8/Chunked前端: React/Vue/Svelte状态: Redux/Zustand/Jotai样式: Tailwind/CSS Animation
技术栈
用户请求 → API网关 → LLM推理 → 流式生成 ↓SSE封装 → 分块传输 → 网络推送 ↓EventSource → 增量解析 → 缓冲队列 ↓状态更新 → 打字机效果 → UI渲染
数据流向
UI展示Display━━━━━━Markdown
打字机渲染Typewriter Render━━━━━━━━━━━━Speed: 30ms/char光标动画
状态管理State Manager━━━━━━━━━━Redux | Zustand实时更新
缓冲队列Buffer Queue━━━━━━━━━━Size: 100Debounce: 50ms
流式青 #06b6d4
流解析器Stream Parser━━━━━━━━━━JSON增量解析Delta: +1 token
跨层连接
EventSource连接器━━━━━━━━onmessageonerror
客户端处理层 Client Layer
数据流
网络层
容错机制
客户端
内存管理Memory━━━━━━━━GC优化引用清理
性能监控Performance━━━━━━━━TTFT | TPSLatency
降级处理Fallback━━━━━━━━非流式响应完整内容
错误重试Retry Logic━━━━━━━━Exp BackoffMax: 3次
请求取消AbortController━━━━━━━━━━用户中断
优化与容错 Optimization & Error Handling
主色调 #1a73e8
LLM流式输出处理架构
服务端层 Server Layer
• TTFT: 首字节时间 <500ms• TPS: 每秒Token数• Buffer: 512B 缓冲区• Debounce: 50ms 防抖• Retry: 3次最大重试• Timeout: 60s 连接超时
用户请求User Request
关键参数
API网关API Gateway━━━━━━━━负载均衡 | 限流
LLM推理引擎LLM Engine━━━━━━━━━━Token: 4096Temp: 0.7
流式生成器Stream Generator━━━━━━━━━━━━增量Token产出Buffer: 512B
SSE封装器SSE Wrapper━━━━━━━━━━data: [DONE]event: message
响应输出Response━━━━━━Chunked
日志追踪Logging━━━━━━━━TraceID埋点统计
