当前位置：首页 > 文章列表 > 文章 > 前端 > Server-SentEvents实现实时推送技巧

Server-SentEvents实现实时推送技巧

2025-10-12 20:57:40 0浏览收藏

想要实现网页实时推送？Server-Sent Events (SSE) 是一种简单高效的解决方案。本文详细介绍如何使用 SSE 实现服务端向浏览器单向实时推送。SSE 基于 HTTP 协议，利用 EventSource API 建立连接，服务端以 `text/event-stream` 格式持续推送数据，具备自动重连和自定义事件功能，非常适合通知、状态更新等低频实时场景。相比 WebSocket，SSE 更轻量，易于实现，且天然支持文本数据有序传输。了解 SSE 的基本原理、前后端实现方法，以及数据格式，助您轻松构建实时推送应用，提升用户体验。掌握 SSE，让您的网页也能实时响应！

SSE基于HTTP实现服务端向浏览器的单向实时推送，使用EventSource API建立连接，服务端以text/event-stream格式持续发送数据，支持自动重连与自定义事件，适合通知类低频实时场景。

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

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

基本原理

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

关键特点：

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

前端实现

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

后端实现（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();
  });
});