前端SSE技术详解：从入门到实战的完整指南

前端SSE技术详解：从入门到实战的完整指南

一、初识SSE：比WebSocket更轻量的选择

很多开发者第一次听说Server-Sent Events（SSE）时，都会下意识问：“这和WebSocket有什么区别？” 就像选择交通工具一样，WebSocket是双向通行的高铁，而SSE更像是单向广播的地铁——它专门为解决服务器向客户端实时推送数据这个特定场景而生。

SSE的三大核心特征：

1. 基于HTTP协议（不需要特殊协议）
2. 单向通信（服务端→客户端）
3. 自动重连机制

// 最简示例：建立SSE连接
const eventSource = new EventSource(/sse-endpoint);

eventSource.onmessage = (event) => {
  console.log(新消息:, event.data);
};

二、SSE工作原理深度解析

1. 连接建立过程

当浏览器发起SSE请求时，会在HTTP头中加入：

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

服务端需要响应：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Transfer-Encoding: chunked
Connection: keep-alive

2. 数据格式规范

SSE传输的不是普通文本，而是遵循特定格式的事件流：

data: 第一条消息

data: 第二条消息

data: 可以跨行\n的消息内容

三、完整功能实战演示

基础消息接收

// 客户端代码
const sse = new EventSource(/api/notifications);

sse.addEventListener(message, (e) => {
  const notification = JSON.parse(e.data);
  showToast(`新通知：${notification.title}`);
});

// 服务端示例（Node.js）
app.get(/api/notifications, (req, res) => {
  res.writeHead(200, {
    Content-Type: text/event-stream,
    Cache-Control: no-cache,
    Connection: keep-alive
  });

  // 模拟定时推送
  setInterval(() => {
    res.write(`data: ${JSON.stringify({
      id: Date.now(),
      title: 系统提醒,
      content: 您有新的待办事项
    })}\n\n`);
  }, 5000);
});

多事件类型处理

// 订阅不同事件类型
const stockSource = new EventSource(/stock-ticker);

// 默认消息事件
stockSource.onmessage = (e) => {
  updateChart(JSON.parse(e.data));
};

// 自定义事件
stockSource.addEventListener(alert, (e) => {
  triggerWarning(JSON.parse(e.data));
});

// 服务端发送自定义事件
res.write(
  `event: alert\n` +
  `data: ${JSON.stringify({symbol: AAPL, change: -5.2})}\n\n`
);

四、生产环境最佳实践

1. 错误处理与重连

const initSSE = () => {
  const sse = new EventSource(/realtime);
  
  sse.onerror = () => {
    sse.close();
    // 指数退避重连
    setTimeout(initSSE, Math.min(5000, 1000 * Math.pow(2, retryCount++)));
  };
};

2. 安全增强方案

• 添加Last-Event-ID实现断点续传
• 结合JWT进行身份验证
• 限制连接时长（服务端可主动关闭）

五、典型应用场景

1. 实时通知系统：站内信、订单状态更新
2. 股票行情推送：不需要客户端交互的数据流
3. 日志监控面板：实时展示服务器日志
4. 新闻直播流：比分更新、突发新闻推送

六、与WebSocket的对比选型

选型建议：当只需要服务器推送时，SSE是更简单高效的选择；需要双向交互时再考虑WebSocket。

七、常见问题排查

Q：为什么收不到消息？

• 检查服务端是否正确设置Content-Type
• 确认网络代理不会中断长连接
• 测试服务端是否正常输出\n\n结束符

Q：如何控制连接关闭？

// 客户端主动关闭
sse.close();

// 服务端响应（Node.js示例）
req.on(close, () => {
  clearInterval(pushInterval);
});

结语：SSE的优雅之处

SSE技术就像一位专注的广播员，它不需要复杂的握手协议，不需要维护双向状态，只是专注做好一件事——把服务器的最新消息及时、高效地传递到客户端。在需要实时更新但交互简单的场景下，它往往是比WebSocket更轻量、更合适的选择。

下次当你需要实现"服务器主动推送"功能时，不妨给SSE一个机会，或许它会用简洁的API和稳定的表现给你惊喜。