基于 HTTP 的单向流式通信协议SSE详解

SSE（Server-Sent Events）详解

🧠 什么是 SSE？

SSE（Server-Sent Events） 是 HTML5 标准中定义的一种通信机制，它允许服务器主动将事件推送给客户端（浏览器）。与传统的 HTTP 请求-响应不同，SSE 是一种基于 HTTP 的单向流式通信协议。

📌 核心特性

🧱 通信流程（架构图）

浏览器（客户端）
└── 发起 HTTP GET 请求（Accept: text/event-stream）
    ↓
服务器端（保持连接）
└── 每当有事件，推送：
    data: xxx
    id: 1
    event: myEvent
    retry: 3000

[连接不断，服务器持续发送，客户端持续接收]

🧪 示例详解

1. 客户端（JS）

const source = new EventSource('/events');

source.onmessage = (event) => {
  console.log('默认消息:', event.data);
};

source.addEventListener('update', (event) => {
  console.log('收到 update 事件:', event.data);
});

source.onerror = (err) => {
  console.error('连接异常', err);
};

2. 服务器端（Node.js 示例）

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  res.write('retry: 5000\n'); // 自动重连时间
  res.write('event: update\n');
  res.write(`data: 你好，客户端\n\n`);

  const interval = setInterval(() => {
    res.write(`data: 当前时间 ${new Date().toISOString()}\n\n`);
  }, 3000);

  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

🎯 典型应用场景

📄 SSE 消息格式

event: update
id: 12345
retry: 5000
data: 你好
data: 世界

字段说明

🧰 与 WebSocket 对比

📡 浏览器支持情况

⚠️ 限制与注意事项

1. 不支持 IE
2. 只能从服务器推送
3. 受限于 HTTP 连接数
4. 不适合传输大量二进制数据

🔐 跨域 & 认证

• 使用 CORS 即可跨域支持：

Access-Control-Allow-Origin: *
Content-Type: text/event-stream

• URL Token 示例：

new EventSource(`/events?token=abc123`);

📦 框架与工具支持

✅ 总结：SSE 的优势与应用判断

• ✅ 简单、轻量级、易于实现和部署（基于 HTTP）
• ✅ 适合实时监控、系统通知、数据流更新
• ❌ 不适合需要客户端发消息或二进制传输
• ❌ 兼容性上需考虑 IE 或企业内网浏览器情况