60.AI流式回答功能前端实现
1. 核心机制
前端主要通过fetch API
和SSE (Server-Sent Events)
技术实现流式响应处理:
-
初始化流式连接:
- 使用
fetch
发起POST请求到/api/chat/stream
端点 - 设置
Content-Type: application/json
头部 - 请求体包含对话历史、当前会话ID等信息
- 使用
-
处理流式响应:
- 获取响应体的
ReadableStream
读取器 - 使用
TextDecoder
解码数据块 - 按行处理SSE格式的数据(
data:
前缀) - 实时更新UI显示部分响应内容
- 获取响应体的
2. UI更新策略
- 消息容器:使用Vue的响应式数据绑定实时更新消息内容
- 加载指示器:显示动画点指示正在接收响应
- 自动滚动:每次内容更新后自动滚动到底部
- Markdown实时渲染:使用
marked
库即时渲染Markdown格式
主要代码: