SSE自定义事件类型由服务端通过event:行声明、客户端直接监听,无需前端解析;服务端须严格遵循协议格式(event:开头、data:紧随其后、结尾双换行),客户端用addEventListener("xxx")绑定,e.data需手动JSON.parse()。

SSE 自定义事件类型不是靠前端“解析”出来的,而是服务端按规范声明、客户端直接监听——关键在于两端严格遵循 SSE 协议格式,而不是在前端做字符串解析。
服务端必须用 event: 行显式声明类型
每条消息开头需带 event: xxx,紧跟着 data:(不能有空行或空格隔开),结尾必须是两个换行符 \n\n。例如:
event: user-login
data: {"userId": 101, "name": "Tom"}
\n\n
event: stock-price
data: {"symbol": "AAPL", "price": 192.34}
\n\n如果漏写 event: 行,这条消息就只会触发 message 事件,不会匹配任何自定义监听器。
客户端用 addEventListener("xxx") 直接监听,不需手动解析
EventSource 对象原生支持按事件名绑定处理器,只要名字和服务端 event: 后完全一致(区分大小写、连字符敏感):
const es = new EventSource("/api/events");
es.addEventListener("user-login", e => {
const payload = JSON.parse(e.data);
console.log("登录用户:", payload.name);
});
es.addEventListener("stock-price", e => {
const quote = JSON.parse(e.data);
updatePriceDisplay(quote.symbol, quote.price);
});注意:e.data 就是 data: 后的原始字符串,通常为 JSON,需手动 JSON.parse();e.type 是监听时传入的事件名(如 "user-login"),不是从响应里提取的。
常见错误与避坑点
立即学习“Java免费学习笔记(深入)”;
- 服务端
event:和data:之间不能有空行或多余空格 - 每条消息结尾必须是
\n\n(两个换行),少一个就会导致后续消息粘连 - 响应头必须包含
Content-Type: text/event-stream和Cache-Control: no-cache - 不要用
onmessage处理所有事件——它只捕获无event:的消息,无法替代自定义监听
本质上,这不是“解析”,而是协议级的事件路由机制。服务端写什么 event:,客户端就监听什么字符串,中间没有转换或推断过程。


















