JavaScript中使用SSE接收服务端推送的核心是创建EventSource实例并监听事件，它基于HTTP长连接、单向（服务端→客户端）、自动重连，比WebSocket更轻量，适用于实时通知、日志流、数据刷新等场景。
JavaScript 中使用 Server-Sent Events（SSE）接收服务端推送，核心是创建 EventSource 实例并监听事件，它基于 HTTP 长连接、单向（服务端→客户端）、自动重连，比 WebSocket 更轻量，适合实时通知、日志流、数据刷新等场景。
1. 基础用法：建立连接并监听 message 事件
最简方式是用 new EventSource(url)，默认监听名为 message 的事件（即无 event: 声明的纯文本消息）：
const eventSource = new EventSource('/api/notifications');
eventSource.onmessage = function (e) {
console.log('收到消息:', e.data); // e.data 是字符串，需自行 JSON.parse
};
eventSource.onerror = function (err) {
console.error('SSE 连接出错:', err);
};
-
注意：服务端响应必须设置
Content-Type: text/event-stream，且每条消息以data: ... \n\n结尾（两个换行符分隔） -
自动重连：断开后浏览器默认约 3 秒后重试，可通过服务端发送
retry: 5000调整重连间隔（毫秒）
2. 监听自定义事件类型（event 字段）
服务端可发送带 event: 的消息，前端用 addEventListener 指定事件名接收：
// 服务端可能发送：
// event: user-update
// data: {"id":123,"name":"张三"}
eventSource.addEventListener('user-update', function (e) {
const userData = JSON.parse(e.data);
console.log('用户更新:', userData);
});
-
不推荐用
onuser-update这类属性方式绑定，因含短横线无法作为属性名；统一用addEventListener - 同一条消息可同时含
id、event、data、retry字段，浏览器会自动处理 ID 和重连逻辑
3. 控制连接生命周期与错误处理
手动关闭连接用 eventSource.close()；重连行为可通过服务端控制，前端也可监听状态判断：
-
eventSource.readyState === 0：关闭（EventSource.CLOSED） -
eventSource.readyState === 1：打开中（EventSource.CONNECTING） -
eventSource.readyState === 2：已连接（EventSource.OPEN） - 在
onerror中检查eventSource.readyState可区分是连接失败还是已断开 - 页面卸载前建议调用
close()，避免无效连接占用资源
4. 处理带 ID 的消息与断线续传
服务端每发一条消息可附带 id:，浏览器会在重连时自动在请求头带上 Last-Event-ID，服务端据此恢复推送位置：
// 服务端示例（Node.js/Express）
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('id: 1001\n');
res.write('event: order-status\n');
res.write('data: {"order_id":"ORD-789","status":"shipped"}\n\n');
- 前端无需手动读写
Last-Event-ID，浏览器自动管理 - 服务端收到该 header 后，应从对应 ID 之后的消息开始推送，实现“不丢不重”
- ID 可为数字或字符串，但需保证全局递增或有序，否则续传逻辑失效
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
