SSE 流式接口讲解

SSE 流式接口

1. 一句话定义

SSE = Server-Sent Events，服务器主动向浏览器推送数据流的技术

• 只用于：服务器 → 客户端 单向推送
• 典型场景：AI 打字机效果、实时通知、日志滚动、直播弹幕
• 你看到的豆包/DeepSeek/ChatGPT 回复，全都是 SSE

---

2. 核心特点（必须记住）

✅ 基于 HTTP ，不需要 WebSocket

✅ 服务器主动推流 ，前端自动接收

✅ 天然支持断线重连

✅ 非常适合文本流、AI 流式输出

❌ 只能服务器→客户端 ，不能双向

❌ 不适合超低延迟游戏（用 WS）

---

3. 前端怎么用？（代码直接复制）

前端接收 SSE 流（最简版）

// 1. 创建 SSE 连接
const evtSource = new EventSource('/api/stream');

// 2. 接收消息（核心）
evtSource.onmessage = (e) => {
  const data = e.data; 
  console.log('收到流数据：', data);
  // AI 场景：直接把数据追加到页面 → 打字机效果
  document.body.innerHTML += data;
};

// 3. 错误处理
evtSource.onerror = (err) => {
  console.error('SSE 出错', err);
  evtSource.close(); // 关闭连接
};

// 4. 手动关闭
// evtSource.close()

---

4. 服务器返回格式（必须严格遵守！）

SSE 不是随便返回的，格式是固定协议：

data: 你好\n\n
data: 我是\n\n
data: AI\n\n

规则：

• 每一段必须以 data: 开头
• 必须以 两个换行 \n\n 结束
• 只能传字符串（JSON 要转字符串）

如果返回 JSON：

data: {"content":"你好"}\n\n

---

5. 最常用场景：AI 流式输出（打字机效果）

前端代码（完整版）

const sse = new EventSource('/api/ai-chat');
let result = '';

sse.onmessage = (e) => {
  try {
    const data = JSON.parse(e.data);
    result += data.content; // 追加文字
    renderToUI(result); // 实时渲染到页面
  } catch (err) {}
};

// 结束标识
sse.addEventListener('close', () => {
  sse.close();
});

服务器返回流示例

data: {"content":"大"}

data: {"content":"家"}

data: {"content":"好"}

data: {"content":"！"}

data: "[DONE]"

---

6. SSE 关键请求头（面试/抓包必考）

你在浏览器看到的：

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

这三个就是 SSE 标志。

---

7. SSE vs WebSocket（最简单对比）

特性	SSE	WebSocket
方向	服务器 → 客户端	双向
协议	HTTP	WS 独立协议
复杂度	极低	较高
断线重连	自动	手动
适用场景	AI流、通知、日志	聊天、游戏、实时协作

结论：AI 流式回答 → 永远选 SSE

---

8. 你之前的截图是什么？

就是 SSE 接口：

• Content-Type: text/event-stream
• 服务器不断推流
• 前端一段一段接收 → 拼成最终回答

---

9. 超简总结（背会就能面试/开发）

1. SSE = 服务器推流技术
2. 用于 AI 打字机、实时日志
3. 前端用 new EventSource(url) 接收
4. 服务器返回 data: xxx\n\n 格式
5. 只进不出，简单稳定