基于 HTTP 的单向流式通信协议SSE详解

SSE（Server-Sent Events）详解

🧠 什么是 SSE？

SSE（Server-Sent Events） 是 HTML5 标准中定义的一种通信机制，它允许服务器主动将事件推送给客户端（浏览器）。与传统的 HTTP 请求-响应不同，SSE 是一种基于 HTTP 的单向流式通信协议。

📌 核心特性

特性	描述
通信方式	单向：服务器 → 客户端
连接类型	持久的 HTTP 长连接
数据格式	文本（MIME 类型：`text/event-stream`）
自动重连	浏览器自动支持
底层协议	HTTP/1.1，兼容 HTTP 代理、缓存、身份验证
建立方式	浏览器端使用 `EventSource` 对象

🧱 通信流程（架构图）

浏览器（客户端）
└── 发起 HTTP GET 请求（Accept: text/event-stream）↓
服务器端（保持连接）
└── 每当有事件，推送：data: xxxid: 1event: myEventretry: 3000[连接不断，服务器持续发送，客户端持续接收]

🧪 示例详解

1. 客户端（JS）

const source = new EventSource('/events');source.onmessage = (event) => {console.log('默认消息:', event.data);
};source.addEventListener('update', (event) => {console.log('收到 update 事件:', event.data);
});source.onerror = (err) => {console.error('连接异常', err);
};

2. 服务器端（Node.js 示例）

app.get('/events', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');res.write('retry: 5000\n'); // 自动重连时间res.write('event: update\n');res.write(`data: 你好，客户端\n\n`);const interval = setInterval(() => {res.write(`data: 当前时间 ${new Date().toISOString()}\n\n`);}, 3000);req.on('close', () => {clearInterval(interval);res.end();});
});

🎯 典型应用场景

场景	描述
实时通知系统	消息推送、任务进度提醒
实时监控面板	日志、CPU、内存、API 状态
数据大屏	股票/气象/新闻流更新
聊天室（只读方）	只需服务器广播消息
DevTools/日志监听	构建日志实时显示

📄 SSE 消息格式

event: update
id: 12345
retry: 5000
data: 你好
data: 世界

字段说明

字段	说明
`data:`	消息内容，可多行，客户端拼接为一条
`event:`	事件名称，配合 JS 的 `addEventListener` 使用
`id:`	消息 ID，客户端会自动缓存用于断线续传
`retry:`	告诉浏览器下次重连时间（ms）

🧰 与 WebSocket 对比

对比项	SSE	WebSocket
通信方向	单向（服务器 → 客户端）	双向
协议	基于 HTTP	使用 ws:// 或 wss://（非 HTTP）
使用复杂度	简单（浏览器原生支持）	需要手动管理消息格式、连接状态
数据格式	纯文本（`text/event-stream`）	文本或二进制
自动重连	浏览器原生支持	需要自行实现
代理支持	很好（HTTP 代理可用）	差（很多 HTTP 代理不支持）
应用场景	实时通知、日志流	聊天、游戏、协同操作等交互频繁的场景

📡 浏览器支持情况

浏览器	支持情况
Chrome	✅
Firefox	✅
Safari	✅
Edge（Chromium）	✅
Internet Explorer	❌ 不支持
移动端浏览器	✅（多数现代浏览器）

⚠️ 限制与注意事项

不支持 IE
只能从服务器推送
受限于 HTTP 连接数
不适合传输大量二进制数据

🔐 跨域 & 认证

使用 CORS 即可跨域支持：

Access-Control-Allow-Origin: *
Content-Type: text/event-stream

URL Token 示例：

new EventSource(`/events?token=abc123`);

📦 框架与工具支持

技术栈	支持方式
Node.js	原生、Express、NestJS
Python	Flask + `flask-sse`，Django Channels
Java	Spring WebFlux、Servlet 推送
Go	原生 `net/http`
Rust	Actix、Rocket 支持 SSE
Vue/React	用 `EventSource` 封装 Hook/Composables
Nginx	可代理 SSE，需关闭缓存，配置 `proxy_buffering off;`