Server-Sent Events（SSE）发展历程与技术深度剖析

*SSE（Server-Sent Events）**是一种基于HTTP协议的单向实时推送技术，允许服务器主动将数据流持续推送到浏览器。SSE是HTML5标准的一部分，核心API为，协议格式为。名词解释：：浏览器用于接收SSE流的原生对象。：SSE规定的数据流MIME类型。推送（Push）：服务器主动向客户端发送数据，不依赖客户端轮询。流式输出（Streaming）：数据分片逐步输出，适合AI大模型

北漂老男孩

780人浏览 · 2025-09-05 00:00:00

北漂老男孩 · 2025-09-05 00:00:00 发布

Server-Sent Events（SSE）发展历程与技术深度剖析

关键词：SSE、实时推送、Web标准、EventSource、text/event-stream、流式AI输出

一、概述与名词解释

1.1 什么是SSE？

**SSE（Server-Sent Events）**是一种基于HTTP协议的单向实时推送技术，允许服务器主动将数据流持续推送到浏览器。SSE是HTML5标准的一部分，核心API为EventSource，协议格式为text/event-stream。

名词解释：

EventSource：浏览器用于接收SSE流的原生对象。
text/event-stream：SSE规定的数据流MIME类型。
推送（Push）：服务器主动向客户端发送数据，不依赖客户端轮询。
流式输出（Streaming）：数据分片逐步输出，适合AI大模型token流、日志、行情等场景。

二、项目背景与发展历史

2.1 传统实时通信的局限

HTTP最初为“请求-响应”模式，实时推送需不断轮询，效率低下。
早期Comet、长轮询等方案复杂、兼容性差、资源浪费严重。

2.2 SSE的诞生与演进

发展里程碑（flowchart表示）

权威资料：

三、SSE技术原理与主流程

3.1 核心机制

状态流转（stateDiagram-v2表示）

3.2 协议与格式

HTTP持久连接
MIME类型：Content-Type: text/event-stream

数据格式：

id: 1
event: message
data: {"text": "hello"}

自动重连：客户端断线后自动重连，服务端可指定retry: ms间隔。
断点续传：利用Last-Event-ID头实现。

典型交互（sequenceDiagram表示）

四、源码详解与速记口诀

4.1 服务端核心流程（Node.js Express示例）

app.get('/stream', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  res.flushHeaders();

  let id = 0;
  const timer = setInterval(() => {
    id++;
    res.write(`id: ${id}\nevent: msg\ndata: {"text": "第${id}条消息"}\n\n`);
  }, 2000);

  req.on('close', () => {
    clearInterval(timer);
    res.end();
  });
});

速记口诀

推送流，类型先行（设置Content-Type）
头先发，流再续（flushHeaders）
id、event、data，行分隔，双换行终止（SSE协议格式）
close监听，清理现场（断线清理）

4.2 客户端核心流程

const es = new EventSource('/stream');
es.addEventListener('msg', e => {
  const data = JSON.parse(e.data);
  console.log('收到消息:', data.text);
});
es.onerror = () => {
  console.log('连接异常，自动重连中...');
};

速记口诀

EventSource一行接，监听事件解数据
异常自动重连，前端无忧

五、应用场景与调试优化

5.1 典型场景

AI流式输出：如ChatGPT逐token推送
实时监控：股票、物联网、数据大屏
日志流：后端系统实时日志
新闻/通知推送：门户网站、社交平台

5.2 调试与优化技巧

连接数限制：同源浏览器SSE连接有限，建议合并流或频道拆分。
断线重连：用Last-Event-ID支持断点续传。
代理/负载均衡：需配置proxy_buffering off避免中断。
数据格式：推荐JSON Lines/Markdown片段，易解析。
安全认证：用token参数或header鉴权。

六、与其他技术栈集成与高阶应用

技术对比	SSE	WebSocket
通信方向	单向（服务端→客户端）	双向实时
API易用性	极简（EventSource）	需协议封装
浏览器支持	主流支持，IE不支持	主流支持
代理兼容性	强，穿透CDN/代理无压力	需逐层支持WebSocket协议
实时场景	AI流式、日志、通知	在线协作、IM、游戏

与HTTP/2集成：SSE基于HTTP/1.1，HTTP/2需特别配置，避免流中断。
云原生/微服务：通过API网关暴露SSE，K8s高可用部署。
AI流式框架：OpenAI、Anthropic等流式API采用SSE标准，社区库丰富（FastAPI SSE-Star、Spring WebFlux、Go gin-sse等）。