一、SSE技术概述与适用场景

Server-Sent Events（SSE）是HTML5标准定义的轻量级服务器推送技术，基于HTTP协议实现单向数据流传输。相比WebSocket，SSE具有更简单的实现方式和更好的浏览器兼容性（IE除外），特别适合以下场景：

实时日志监控系统
股票行情实时展示
新闻推送服务
物联网设备数据采集

该技术通过EventSource对象建立持久连接，服务端按特定格式发送数据，浏览器自动处理重连机制。其核心优势在于无需复杂握手协议，开发效率显著高于WebSocket方案。

二、服务端实现规范与最佳实践

2.1 协议规范要点

SSE消息必须遵循以下格式要求：

data: [JSON数据]
[可选注释行]

关键注意事项：

每条消息以双换行符\n\n终止
支持多行数据拼接（需显式添加data:前缀）

必须设置响应头：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

2.2 Node.js服务端实现

以Koa框架为例，完整实现代码如下：

import Router from 'koa-router';
import { PassThrough } from 'node:stream';
const router = new Router();
router.get('/stream', async (ctx) => {
  // 设置响应头
  ctx.set({
    'Content-Type': 'text/event-stream;charset=utf-8',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'X-Accel-Buffering': 'no' // 禁用Nginx缓冲
  });
  // 创建可写流
  const stream = new PassThrough();
  ctx.status = 200;
  ctx.body = stream;
  // 模拟数据流推送
  const mockData = ['Hello', 'SSE', 'World'];
  let index = 0;
  const interval = setInterval(() => {
    if (index >= mockData.length) {
      clearInterval(interval);
      stream.end();
      return;
    }
    stream.write(`data: ${JSON.stringify({
      message: mockData[index],
      timestamp: new Date().toISOString()
    })}\n\n`);
    index++;
  }, 1000);
});

2.3 生产环境优化建议

连接管理：实现连接池机制，避免资源泄漏

心跳检测：定期发送注释行保持连接活跃

setInterval(() => stream.write(':heartbeat\n\n'), 30000);

错误处理：监听stream的error事件进行日志记录
性能优化：对于高并发场景，建议使用集群模式部署

三、前端实现与高级技巧

3.1 基础实现方案

const eventSource = new EventSource('/api/stream');
eventSource.onmessage = (event) => {
  console.log('Received:', JSON.parse(event.data));
};
eventSource.onerror = (error) => {
  console.error('Connection error:', error);
  // 业务逻辑可根据错误状态码处理
};

3.2 自定义事件处理

SSE支持自定义事件类型，服务端需发送event:字段：

// 服务端发送
stream.write(`event: customEvent\ndata: {"key":"value"}\n\n`);
// 前端监听
eventSource.addEventListener('customEvent', (event) => {
  console.log('Custom event:', event.data);
});

3.3 连接生命周期管理

完整生命周期包含以下状态：

CONNECTING (0)：正在连接
OPEN (1)：已建立连接
CLOSED (2)：连接关闭

可通过readyState属性监控连接状态：

const checkConnection = () => {
  switch(eventSource.readyState) {
    case EventSource.CONNECTING:
      console.log('Reconnecting...');
      break;
    case EventSource.CLOSED:
      console.log('Connection closed');
      break;
  }
};

3.4 优雅关闭连接

在单页应用路由切换时，应主动关闭连接：

// 组件卸载时
useEffect(() => {
  return () => {
    if (eventSource) {
      eventSource.close();
    }
  };
}, []);

四、常见问题解决方案

4.1 跨域问题处理

服务端需配置CORS头：

ctx.set({
  'Access-Control-Allow-Origin': '*', // 生产环境应指定域名
  'Access-Control-Allow-Methods': 'GET'
});

4.2 数据压缩优化

对于大数据量场景，可启用Brotli压缩：

// Nginx配置示例
location /api/stream {
  gzip on;
  brotli on;
  brotli_types text/event-stream;
}

4.3 移动端兼容性

iOS Safari存在以下限制：

最多允许6个并发连接
空闲连接超过10分钟会自动断开
解决方案：
实现指数退避重连机制
添加连接健康检查

五、与WebSocket的对比选择

特性	SSE	WebSocket
协议方向	单向（服务器→客户端）	双向通信
传输格式	纯文本	二进制帧
连接管理	自动重连	需手动实现
头部开销	较小	较大（握手协议）
适用场景	实时数据推送	实时交互应用

建议根据业务需求选择：

需要简单服务器推送 → SSE
需要双向通信或高实时性 → WebSocket
需要兼容旧浏览器 → 考虑长轮询 fallback

六、进阶应用场景

6.1 与React/Vue集成

在前端框架中，可将SSE连接封装为自定义Hook：

// React示例
function useSSE(url) {
  const [data, setData] = useState([]);
  useEffect(() => {
    const eventSource = new EventSource(url);
    eventSource.onmessage = (e) => {
      setData(prev => [...prev, JSON.parse(e.data)]);
    };
    return () => eventSource.close();
  }, [url]);
  return data;
}

6.2 结合服务端缓存

对于频繁访问的流数据，可引入Redis缓存：

// 服务端伪代码
async function getStreamData(req) {
  const cacheKey = `sse:${req.query.roomId}`;
  let streamData = await redis.get(cacheKey);
  if (!streamData) {
    streamData = generateInitialData();
    await redis.setex(cacheKey, 30, streamData);
  }
  return streamData;
}

6.3 安全增强方案

鉴权机制：通过URL查询参数或Cookie传递token
速率限制：防止滥用连接
数据加密：对敏感数据进行端到端加密

七、总结与展望

SSE技术以其简单高效的特点，在实时数据推送领域占据重要地位。随着Edge Computing和5G技术的发展，低延迟流式传输需求将持续增长。开发者在实施时需特别注意：

合理设计数据分片策略
建立完善的错误处理机制
监控连接健康状态
考虑降级方案（如长轮询）

对于复杂业务场景，可考虑将SSE与消息队列、流处理引擎（如Flink）结合，构建更强大的实时数据处理系统。未来随着HTTP/3的普及，SSE在QUIC协议上的实现可能带来性能进一步提升。

Server-Sent Events技术解析：前端流式数据接收实战指南