1、背景
DeepSeek作为当前最火的AI大模型， 使用的时候用户在输入框输入问题，大模型进行思考回答你，然后会有一个逐步显示的过程效果，而不是一次性返回整个答案给前端页面进行展示，为了搞清楚其中的原理，我们可以先来了解一下常见的几种前后端传输数据的方式：
（1）HTTP 请求（RESTful API），超文本传输协议，通过标准方法get/post请求数据，它是无状态无连接的，只能由客户端发起请求，服务端进行响应，也是最常见的传输数据方式；
（2）SSE（Server-Sent Events），基于 HTTP 的单向服务器推送协议，服务端可主动发送数据给客户端；
（3）WebSocket（全双工通信），基于 TCP 的双向实时通信协议，建立持久连接后，服务端和客户端都可以主动推送数据给对方；
| 类型 | 数据返回方式 | 适用场景 | 协议基础 |
|---|---|---|---|
| 传统API | 一次性返回完整结果 | 静态数据查询 | HTTP/HTTPS |
| SSE流式接口 | 持续分片推送 | 实时对话、长文本生成 | HTTP/HTTPS |
| WebSocket | 双向实时通信 | 即时聊天、高频交互 | 独立协议 |
2、deepSeek推送数据原理
F12查看控制台，发现Network里面的接口带了一个Content-Type：text/event-stream，它就是一种事件stream流的机制，通过HTTP长连接持续推送数据片段，前端逐步接收并实时渲染内容 ，所以呈现出来的效果就跟打字机一样逐字显示，与传统一次性返回的API不同，SSE允许服务器在请求处理过程中分批次发送数据，客户端无需等待全部数据加载完成即可展示部分结果，所以结论就是deepSeek通过SSE来实现数据推送显示的
3、SSE基本概念
SSE（Server-Sent Events） 是一种基于 HTTP 的轻量级实时通信技术，SSE 允许服务器将实时更新的数据主动推送给已建立连接的客户端。在传统的 Web 交互中，通常是客户端向服务器发送请求，然后服务器返回响应，这是一种 “请求 - 响应” 模式。而 SSE 打破了这种单向的模式，使服务器能够在有新数据时主动将数据推送给客户端，无需客户端频繁地发送请求来获取更新
4、SSE 核心特点
| 特性 | 说明 |
|---|---|
| 基于 HTTP | 无需复杂协议升级，直接复用现有 HTTP 协议和端口（如 80/443）。 |
| 单向通信 | 仅支持服务端向客户端推送数据，客户端通过普通 HTTP 请求初始化连接。 |
| 自动重连 | 浏览器原生支持连接断开后自动重连（可自定义重试时间）。 |
| 文本协议 | 数据格式为纯文本（默认 UTF-8），可通过 EventSource API 解析。 |
| 简单易用 | 客户端无需额外库，浏览器原生支持（除 IE）。 |
5、SSE 使用场景
- 实时通知：订单状态更新、系统报警、邮件到达提醒。
- 动态数据推送：股票价格、新闻推送、体育赛事比分。
- 长任务进度反馈：文件上传/处理进度、AI 生成任务的分步结果。
- 简单实时看板：监控仪表盘、日志流展示。
6、实现步骤
服务端配置（Node.js 示例）
const http = require("http");
// 创建 SSE 服务
const server = http.createServer((req, res) => {
if (req.url === "/sse") {
// 设置 SSE 响应头
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive",
});
// 定期推送消息
let counter = 0;
const timer = setInterval(() => {
const data = `当前计数：${counter++}`;
// 按 SSE 格式发送数据
res.write(`data: ${data}\n\n`); // \n\n 表示消息结束
if (counter >= 5) {
clearInterval(timer);
res.end(); // 关闭连接
}
}, 1000);
} else {
res.writeHead(404);
res.end();
}
});
server.listen(3000, () => {
console.log("SSE 服务运行在 http://localhost:3000/sse");
});前端配置
// 初始化 SSE 连接
const source = new EventSource("http://localhost:3000/xxxx")
// 监听默认事件
eventSource.onmessage = (event) => {
console.log("收到数据:", event.data)
}
// 监听连接错误
eventSource.onerror = (error) => {
console.error("连接错误:", error)
}
// 监听自定义事件（需服务端发送 event: customEvent）
eventSource.addEventListener("customEvent", (event) => {
console.log("自定义事件数据:", event.data)
})7、SSE 与 WebSocket 对比
| 特性 | SSE | WebSocket |
|---|---|---|
| 协议 | HTTP（单向） | 独立协议（双向） |
| 复杂度 | 低（浏览器原生支持） | 高（需手动管理连接、心跳） |
| 数据格式 | 文本（默认 UTF-8） | 支持二进制和文本 |
| 重连机制 | 自动（可配置 retry） | 需手动实现 |
| 适用场景 | 服务端主动推送的只读场景 | 双向高频交互（如聊天、游戏） |
| 兼容性 | 不支持 IE | 广泛支持（包括现代浏览器） |
