你是否还在为实时数据推送而烦恼？是否还在用轮询的方式，让服务器和客户端之间频繁地"打招呼"，浪费宝贵的带宽和服务器资源？是否觉得WebSocket太复杂，需要额外的协议支持，实现起来头大？

今天，我要向你揭示一个被严重低估的实时数据推送技术——Server-Sent Events (SSE)。它比WebSocket更轻量，比轮询更高效，而且是浏览器原生支持的！如果你还在用轮询，那你的应用可能正在浪费宝贵的服务器资源。别担心，看完这篇文章，你将掌握这个"被遗忘的实时推送神器"，让你的前端应用瞬间提升一个档次。

一、SSE：实时数据推送的"轻量级"革命

在传统的Web应用中，客户端想要获取后端数据，通常需要发起HTTP请求，然后等待服务器响应。这种"请求-响应"模式在处理实时数据推送时显得效率低下。轮询（Polling）是一种常见做法，但频繁的请求不仅浪费带宽，还增加了服务器负担。

WebSocket是另一种解决方案，但它适用于双向通信场景，实现起来较为复杂，需要额外的协议支持。而SSE则完美解决了"单向实时推送"的痛点——服务器可以随时向客户端推送数据，而客户端只需建立一次长连接。

SSE是HTML5标准的一部分，基于HTTP协议，无需额外的协议支持，是实现单向实时数据推送的绝佳选择。

二、SSE的协议与数据格式：简单却强大

SSE的实现非常简单，关键在于服务端返回的HTTP响应头和数据格式：

1. HTTP响应头必须包含：

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

2. 数据格式是UTF-8编码的文本，每条消息由4种属性组成（id、event、retry、data），使用两个换行符分隔不同消息：

id: D420B6E8-2F51-4235-B778-5C1C494681E8
event: city-notification
retry: 3000
data: Plainville

id: 3AC67AA0-2852-4D30-9103-23CEF4B43D6D
event: city-notification
retry: 3000
data: Bellevue

• id：当前消息的唯一标识
• event：消息类型，用于区分不同事件（如news、weather）
• retry：重连间隔（毫秒），如果连接中断，客户端将等待指定时间后重连
• data：消息内容，只能是文本

三、客户端使用EventSource API：简单到不可思议

浏览器原生支持SSE，通过EventSource API即可轻松实现：

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

sse.onopen = (event) => {
  console.log('SSE连接已打开', event);
};

sse.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 处理数据
};

sse.onerror = (error) => {
  console.error('SSE错误:', error);
  sse.close(); // 关闭连接
};

EventSource的属性与方法

• readyState：连接状态（0=CONNECTING, 1=OPEN, 2=CLOSED）
• url：事件源的URL
• withCredentials：是否发送凭据（如cookies）
• close()：关闭连接

连接状态变化

SSE连接建立后，会一直保持开启。如果连接中断（网络问题或服务端关闭），EventSource会自动重连。要永久关闭连接，需要调用close()方法。

四、服务端实现：简单到令人惊讶

以Node.js为例，实现一个简单的SSE服务：

const express = require('express');
const app = express();

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // 每秒推送一次
  const timer = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
  }, 1000);

  // 客户端关闭连接时清理
  req.on('close', () => {
    clearInterval(timer);
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

其他语言如Java、Python、ASP.NET Core等实现方式类似，只需设置正确的HTTP头和输出SSE格式的数据流。

五、SSE的应用场景：从新闻推送到实时交易

SSE的应用场景非常广泛：

1. 实时通知：新闻推送、系统通知、消息提醒
2. 数据更新：股票行情、实时天气、比赛比分
3. 状态监控：服务器状态、任务进度
4. 直播互动：实时弹幕、评论

这些场景都只需要服务器向客户端推送数据，不需要客户端向服务器发送数据，SSE正是为此而生。

六、SSE的注意事项：避免踩坑

1. 浏览器同源请求并发限制：

   • 浏览器对同源请求的并发数有限制（通常是6个）
   • 由于SSE是长连接，容易达到并发上限
   • 解决方案：使用HTTP/2、部署非同源SSE服务、页面不可见时关闭连接

2. 错误处理：

   • 必须处理error事件，及时关闭连接
   • 实现指数退避重连策略，避免频繁重连

3. 跨域问题：

   • 如果SSE服务与前端不在同一域名，需要配置CORS
   • 服务端设置Access-Control-Allow-Origin头

4. 数据格式：

   • data字段只能是文本，如需传输复杂数据，可使用JSON格式

七、SSE vs WebSocket：谁更胜一筹？

特性	SSE	WebSocket
通信方向	单向（服务器→客户端）	双向
协议	基于HTTP	专用协议
实现复杂度	简单	中等
重连机制	自动	需要手动实现
适用场景	服务器向客户端推送	双向实时通信
浏览器支持	全面支持	全面支持

对于只需要单向推送的场景，SSE是更优选择。

八、总结与思考

SSE是一个被严重低估的实时数据推送技术。它比轮询高效，比WebSocket轻量，而且是浏览器原生支持的。在"服务器向客户端推送数据"的场景下，SSE几乎是完美的解决方案。

但SSE并非万能，它不适用于需要双向通信的场景（如聊天室）。对于这类场景，WebSocket仍是更好的选择。

未来，随着HTTP/2和HTTP/3的普及，SSE的并发限制问题将得到解决，SSE的应用场景将更加广泛。

作为一名前端开发者，你是否还在使用轮询来实现实时数据推送？是时候学习并应用SSE了！它不仅能提升应用性能，还能减少服务器负担，让用户体验更流畅。不妨在下一个需要实时推送的项目中尝试SSE，你可能会惊喜地发现，原来实时推送可以如此简单。

记住：在正确的场景使用正确的技术，才是真正的工程师之道。别再让轮询浪费你的资源了，SSE，这个被遗忘的实时推送神器，值得你好好掌握！