1、背景

        DeepSeek作为当前最火的AI大模型， 使用的时候用户在输入框输入问题，大模型进行思考回答你，然后会有一个逐步显示的过程效果，而不是一次性返回整个答案给前端页面进行展示，为了搞清楚其中的原理，我们可以先来了解一下常见的几种前后端传输数据的方式：

（1）HTTP 请求（RESTful API），超文本传输协议，通过标准方法get/post请求数据，它是无状态无连接的，只能由客户端发起请求，服务端进行响应，也是最常见的传输数据方式；

（2）SSE（Server-Sent Events），基于 HTTP 的单向服务器推送协议，服务端可主动发送数据给客户端；

（3）WebSocket（全双工通信），基于 TCP 的双向实时通信协议，建立持久连接后，服务端和客户端都可以主动推送数据给对方；

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 核心特点

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 对比