SSE (Server-Sent Events) 技术简介

一、SSE 技术概述

Server-Sent Events (SSE) 是一种允许服务器向客户端实时推送数据的 Web 技术，它基于 HTTP 协议实现服务器到客户端的单向通信。
基本特点
● 单向通信：仅服务器→客户端方向
● 基于HTTP：使用标准HTTP协议，无需特殊协议
● 文本格式：默认传输UTF-8编码的文本数据
● 自动重连：内置连接中断恢复机制
● 轻量级：相比WebSocket更简单轻量

二、技术原理

1. 通信机制

SSE 通过长连接机制工作：

1. 客户端建立常规HTTP连接
2. 服务器保持连接打开 (Connection: keep-alive)
3. 服务器通过此连接持续发送事件流
4. 连接中断后客户端自动尝试重新连接

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. 进度报告

○ 长时间操作进度
○ 文件处理状态