详解 JavaScript Server-Sent Events技术

Server-Sent Events（SSE）是 JavaScript 中一种让服务器主动向客户端推送数据的技术。它基于 HTTP 协议，允许浏览器通过 EventSource 接口接收来自服务器的实时更新。与 WebSocket 不同，SSE 是单向通信——数据只能从服务器推送到客户端，适合用于通知、实时日志、股票行情等场景。

基本使用方式

SSE 的客户端实现非常简单，只需创建一个 EventSource 实例并监听消息即可：

const eventSource = new EventSource('/api/updates');

eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

eventSource.onerror = function(event) {
  console.error('发生错误', event);
};

服务器只要返回正确的 MIME 类型（text/event-stream），并保持连接不断开，就可以持续发送数据。

服务器端实现要点

服务端需要满足几个关键条件才能支持 SSE：

• 响应头必须设置 Content-Type 为 text/event-stream
• 连接不能立即关闭，应保持长连接
• 每次发送数据需遵循特定格式：data: 内容\n\n
• 可选地发送 id: 或 event: 字段以支持重连和事件类型区分

以 Node.js 为例：

app.get('/api/updates', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: new Date() })}\n\n`);
  }, 1000);
});

连接管理和错误处理

EventSource 会自动在断线后尝试重连，默认延迟约 3 秒。你也可以在服务端通过 retry: 指令指定重试时间：

res.write('retry: 5000\n');

如果收到的消息包含 id 字段，浏览器会在 reconnect 时带上 Last-Event-ID 请求头，可用于恢复丢失的消息：

res.write('id: 123\ndata: Hello\n\n');

关闭连接时调用eventSource.close()可终止监听。

适用场景与限制

SSE 最大的优势是简单且兼容性较好，基于 HTTP 无需额外协议支持。但它也有局限：

• 只支持服务器到客户端的单向通信；
• 每个 EventSource 实例占用一个 HTTP 连接，大量并发可能影响性能；
• IE 和旧版浏览器不支持。

对于不需要双向交互的实时更新功能，SSE 是比轮询更高效、比 WebSocket 更轻量的选择。

基本上就这些。用好 SSE 能显著提升页面实时性，同时避免复杂性。关键是服务端输出格式要正确，客户端处理要稳定。不复杂但容易忽略细节。

以上关于详解 JavaScript Server-Sent Events技术的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。