如何利用HTML的EventSource接口通过SSE接收服务端单向推送数据-html教程-PHP中文网

EventSource 失败主因是服务端未遵循 SSE 协议：需返回 200 状态码、Content-Type: text/event-stream、Cache-Control: no-cache，每条消息以 data: ...\n\n 结尾；前端须用绝对 URL、正确配置 CORS 与 credentials，并区分 onmessage 和 addEventListener 的触发条件。

如何利用html的eventsource接口通过sse接收服务端单向推送数据

前端用 EventSource 接收 SSE 数据，90% 的失败不是因为写法错，而是服务端没按协议吐出合法流 —— 浏览器卡在 pending 状态、反复触发 error 事件、onmessage 完全不触发，基本都指向服务端响应头或数据格式违规。

EventSource 初始化必须带完整 URL，且不能跨域裸用

直接传相对路径（如 '/events'）看似简洁，但一旦页面部署在子路径（比如 https://a.com/app/），实际请求会变成 https://a.com/app/events，而服务端路由可能只监听根路径。更关键的是跨域：若服务端没返回 Access-Control-Allow-Origin，连接会静默失败（onerror 触发但 event.target.readyState === 0），连 CORS 错误都看不到。

始终用绝对 URL，例如 new EventSource('https://api.example.com/sse')
服务端必须返回 Access-Control-Allow-Origin: https://your-frontend-domain.com（不能是 *，除非不带 credentials）
如果需要携带 cookie 或认证头，前端要加 { withCredentials: true }，服务端还得加 Access-Control-Allow-Credentials: true

onmessage 和 addEventListener 的触发条件完全不同

onmessage 只响应服务端未声明 event: 字段的“默认事件”；而自定义事件（如 event: update）必须用 addEventListener('update', ...) 显式监听，否则数据直接丢弃。

服务端输出 data: {"msg":"hello"}\n\n → 触发 onmessage
服务端输出 event: update\ndata: {"status":"ok"}\n\n → 只触发 addEventListener('update', ...)，onmessage 不动
所有事件里的 event.data 都是字符串，需手动 JSON.parse()，别假设它自动转对象

错误处理不能只靠 onerror，要结合 readyState 判断真实状态

onerror 是个“垃圾桶事件”，网络断开、CORS 拒绝、服务端返回 404、甚至服务端写了 res.end() 提前关闭连接，都会进这里。仅靠 console.error(error) 根本看不出问题在哪。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

检查 eventSource.readyState：0 表示未连接（重连中），1 表示已连接，2 表示已关闭
如果 readyState === 0 且频繁触发 onerror，优先查服务端是否返回了 200 + text/event-stream + no-cache
不要在 onerror 里无条件 new EventSource(...)，避免雪崩重连；加退避逻辑，比如 setTimeout(() => new EventSource(...), 5000)