当前位置：首页 > 文章列表 > 文章 > 前端 > JSServer-SentEvents原理与应用解析

JSServer-SentEvents原理与应用解析

2025-12-08 10:18:32 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JS Server-Sent Events技术详解》，聊聊，我们一起来看看吧！

SSE是一种基于HTTP的服务器向客户端推送数据的技术，通过EventSource接口实现，适用于通知、实时日志等场景。它单向通信，服务端需设置Content-Type为text/event-stream并保持长连接，数据格式为data: 内容\n\n，可选id和event字段支持重连与事件类型区分。Node.js示例中每秒发送时间数据，客户端自动重连，默认3秒，可通过retry指令调整。含id的消息断开后恢复时携带Last-Event-ID头，便于续传。关闭用close()方法。SSE优势在于简单高效，兼容性好，无需额外协议，但仅单向、占用独立HTTP连接，IE不支持。适合低复杂度实时更新需求。

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);
});