Web实时数据流：如何使用 Server-Sent Events (SSE) – wiki词典

作者： /

Web实时数据流：如何使用 Server-Sent Events (SSE)

在现代Web应用中，实时数据流已成为提升用户体验的关键。无论是股票行情、在线聊天、体育赛事比分更新，还是新闻推送，用户都期待信息能即时呈现在眼前。实现这种实时通信有多种技术，其中 Server-Sent Events (SSE) 是一种简单而高效的选择。本文将深入探讨 SSE 是什么、如何工作、其优缺点以及如何在实际项目中应用。

1. 实时Web通信的演进

在早期，为了模拟实时更新，Web应用主要依赖于短轮询 (Short Polling)：客户端每隔一段时间向服务器发送请求，询问是否有新数据。这种方式效率低下，会产生大量不必要的HTTP请求。

随后，长轮询 (Long Polling) 出现：客户端发送请求后，服务器会保持连接打开，直到有新数据或超时才响应。客户端收到响应后立即发起新的请求。这减少了请求次数，但仍然需要为每个更新重新建立连接。

WebSocket 协议的出现彻底改变了实时通信的格局。它在客户端和服务器之间建立了一个持久的双向通信通道，允许双方随时发送数据。WebSocket 功能强大，但对于某些单向数据流场景而言，其复杂性可能超出需求。

而 Server-Sent Events (SSE) 则为特定的实时单向数据流提供了一个更轻量级的解决方案。

2. 什么是 Server-Sent Events (SSE)？

Server-Sent Events (SSE) 是一种HTML5 API，允许服务器以单向的方式，通过持久的HTTP连接向客户端推送数据。简单来说，它就像是服务器“广播”消息，而客户端“订阅”这些消息。

与 WebSocket 的双向通信不同，SSE 是纯粹的单向通信：数据从服务器流向客户端。客户端无法通过同一个SSE连接向服务器发送数据（如果需要，仍需使用传统的HTTP请求）。这使得SSE非常适合那些需要服务器持续向客户端发送更新，而客户端很少或无需向服务器发送数据的场景。

核心特性：

  • 基于HTTP/2 (或HTTP/1.1): SSE 使用标准的 HTTP 协议，这意味着它可以通过现有的HTTP基础设施（如代理、防火墙）工作，无需特殊的协议升级。
  • 持久连接: 客户端和服务器之间建立一个长期的HTTP连接，服务器可以在此连接上持续发送事件流。
  • 事件流格式: 服务器发送的数据必须遵循特定的 text/event-stream 格式。
  • 自动重连: 客户端（浏览器）内置了自动重连机制。如果连接断开，浏览器会自动尝试重新连接。
  • 事件ID: 每个事件可以带有一个ID，客户端可以利用这个ID在断线重连后告知服务器从哪个事件开始重新发送数据，避免数据丢失或重复。

3. SSE 如何工作？

SSE 的工作原理可以概括为以下几个步骤：

  1. 客户端发起连接: 客户端通过 JavaScript 的 EventSource 接口向服务器发起一个标准的HTTP请求。
  2. 服务器响应: 服务器以 Content-Type: text/event-stream 响应，并保持连接打开。
  3. 数据推送: 服务器开始通过这个持久连接，以特定格式（事件流）向客户端发送数据。
  4. 客户端处理事件: 客户端的 EventSource 监听器会捕获这些事件，并根据事件类型或默认事件进行处理。
  5. 自动重连与断线恢复: 如果连接中断（网络问题、服务器重启等），EventSource 会自动尝试重新连接。如果服务器发送了 id 字段，客户端会在重连请求的 Last-Event-ID 头中携带上一次收到的事件ID，允许服务器从上次断开的地方继续发送数据。

4. 事件流格式 (text/event-stream)

服务器发送的数据必须是 UTF-8 编码的纯文本，并且遵循以下格式：

“`
data: 这是第一行数据\n
data: 这是第二行数据\n
id: 123\n
event: message\n\n

data: 这是一个没有指定event类型和id的事件\n\n

data: 这是一个带有不同event类型的事件\n
event: notification\n\n
“`

  • data:: 包含事件的数据。可以有多行 data 字段，它们在客户端会被合并成一个字符串，并以 \n 分隔。
  • id:: 可选，指定事件的ID。客户端会存储这个ID，并在断线重连时通过 Last-Event-ID 头发送给服务器。
  • event:: 可选，指定事件的类型。客户端可以通过监听特定类型的事件来处理数据。如果未指定，默认为 message 事件。
  • retry:: 可选，指定客户端在连接断开后，等待多少毫秒后才尝试重新连接。
  • 空行 (\n\n): 每个事件块必须以两个换行符结束，表示一个事件的结束。

5. SSE 与 WebSocket 的比较

特性 Server-Sent Events (SSE) WebSocket
通信方向 单向（服务器 -> 客户端） 双向（服务器 <-> 客户端）
协议 基于HTTP协议（text/event-stream） 独立的WebSocket协议（ws:// 或 wss://）
复杂性 简单，浏览器内置 EventSource API 较复杂，需要处理连接握手和帧协议
数据格式 UTF-8纯文本 任意数据类型（文本、二进制）
自动重连 浏览器内置支持 需要手动实现
开销 HTTP头部开销较小 初始握手开销，之后协议开销很小
适用场景 服务器向客户端推送更新（如：新闻、股票） 实时聊天、在线游戏、协同编辑等双向交互
代理/防火墙 易于穿越（基于HTTP） 可能需要额外配置才能穿越

6. SSE 的优势

  • 简单易用: 相比 WebSocket，SSE 的API更为简单直观，浏览器原生支持 EventSource 接口，无需额外的库。
  • 基于HTTP: SSE 运行在 HTTP 协议之上，可以很好地兼容现有的HTTP基础设施，如代理服务器、负载均衡器和防火墙，部署和维护成本较低。
  • 自动重连: 浏览器内置了断线自动重连机制，大大简化了客户端的开发复杂性。
  • 事件ID支持: 允许服务器在重连时从上次断开的地方继续发送数据，确保数据连续性。
  • 低开销: 对于单向数据流场景，SSE 的协议开销比 WebSocket 更低。

7. SSE 的劣势

  • 单向通信: 最大的限制是它只能从服务器向客户端推送数据，如果客户端也需要向服务器发送实时数据，则需要结合其他技术（如传统的 AJAX 请求）。
  • 连接数限制: 大多数浏览器对同一个域名下的并发HTTP连接数有限制（通常是6个）。这意味着，如果你在一个页面中同时打开多个SSE连接，可能会达到浏览器限制，从而影响其他HTTP请求。然而，HTTP/2协议在一定程度上缓解了这个问题，它允许多个请求在同一个TCP连接上复用。
  • 仅支持文本数据: SSE 只能传输 UTF-8 编码的文本数据，如果需要传输二进制数据，则不适用。

8. 何时使用 SSE？

SSE 并非 WebSocket 的替代品，而是其补充。在以下场景中，SSE 是一个非常合适的选择：

  • 新闻更新和通知: 实时推送最新新闻、公告或用户通知。
  • 股票行情或体育赛事比分: 持续更新股价、比赛分数等数据。
  • 进度指示器: 长时间运行的任务（如文件上传、数据处理）的实时进度更新。
  • 社交媒体动态: 实时显示新的帖子、评论或赞。
  • 监控仪表盘: 实时展示服务器状态、系统指标等。

总而言之，只要你的应用需求是服务器单向向客户端推送数据，且不需要双向通信，那么 SSE 就会是一个比 WebSocket 更轻量、更易于实现的解决方案。

9. 实施示例

客户端 (JavaScript)

“`javascript
// 创建一个EventSource实例，指向服务器的SSE接口
const eventSource = new EventSource(‘/stream’); // 假设服务器在 /stream 路径提供SSE服务

// 监听默认的 ‘message’ 事件
eventSource.onmessage = function(event) {
console.log(“收到消息:”, event.data);
// event.data 包含了服务器发送的 data 字段内容
// event.lastEventId 包含了服务器发送的 id 字段内容
};

// 监听特定类型的事件 (如果服务器发送了 event: notification)
eventSource.addEventListener(‘notification’, function(event) {
console.log(“收到通知:”, event.data);
});

// 监听连接打开事件
eventSource.onopen = function() {
console.log(“SSE 连接已建立。”);
};

// 监听连接错误事件
eventSource.onerror = function(error) {
console.error(“SSE 连接错误:”, error);
if (eventSource.readyState === EventSource.CLOSED) {
console.log(“连接已关闭，浏览器将尝试重新连接…”);
}
};

// 手动关闭连接 (如果不再需要)
// eventSource.close();
“`

服务器端 (以 Node.js + Express 为例)

“`javascript
const express = require(‘express’);
const app = express();
const PORT = 3000;

let clientId = 0;
const clients = {}; // 用于存储所有连接的客户端

// 处理新连接
app.get(‘/stream’, (req, res) => {
// 设置响应头，告知客户端这是一个事件流
res.setHeader(‘Content-Type’, ‘text/event-stream’);
res.setHeader(‘Cache-Control’, ‘no-cache’);
res.setHeader(‘Connection’, ‘keep-alive’);
// 允许跨域请求，根据你的实际情况设置
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’); 

// 获取上一次接收到的事件ID，用于断线重连
const lastEventId = req.headers['last-event-id'];
if (lastEventId) {
    console.log(`客户端请求从事件ID ${lastEventId} 之后的数据`);
    // 在这里可以实现根据 lastEventId 从历史记录中发送缺失数据的功能
}

// 为每个新连接生成一个唯一的ID
const currentClientId = clientId++;
clients[currentClientId] = res; // 存储响应对象，以便后续推送数据

console.log(`客户端 ${currentClientId} 已连接.`);

// 定时向客户端推送数据
const intervalId = setInterval(() => {
    const data = {
        timestamp: new Date().toISOString(),
        message: `服务器最新消息 #${Date.now()}`
    };
    // 格式化为 SSE 事件流格式
    res.write(`id: ${Date.now()}\n`); // 事件ID
    res.write(`event: message\n`); // 事件类型
    res.write(`data: ${JSON.stringify(data)}\n\n`); // 数据
}, 3000); // 每3秒推送一次

// 客户端断开连接时清理资源
req.on('close', () => {
    console.log(`客户端 ${currentClientId} 已断开连接.`);
    clearInterval(intervalId); // 清除定时器
    delete clients[currentClientId]; // 从客户端列表中移除
});

});

// 启动服务器
app.listen(PORT, () => {
console.log(Server running on http://localhost:${PORT});
console.log(请访问 http://localhost:${PORT}/index.html (你需要创建一个简单的HTML文件来测试));
});
“`

要在浏览器中测试上述 Node.js 服务器，你需要一个简单的 index.html 文件：

“`html






SSE 客户端示例

Server-Sent Events 实时数据



“`

10. 结论

Server-Sent Events (SSE) 为Web实时数据流提供了一个简洁、高效且易于实现的方案。尽管它不如 WebSocket 功能全面，但对于服务器单向推送数据的场景，SSE 凭借其基于 HTTP、内置重连和简单API的优势，成为一个非常具有吸引力的选择。在选择实时通信技术时，理解 SSE 的特点并结合具体应用需求，将帮助你构建更健壮、更高效的现代Web应用。

滚动至顶部