前端接收流式数据的完整方案（SSE/WebSocket/Fetch API）

一、流式数据

什么是流式数据？

• 数据分多次传输，无需等待完整内容即可开始处理
• 典型场景：实时日志、股票行情、AI生成内容（如ChatGPT逐字输出）

二、5种主流实现方案

1. Server-Sent Events (SSE)

特点：

• 单向通信（服务端→客户端）
• 基于HTTP协议，自动重连
• 兼容性：除IE外主流浏览器均支持

代码示例：

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

// 接收消息
eventSource.onmessage = (event) => {
  console.log('New data:', event.data);
};

// 自定义事件类型
eventSource.addEventListener('stockUpdate', (e) => {
  const data = JSON.parse(e.data);
  updateStockChart(data);
});

// 错误处理
eventSource.onerror = () => {
  console.error('Stream failed');
};

服务端要求：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

2. WebSocket

特点