Ja vaScript监听SSE自定义事件，关键在于两点：服务端严格按event: name+data: content格式发送，客户端再用 addEventListener("name") 精确匹配。同时要注意，事件名大小写敏感，并且建议补上 error 兜底和 close 清理。

在 Ja vaScript 里监听 SSE 的自定义事件，核心就是：服务端消息里必须包含 event: 字段；客户端通过 EventSource.addEventListener("事件名") 监听对应事件。

这里有个很容易踩坑的细节：事件名区分大小写。客户端监听名称必须和服务端 event: 后面的字符串完全一致，一字不差。

服务端要发对格式

SSE 自定义事件不能随意发送。服务端响应必须严格遵循文本流规范。

• 每条消息以 event: your-event-name 开头，紧接换行
• 随后是 data: 行，可多行，内容为纯文本，通常是 JSON 字符串
• 消息之间用两个换行符 nn 分隔
• event: 和 data: 不能有空格、多余字符或错位

合法响应示例

event: user-login
data: {"userId": 456, "name": "Bob"}

event: payment-confirmed
data: {"txId": "TX-2026", "amount": 99.9}

客户端用 addEventListener 绑定指定名称

自定义事件不要用 onmessage 或 onxxx 属性方式。它们只识别内置事件，比如 message、error。

自定义事件必须使用 addEventListener。

• 创建连接：const es = new EventSource("/api/events");
• 监听 user-login：es.addEventListener("user-login", e => { console.log("登录数据:", JSON.parse(e.data)); });
• 监听 payment-confirmed：es.addEventListener("payment-confirmed", e => { /* 处理支付确认 */ });
• 注意：事件名大小写敏感，“User-Login” ≠ “user-login”

别漏掉兜底和错误处理

即使用了自定义事件，也建议保留基础保障，避免连接异常时难以排查。

• 监听 error 事件检查连接状态：es.addEventListener("error", () => { if (es.readyState === 0) console.warn("连接已断开"); });
• 可选监听 message 作为未命名消息的兜底处理，比如服务端偶尔不带 event:
• 页面卸载前调用 es.close()，避免内存泄漏

常见踩坑点

很多问题并不复杂，往往都出在格式和命名这些细节上。

• 服务端返回了 Content-Type: text/event-stream，但消息里漏了 event:，或写成 Event:，大小写错误
• 前端监听名写成 "User-Login"，而服务端发的是 event: user-login
• data: 后面多了一个空格，或者消息结尾只有一个 n 而非 nn
• 没处理 e.data 是空字符串或非 JSON 的情况，直接 JSON.parse 报错

《夸克》非常好用的免费AI浏览器

下载APP查看