服务器推送事件

服务器主动下发数据，实现实时交互，高效低耗，减少客户端请求

服务器推送事件（Server-Sent Events，SSE）详解

什么是服务器推送事件（SSE）？

服务器推送事件（Server-Sent Events，简称SSE）是一种由服务器向客户端单向推送数据的HTML5标准技术，它允许服务器通过HTTP协议主动将更新数据发送给浏览器，而无需客户端频繁发起请求，SSE的设计目标是为需要实时更新的场景（如股票价格、日志监控、即时通知）提供轻量级、低延迟的解决方案。

SSE的核心原理

特性	说明
单向通信	仅支持服务器向客户端推送数据，客户端无法通过同一连接向服务器发送数据。
文本流传输	数据以文本流形式逐行发送，客户端逐行解析。
持久连接	使用HTTP协议建立长连接，默认保持直到客户端或服务器主动关闭。
自动重连	若连接意外中断，浏览器会自动尝试重新连接（可自定义重试间隔和次数）。
事件驱动	客户端通过监听`message`事件处理服务器推送的数据。

SSE的工作流程

客户端发起请求：通过JavaScript创建EventSource对象,指定服务器URL。
服务器保持连接：服务器返回HTTP响应头Content-Type: text/event-stream,并持续开放连接。
服务器推送数据：以data:开头的行发送数据，可附加id、event等字段。
客户端接收事件：浏览器触发message事件,调用回调函数处理数据。
连接维护：若连接断开，浏览器自动尝试重连（可通过reconnect配置调整）。

SSE vs 其他实时通信技术

技术	SSE	WebSocket	长轮询	轮询
通信方向	单向（服务器→客户端）	双向	单向	单向
协议	HTTP	WebSocket协议	HTTP	HTTP
复杂度	低（仅需服务器支持SSE）	较高（需处理握手、心跳等）	中等	低
浏览器支持	IE11+、现代浏览器均支持	IE11+、现代浏览器支持	广泛支持	广泛支持
适用场景	实时更新（如日志、通知）	双向交互（如聊天、游戏）	简单实时需求	低频率数据同步

SSE的实现步骤

客户端代码示例

const eventSource = new EventSource('https://example.com/sse-endpoint');
eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
};
eventSource.onerror = function(err) {
  console.error('连接错误:', err);
  eventSource.close(); // 手动关闭连接
};

服务器端代码示例（Node.js）

const express = require('express');
const app = express();
app.get('/sse-endpoint', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // 模拟每秒推送一条消息
  const sendMessage = () => {
    res.write(`data: ${new Date().toISOString()}
`);
  };
  sendMessage();
  const interval = setInterval(sendMessage, 1000);
  req.on('close', () => {
    clearInterval(interval);
    console.log('客户端断开连接');
  });
});
app.listen(3000, () => console.log('SSE服务已启动'));

SSE的优缺点分析

优点	缺点
超低延迟：数据生成后立即推送，无需等待客户端请求。	仅支持单向通信：无法通过同一连接回传数据。
实现简单：无需复杂协议，服务器只需按规范输出文本流。	浏览器兼容性：IE11+支持，但部分老旧浏览器不兼容。
节省资源：持久连接复用，减少TCP握手开销。	依赖网络稳定性：长连接易受网络波动影响。
自动重连：浏览器内置重连机制，降低开发复杂度。	无内置认证机制：需结合其他技术（如Token）实现安全。

SSE的适用场景

实时日志监控：服务器推送日志到客户端,适合运维监控。
动态数据更新：股票行情、社交媒体动态等实时数据流。
即时通知：系统告警、消息提醒等单向推送需求。
低频率双向通信替代：当客户端向服务器发送数据需求较少时，可结合其他技术（如POST请求）实现双向功能。

FAQs

问题1：SSE与WebSocket的主要区别是什么？
答：SSE是单向通信（服务器→客户端），基于HTTP协议，适合实时推送场景；WebSocket支持双向通信，基于独立协议，适合聊天、游戏等需要频繁交互的场景，SSE实现更简单,但功能也更受限。

问题2：如何处理SSE连接中断？
答：浏览器会自动尝试重连，但可通过EventSource的error事件监听中断，并在回调中执行自定义逻辑（如提示用户、清理资源等），若需手动控制重连，可调用eventSource.close()后重新创建EventSource实例。

小编有话说

SSE作为轻量级实时推送方案，在特定场景下性价比极高，尤其适合对延迟敏感且无需复杂交互的应用，但其单向性决定了它无法完全替代WebSocket，实际开发中，建议根据需求选择技术：若仅需服务器向客户端推送数据（如监控系统），SSE是首选；若需要双向实时交互（如在线协作工具），则优先考虑WebSocket，需注意SSE对跨域的限制（需服务器设置Access-Control-Allow-Origin）及网络环境的稳定性，随着浏览器对标准化的支持逐步完善，S

以上内容就是解答有关“服务器推送事件”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。