一、SSE 技术概述
Server-Sent Events (SSE) 是一种允许服务器向客户端实时推送数据的 Web 技术，它基于 HTTP 协议实现服务器到客户端的单向通信。
基本特点
● 单向通信：仅服务器→客户端方向
● 基于HTTP：使用标准HTTP协议，无需特殊协议
● 文本格式：默认传输UTF-8编码的文本数据
● 自动重连：内置连接中断恢复机制
● 轻量级：相比WebSocket更简单轻量
二、技术原理
1. 通信机制
SSE 通过长连接机制工作：
- 客户端建立常规HTTP连接
- 服务器保持连接打开 (Connection: keep-alive)
- 服务器通过此连接持续发送事件流
- 连接中断后客户端自动尝试重新连接
2. 协议细节
● Content-Type：text/event-stream
● Cache-Control：no-cache
● 编码：UTF-8
三、SSE 与相关技术对比
| 特性 | SSE | WebSocket | Long Polling |
|---|---|---|---|
| 通信方向 | 单向(服务器→客户端) | 双向 | 半双工 |
| 协议基础 | HTTP | 独立协议 | HTTP |
| 连接复杂度 | 简单 | 中等 | 简单 |
| 断线重连 | 自动 | 需手动实现 | 需手动实现 |
| 数据传输格式 | 文本 | 二进制/文本 | 文本 |
四、SSE 技术实现
1. 客户端实现(@microsoft/fetch-event-source)
客户端建议使用@microsoft/fetch-event-source第三方封装库实现。
fetchEventSource('http://localhost:3000/sse', {
method: 'GET',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'Accept': 'text/event-stream',
// 跨域
'Access-Control-Allow-Origin': '*',
},
onopen(response) {
},
onmessage(msg) {
},
onerror(err) {
},
onclose(res) {
},
openWhenHidden: true,
});
2. 服务端实现 (Express.js示例)
router.get('/', async function(req, res) {
const str = 'hello word!'
// 设置 SSE 相关的响应头
res.setHeader('Content-Type', 'text/event-stream;charset=utf-8');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();
let count = 30;
const interval = setInterval(() => {
count++
const message = {
time: new Date().toISOString(),
content: "有新消息了",
code: 0,
count: count
};
res.write(`data: ${JSON.stringify(message)}\n\n`); // 必须有两个\n
}, 5000);
req.on('close', () => {
clearInterval(interval);
});
});
五、SSE 消息格式详解
1. 基本字段
data：消息内容(必选)
data: message content\n\n
event：事件类型(可选)
event: customEvent\ndata: {"key":"value"}\n\n
id：事件ID(用于断线重连)
id: 12345\ndata: message\n\n
retry：重连时间(毫秒)
retry: 5000\n\n
六、SSE 高级特性
1. 安全机制
● CORS 支持：同其他HTTP请求一样遵循同源策略
● 认证：可使用Cookie或Authorization头
● HTTPS：生产环境应始终使用加密连接
2. 性能优化
● 压缩：支持gzip/deflate压缩
● 连接复用：HTTP/2下效果更佳
● 缓存控制：合理设置缓存头
3. 扩展应用
● 二进制数据：Base64编码传输
● 组合使用：与REST API配合使用
七、SSE 适用场景
1. 实时通知系统
○ 社交网络更新
○ 系统告警通知
2. 实时数据监控
○ 股票价格变动
○ IoT设备数据流
3. 新闻/体育赛事直播
○ 比分实时更新
○ 新闻快讯推送
4. 进度报告
○ 长时间操作进度
○ 文件处理状态
