当前位置：首页 > news >正文

deepSeek-SSE流式推送数据

news 来源：原创 2025/4/27 10:44:21

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	广泛支持（包括现代浏览器）