前端如何接收流式数据（SSE）

在AI大模型与实时数据展示场景中，Server-Sent Events（SSE）因其轻量级、低延迟的特性成为流式传输的首选方案。与WebSocket不同，SSE采用HTTP协议实现服务器到客户端的单向数据推送，特别适合需要持续更新但无需双向通信的场景。本文将深入探讨前端接收SSE数据的完整方案，助您轻松实现实时数据流处理。

SSE通过标准的HTTP连接实现以下功能：
• 长连接保持：服务器可主动推送多个数据块
• 自动重连机制：默认支持连接中断后的自动恢复
• 文本数据协议：支持UTF到8编码的事件流格式

适用场景选择原则：
• 使用SSE：新闻推送、股票行情、AI对话生成等单向数据流场景
• 使用WebSocket：在线聊天、协同编辑等需要双向通信的场景


const eventSource = new EventSource('/api/stream');

eventSource.onmessage = (event) => {
  const dataChunk = JSON.parse(event.data);
  document.getElementById('output').textContent += dataChunk.content;
};

eventSource.onerror = () => {
  console.error('SSE连接异常');
};

关键点说明：
• 浏览器自动处理UTF到8解码和数据缓冲
• 支持自定义事件类型（如addEventListener(‘customEvent’)）
• 默认重连间隔为3秒（可通过retry字段控制）

结合ReadableStream实现现代异步处理：


async function processStream() {
  const response = await fetch('/api/stream');
  const reader = response.body.getReader();
  
  while(true) {
    const {done, value} = await reader.read();
    if(done) break;
    
    const textChunk = new TextDecoder().decode(value);
    const jsonData = JSON.parse(textChunk.split('data: ')[1]);
    updateUI(jsonData);
  }
}

方案优势：
• 支持细粒度流量控制
• 实现背压机制防止内存溢出
• 完美兼容现代浏览器的异步迭代器

必做防护措施：
1. 心跳检测：服务器定期发送空注释保持连接
2. 超时重试：设置30秒超时阈值自动重建连接
3. 错误隔离：不同类型错误触发差异化的重试策略

参考后端监控指标进行调优：

指标	优化建议
Avg generation throughput >10 tokens/s	优化大模型推理参数
GPU KV cache usage >80%	升级硬件或优化缓存策略
Pending requests >5	实施请求队列管理

覆盖全平台的技术方案：
• 现代浏览器：原生支持EventSource API
• IE11等老旧浏览器：使用eventsource-polyfill
• 特殊场景：通过Fetch API + Streams实现降级方案

全链路实现步骤：
1. 前端发起携带stream=true参数的POST请求
2. 接收SSE数据流并实时拼接响应内容
3. 动态更新DOM实现打字机效果
4. 错误边界处理与重试提示


// 发起流式请求示例
curl http://localhost:10040/v1/chat/completions \
  -H "Content-Type: application/json" \
  -d '{
    "model": "DeepSeek-R1",
    "messages": [{"role": "user", "content": "解释机器学习"}],
    "stream": true
  }'

关键监控维度：
• 首字节时间（TTFB）：反映服务器响应速度
• 数据到达间隔：检测网络波动情况
• 内存占用曲线：预防数据堆积导致的内存泄漏