EventSource通过new EventSource(url)建立GET长连接，自动重连，需服务端返回Content-Type: text/event-stream；监听用onmessage或addEventListener('event', handler)；错误时需查Network面板；跨域需withCredentials: true且服务端配置精确CORS。
如何用 EventSource 建立连接并监听推送
直接用 EventSource 构造函数就能发起长连接，它会自动重连（除非显式调用 close()），且只支持 GET 请求。服务端必须返回 Content-Type: text/event-stream，否则浏览器会拒绝解析。
常见错误是服务端漏设响应头，或返回了 302 重定向 —— EventSource 不跟随重定向，连接直接失败，控制台报 Failed to load resource: net::ERR_FAILED。
- 连接时传入服务端路径：
const es = new EventSource('/api/events'); - 监听默认事件：
es.onmessage = (e) => console.log(e.data); - 监听自定义事件（如服务端发
event: update）：es.addEventListener('update', handler); - 出错时触发
onerror，但不会告诉你具体错误原因，需结合 Network 面板查状态码和响应头
服务端推送格式必须严格符合 SSE 规范
SSE 不是随便拼 JSON 就行。每条消息由若干行组成，以空行分隔；每行以字段名加冒号开头，字段名只能是 data、event、id、retry 四种之一；data 行可多条，浏览器会把它们用换行符拼接后作为 e.data。
容易踩的坑：服务端写 res.write('{"msg":"ok"}\n\n')，没加 data: 前缀 → 浏览器直接忽略整条消息；或者混用了 \r\n 和 \n 导致解析中断。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确格式示例：
data: {"user": "alice", "status": "online"}\n\nevent: user_update\nid: 12345\nretry: 5000\n\n -
id字段用于断线重连时告诉服务端从哪条消息继续（服务端需配合实现） -
retry单位是毫秒，影响重连间隔，但浏览器不一定完全遵守
如何处理连接关闭、超时与跨域问题
EventSource 默认不带 cookie 和认证头，跨域时若需凭证，必须显式传 { withCredentials: true }，且服务端 Access-Control-Allow-Origin 不能为 *，得写具体域名。
连接长时间无数据，Nginx 或某些代理可能主动断开（默认超时 60 秒）。解决办法不是前端轮询，而是服务端定期发注释行（:keepalive\n\n）或空 data: 行保活。
- 启用凭证：
new EventSource('/api/events', { withCredentials: true }); - 手动关闭连接：
es.close()，之后再 new 一个新实例才能恢复 - 服务端保活建议用注释行：
res.write(':ping\n\n');，浏览器会忽略注释，但能重置连接超时计时器 - Chrome 控制台里，SSE 连接显示在 Network 标签页的
Other类型下，不是 XHR
为什么不用 fetch + ReadableStream 替代 EventSource
虽然现代浏览器支持用 fetch 读取流式响应，但 EventSource 仍是更稳妥的选择：它内置重连逻辑、自动处理消息边界、兼容 IE11 以外所有主流浏览器（包括 Safari 从 5.1 开始），而 ReadableStream 在 Safari 上直到 15.4 才支持 text() 的异步迭代，且要自己实现重连、ID 恢复、事件类型分发。
真正需要自定义控制时（比如想复用已有 fetch 中间件、或需 POST 初始化参数），才考虑手撸流解析 —— 但多数场景纯属增加复杂度。
-
EventSource的readyState只有 0（closed）、1（opening）、2（open），无法区分网络中断和服务端宕机 - 如果服务端推送频率极高（如 >100 条/秒），注意浏览器对单个
EventSource的并发限制（通常 6 个），避免新建过多实例 - 移动端 WebView（尤其旧版 Android）对 SSE 支持不稳定，上线前务必真机测试
