javascript 中用 eventsource 接收 sse 的核心是创建连接、监听事件、处理数据，并注意错误重连和主动关闭。需用 new eventsource(url) 建立连接，监听 message 或自定义事件（如 addeventlistener('update', ...)），解析 e.data，监听 error 并检查 readystate，最后调用 es.close() 清理资源。
JavaScript 中用 EventSource 接收服务器发送事件（SSE）非常直接，核心是创建一个连接、监听事件、处理数据，同时注意错误重连和关闭时机。
基础用法：创建 EventSource 并监听 message 事件
最简场景下，服务器以 text/event-stream 响应，前端只需：
- 用
new EventSource(url)建立长连接 - 监听
message事件获取默认事件（无event:字段的消息） -
event.data是服务器推送的字符串内容（通常是 JSON 字符串，需手动JSON.parse）
示例：
const es = new EventSource('/api/events');
es.onmessage = function(e) {
console.log('收到消息:', e.data); // 如 '{"type":"update","value":100}'
try {
const data = JSON.parse(e.data);
console.log('解析后:', data);
} catch (err) {
console.warn('非 JSON 数据:', e.data);
}
};
监听自定义事件类型（如 event: update）
服务器可发送带 event: 标识的事件，前端用 addEventListener 按名称监听：
- 服务端响应片段：
event: update\nid: 123\ndata: {"status":"done"}\n\n - 前端监听：
es.addEventListener('update', e => { console.log('update 事件:', e.data); }); - 不推荐用
onupdate属性方式——它只支持标准事件名（如message、error），自定义事件必须用addEventListener
处理连接状态与错误重试
EventSource 自动重连（默认 3 秒），但你仍需关注连接是否真正可用：
-
es.readyState === 0：未连接（connecting） -
es.readyState === 1：已连接（open） -
es.readyState === 0或触发error事件时，可能因网络中断、CORS 失败或服务不可达导致失败 - 建议监听
error并检查es.readyState，避免误判为“连接中” - 如需自定义重连间隔，可在
error回调中es.close()后延时重建实例（覆盖默认行为）
示例错误处理：
es.onerror = function() {
if (es.readyState === 0) {
console.log('连接失败，正在重试...');
}
};
主动关闭与资源清理
页面卸载或不再需要接收事件时，务必调用 es.close()：
- 防止内存泄漏和无效请求持续占用连接
- 在组件卸载（如 React 的
useEffect cleanup、Vue 的beforeUnmount）中调用 - 关闭后
es.readyState变为0，且不会再触发任何事件
示例（通用写法）：
// 使用前
const es = new EventSource('/api/events');
// 页面离开或取消监听时
function cleanup() {
if (es && es.readyState !== 0) {
es.close();
}
}
// 调用 cleanup()
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
