SSE微入门

SSE的微入门

1、SSE连接是什么

SSE（Server-Sent Events） 是一种基于 HTTP 协议的服务器推送技术，允许服务器将实时数据流推送到客户端浏览器。它是 HTML5 中的一部分，常用于需要持续更新数据的场景，例如实时通知、股票行情、聊天消息等。

2、SSE 的工作原理

1. 单向通信：
   • SSE 是从服务器到客户端的单向通信，客户端发起连接后，服务器可以持续地向客户端发送数据。
   • 客户端通过监听事件接收服务器推送的数据。
2. 基于 HTTP 的长连接：
   • SSE 使用 HTTP 协议，通过持续打开的 HTTP 长连接（不关闭连接）实现数据流的推送。
   • 使用 Content-Type: text/event-stream 作为数据流的 MIME 类型。
3. 浏览器支持：
   • SSE 是由浏览器原生支持的，通过 JavaScript 可以轻松使用 EventSource API 实现。

3、SSE 和其他技术的对比

特性	SSE	WebSocket	AJAX Polling
通信方式	单向（服务器 -> 客户端）	双向	请求-响应
协议	基于 HTTP	独立协议（WebSocket）	基于 HTTP
连接数	每个客户端一个连接	每个客户端一个连接	每次请求一个新连接
效率	高效	更高效	较低
实现难度	简单	较复杂	简单
兼容性	浏览器原生支持（现代浏览器）	浏览器支持（现代浏览器）	兼容性广（所有浏览器支持）

4、SSE 的使用

4.1 服务器端实现

服务器需要发送一个持续的 HTTP 响应，数据格式必须符合 SSE 的规定。以下是一个简单的 SSE 响应示例：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

data: Hello, SSE!
data: More updates coming...

event: custom-event
data: {"message": "Custom event data"}

• data:：发送的数据内容。
• event:：事件名称，客户端可以根据名称监听特定事件。
• 每条消息以换行符 \n\n 分隔。

4.2 客户端实现

在浏览器端，使用 EventSource 对象接收服务器推送的数据：

// 创建 SSE 连接
const source = new EventSource('/sse-endpoint');

// 监听默认消息
source.onmessage = function(event) {
    console.log('Message:', event.data);
};

// 监听自定义事件
source.addEventListener('custom-event', function(event) {
    console.log('Custom Event:', event.data);
});

// 监听连接错误
source.onerror = function() {
    console.error('Error in SSE connection');
};

5、SSE 的应用场景

1. 实时通知：例如邮件通知、系统警告等。
2. 实时更新数据：例如股票行情、新闻推送等。
3. 协作工具：例如文档协作中的实时更新。
4. 进度更新：例如文件上传进度、后台任务状态等。

6、SSE 的优点

1. 简单易用：浏览器原生支持，无需额外库。
2. 轻量级：仅需要 HTTP 和文本格式。
3. 自动重连：浏览器会自动重试断开的 SSE 连接。

7、SSE 的局限性

1. 单向通信：只能从服务器推送到客户端，无法实现双向通信。
2. 浏览器兼容性：不支持 IE 浏览器，但现代浏览器（如 Chrome、Firefox、Safari）都支持。
3. 连接限制：浏览器对同一域名的最大连接数有限制（通常是 6 个）。
4. 不支持二进制数据：数据格式只能是文本，无法直接传输二进制数据（如图片、文件）。

---

总结

SSE 是一种轻量、高效的实时数据推送技术，适合大多数需要实时数据更新的场景。对于双向通信需求（如聊天系统），则推荐使用 WebSocket。如果只需要简单的实时推送，SSE 是一个非常好的选择。