登录
首页 >  文章 >  前端

Server-SentEvents实时推送实现教程

时间：2026-03-02 22:38:06 178浏览 收藏

Server-Sent Events（SSE）是一种基于标准HTTP、轻量易用的服务器向浏览器单向实时推送技术，通过EventSource API和text/event-stream格式实现自动重连、自定义事件与有序文本传输，特别适合通知提醒、状态更新、日志流等低频实时场景——它比轮询更高效、比WebSocket更简单，只需前后端遵循简洁的协议规范，几分钟就能搭建起稳定可靠的实时通信通道。

怎样利用Server-Sent Events实现服务端推送功能？

Server-Sent Events（SSE）是一种让服务器主动向浏览器推送数据的技术，基于HTTP协议，使用简单，适合实时性要求不高的场景，比如通知、状态更新或实时日志展示。它比WebSocket轻量，且天然支持文本数据的有序传输。

基本原理

SSE 建立在标准 HTTP 之上，客户端通过 EventSource API 发起连接，服务端保持连接不关闭，并以特定格式持续发送数据。每次推送的消息都会触发客户端的 message 事件。

关键特点：

  • 单向通信：仅服务端推送到客户端
  • 自动重连：断开后客户端会尝试重新连接
  • 支持自定义事件类型
  • 数据格式为 text/event-stream

前端实现

使用原生 EventSource 即可监听服务端推送：

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

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

eventSource.onerror = function(err) {
  console.error('SSE 连接出错', err);
};

// 可监听自定义事件
eventSource.addEventListener('customEvent', function(event) {
  console.log('自定义事件:', event.data);
});

后端实现（Node.js 示例）

服务端需设置正确的响应头，并持续输出符合 SSE 格式的数据：

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

  // 发送普通消息
  setInterval(() => {
    res.write(`data: ${Date.now()}\n\n`);
  }, 1000);

  // 发送自定义事件
  setInterval(() => {
    res.write(`event: customEvent\ndata: {"msg": "hello"}\n\n`);
  }, 5000);

  // 客户端断开时清理
  req.on('close', () => {
    res.end();
  });
});

SSE 数据格式说明

每条消息由一个或多个字段组成，常见字段包括：

  • data: 消息内容，可多行，以 \n\n 结尾
  • event: 自定义事件名称，对应前端 addEventListener 的类型
  • id: 消息ID，用于断线重连时定位位置
  • retry: 重连间隔毫秒数

示例：

event: userUpdate
data: {"id": 123, "status": "online"}
id: 456
retry: 3000
\n\n

基本上就这些。只要前后端遵守 SSE 协议格式，就能轻松实现实时推送。相比轮询更高效，比 WebSocket 更简单，适合大多数通知类场景。注意连接长时间保持可能受代理或Nginx配置影响，需调整超时设置。

本篇关于《Server-SentEvents实时推送实现教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>