SSE(Server-send events)的原理及实现

发表于 更新于 分类于 阅读次数：

SSE(Server-send events)

SSE 是一种单向通信技术，允许服务器主动向客户端（通常是浏览器）推送实时数据。

在过去，网页想要获取服务器的实时数据，要么用短轮询（每隔几秒发一次 HTTP 请求，低效且浪费资源），要么用 WebSocket（双向奔赴，但协议较重，开发成本高）。而 SSE 则是介于两者之间的一个轻量级极佳方案。

核心工作原理

image-20260527185951958

1. 建立长连接（Keep-Alive）

普通的 HTTP 请求是“一问一答”，服务器说完话连接就立刻断开。而 SSE 在客户端发起请求后，服务器会返回特殊的响应头，告诉浏览器：“这个连接别挂断，后面还有货！”

这组特殊的响应头通常是：

  • Content-Type: text/event-stream：告诉浏览器，这是一个流式的数据流。
  • Cache-Control: no-cache：禁止缓存，确保数据的实时性。
  • Connection: keep-alive：保持长连接。

2. 文本流数据格式

连接建立后，服务器就可以通过这个通道持续发送文本数据。SSE 对发送的数据格式有严格的要求，它是由多条消息组成的文本流，每条消息内部用换行符 \n 分隔，消息之间用两个换行符 \n\n 分隔。

最基本的结构如下：

1
data: 这是第一条消息\n\n

id: 1\n event: chat\n data: 这是第二条带事件类型和ID的消息\n\n

3. 自带“断线重连”基因

在网络不稳定的现实世界中，连接断开是常有的事。SSE 的高级之处在于，浏览器的原生 API（EventSource）内置了自动重连机制：

  • 如果网络断开，浏览器会自动尝试重新连接服务器（默认每隔 3 秒）。
  • 服务器在发送数据时可以附带一个 id 字段。断线重连时，浏览器会自动在 HTTP 请求头中带上 Last-Event-ID: [上次收到的ID]。服务器看到后就能心领神会，把客户端错过的消息补发给它。