SSE 流式接口讲解

SSE 流式接口

1. 一句话定义

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

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

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

✅ 基于 HTTP ，不需要 WebSocket

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

✅ 天然支持断线重连

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

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

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

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

前端接收 SSE 流（最简版）

javascript 复制代码

// 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 流式输出（打字机效果）

前端代码（完整版）

javascript 复制代码

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. 超简总结（背会就能面试/开发）

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