一、SSE技术本质与通信模型

服务器发送事件（Server-Sent Events）是基于HTTP/1.1协议的持久化连接技术，其核心设计理念是允许服务器通过单次TCP连接持续向客户端推送结构化数据。与传统轮询机制相比，SSE实现了真正的单向数据流传输，客户端无需反复发起请求即可接收实时更新。

1.1 协议架构解析

SSE通信建立在HTTP长连接基础之上，通过text/event-stream内容类型标识数据流格式。每个事件单元包含以下可选字段：

event：事件类型标识符（默认message）
data：实际传输的数据内容（可多行）
id：事件唯一标识（用于断线重连）
retry：重连间隔时间（毫秒）

典型事件流示例：

event: update
id: 12345
data: {"temperature":28.5,"humidity":60}
event: alert
data: Warning: High temperature detected!
retry: 3000

1.2 通信流程详解

连接建立：客户端发送标准HTTP请求，头部需包含Accept: text/event-stream
流式响应：服务器保持连接开放，持续发送事件数据
自动重连：客户端检测到连接中断后，根据retry字段值延迟重试
事件处理：客户端通过EventSource API解析事件并触发回调

二、SSE技术优势与适用场景

2.1 核心优势对比

特性	SSE	WebSocket	短轮询
协议复杂度	基于HTTP	全新协议	基于HTTP
双向通信	❌ 仅服务器推送	✅ 双向实时通信	❌ 客户端轮询
连接管理	自动重连机制	需手动实现心跳检测	每次请求新建连接
浏览器兼容性	所有现代浏览器	IE10+需polyfill	完全兼容
负载均衡	标准HTTP代理友好	需支持WebSocket代理	标准HTTP代理

2.2 典型应用场景

实时监控系统：服务器推送设备传感器数据、系统性能指标
新闻推送服务：实时更新股票行情、体育赛事比分
协作编辑工具：多用户文档协同编辑时的光标位置同步
日志流展示：实时显示容器日志或系统审计日志
通知系统：推送订单状态变更、系统告警等即时消息

三、SSE实现方案详解

3.1 服务端实现要点

3.1.1 Node.js示例

const http = require('http');
http.createServer((req, res) => {
  if (req.headers.accept !== 'text/event-stream') {
    res.writeHead(404);
    return res.end();
  }
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  const sendEvent = (data, eventType) => {
    res.write(`event: ${eventType || 'message'}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };
  // 模拟实时数据推送
  let counter = 0;
  const interval = setInterval(() => {
    sendEvent({ 
      timestamp: Date.now(),
      value: Math.random() * 100
    }, 'sensor-update');
    if (++counter > 10) clearInterval(interval);
  }, 1000);
  req.on('close', () => clearInterval(interval));
}).listen(8080);

3.1.2 关键实现原则

连接保活：需定期发送注释行（如: heartbeat\n\n）防止代理超时
数据编码：确保数据字段不包含\n\n（事件分隔符）
错误处理：实现完善的连接中断检测和重连机制
性能优化：采用事件批处理技术减少网络传输次数

3.2 客户端实现方案

3.2.1 原生EventSource API

const eventSource = new EventSource('http://localhost:8080/stream');
eventSource.addEventListener('sensor-update', (e) => {
  const data = JSON.parse(e.data);
  console.log(`Received update: ${data.value}`);
});
eventSource.onerror = (err) => {
  console.error('SSE connection error:', err);
  // 自动重连由浏览器处理
};

3.2.2 跨浏览器兼容方案

对于不支持EventSource的旧浏览器，可采用以下polyfill策略：

if (!window.EventSource) {
  // 实现基于XHR的模拟SSE
  class PolyfillEventSource {
    constructor(url) {
      this.url = url;
      this.reconnectInterval = 3000;
      this.connect();
    }
    // 实现连接管理、事件解析等逻辑
  }
  window.EventSource = PolyfillEventSource;
}

四、SSE高级应用技巧

4.1 断线重连优化

指数退避算法：首次重连延迟1s，后续每次失败加倍延迟
连接状态监控：通过readyState属性检测连接状态
最后事件ID：利用Last-Event-ID头部实现精确断点续传

4.2 安全加固方案

CORS配置：

Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Last-Event-ID

CSRF防护：要求请求携带自定义头部或Token
数据验证：服务端对推送数据进行严格校验

4.3 性能优化策略

事件压缩：对重复性字段采用差分编码
二进制传输：通过Base64编码传输二进制数据
连接复用：在单个连接上传输多类型事件流

五、SSE与WebSocket的选择指南

5.1 选择SSE的场景

需要简单服务器到客户端推送
兼容性要求高于双向通信需求
数据传输频率适中（<10次/秒）
希望利用现有HTTP基础设施

5.2 选择WebSocket的场景

需要真正的双向实时通信
高频数据传输（>10次/秒）
需要自定义子协议
复杂应用层协议实现

六、生产环境部署建议

负载均衡配置：确保所有节点支持HTTP持久连接
监控指标：跟踪连接数、消息延迟、错误率等关键指标
日志记录：完整记录事件流传输过程用于故障排查
容量规划：根据峰值连接数预估服务器资源需求

通过合理应用SSE技术，开发者可以高效构建各类实时数据应用，在保证系统可扩展性的同时显著降低开发复杂度。对于需要更高性能的场景，可结合消息队列等中间件实现事件缓冲与批处理，进一步提升系统吞吐能力。

服务器发送事件：构建实时数据流的HTTP通信方案