JavaScript监听SSE自定义事件需服务端严格按event: name+data: content格式发送，客户端用addEventListener("name")精确匹配（大小写敏感），并添加error兜底和close清理。
JavaScript 中监听 SSE 自定义事件，关键在于服务端按标准格式发送带 event: 字段的消息，客户端用 EventSource.addEventListener("事件名") 精确匹配监听——事件名区分大小写，且必须与服务端 event: 后的字符串完全一致。
服务端要发对格式
SSE 自定义事件不是随便起个名就能用。服务端响应必须严格遵循文本流规范：
- 每条消息以
event: your-event-name开头，紧接换行 - 随后是
data:行（可多行），内容为纯文本（通常是 JSON 字符串） - 消息之间用两个换行符
\n\n分隔 -
event:和data:不能有空格、多余字符或错位
例如合法响应片段：
event: user-logindata: {"userId": 456, "name": "Bob"}
event: payment-confirmed
data: {"txId": "TX-2026", "amount": 99.9}
客户端用 addEventListener 绑定指定名称
不要用 onmessage 或 onxxx 属性方式——它们只识别内置事件（如 message、error）。自定义事件必须走 addEventListener：
立即学习“Java免费学习笔记（深入）”；
- 创建连接：
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而非\n\n - 没处理
e.data是空字符串或非 JSON 的情况，直接JSON.parse报错
