EventSource（SSE）：服务端推送与心跳

---

title: EventSource（SSE）：服务端推送与心跳

keywords:

• EventSource
• SSE
• 重连
• 心跳
• 服务端推送

description: 使用 Server-Sent Events 实现单向服务器推送，设计心跳与自动重连策略，简化文本流的实时更新场景。

categories:

• 文章资讯
• 编程技术

---

概述

SSE 通过 EventSource 从服务器接收事件流，浏览器内置重连机制并支持 Last-Event-ID。适合通知、行情与日志流等单向文本更新。

用法/示例

const es = new EventSource('/events')
es.onmessage = e => { const data = JSON.parse(e.data) }
es.addEventListener('ping', e => {/* 心跳 */})
es.onerror = () => {/* 浏览器将自动重连 */}

服务端（示意）：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache

event: ping
data: {}

id: 42
data: {"price":123}

工程建议

• 控制事件频率与 payload 大小；按需使用 event: 区分类型并携带 id 以支持断点续传。
• 结合反向代理与超时时间，避免长期连接被中断；必要时心跳保持。
• 不支持场景回退到轮询或 WebSocket。

参考与验证

• MDN：EventSource — https://developer.mozilla.org/docs/Web/API/EventSource
• WHATWG：Server-Sent Events — https://html.spec.whatwg.org/multipage/server-sent-events.html