【JavaScript】SSE

1.SSE 是以什么格式的数据发送的SSEServer-Sent Events 是一种单向通信的方式仅仅允许服务器主动向客户端推送数据。使用EventSource 对象在客户端与服务器建立持久连接通常是 HTTP 长连接然后通过这个连接接收服务器推送的事件数据。SSEServer-Sent Events的数据格式是text/event-stream即基于 UTF-8 编码的文本流只支持get请求。它有固定的格式规则每个事件由若干行组成以\n\n作为分隔符。常用字段data:消息内容可以多行客户端会拼接成一个字符串event:自定义事件名默认是messageid:消息 ID客户端断线重连时可以用Last-Event-ID继续retry:建议客户端重连间隔单位毫秒示例id: 1 event: message data: 这是第一条消息 event: news data: {title:新闻,content:今天有新内容}2.如何支持其他格式比如 JSON、body 数据SSE 传输的本质是文本所以如果要传 JSON → 用JSON.stringify转成字符串再放到data:如果要传二进制比如图片、文件 → 转成Base64 或 Blob 的字符串再传如果要传自定义格式 → 依然先序列化成文本HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive data: {message: Hello, world!}\n\n前端接收时再做反序列化evtSource.onmessage(event){try{constdataJSON.parse(event.data);console.log(收到 JSON:,data);}catch{console.log(收到文本:,event.data);}};总结SSE 不支持真正的body传输它就是基于HTTP 响应流。要支持其他格式必须自己封装成文本再传。3.如何封装 SSE为了更方便使用一般会对 SSE 封装一个工具类前端封装classSSEClient{constructor(url){this.sourcenewEventSource(url);}on(event,callback){this.source.addEventListener(event,(e){try{callback(JSON.parse(e.data));}catch{callback(e.data);}});}close(){this.source.close();}}// 使用constssenewSSEClient(/sse);sse.on(message,(data)console.log(默认消息:,data));sse.on(news,(data)console.log(新闻:,data));后端封装Node.jsfunctionsseHandler(req,res){res.setHeader(Content-Type,text/event-stream);res.setHeader(Cache-Control,no-cache);res.setHeader(Connection,keep-alive);functionsend(event,data,id){if(id)res.write(id:${id}\n);if(event)res.write(event:${event}\n);res.write(data:${typeofdatastring?data:JSON.stringify(data)}\n\n);}// 测试推送send(message,连接成功,1);setInterval(()send(news,{title:最新消息,ts:Date.now()}),3000);req.on(close,()console.log(客户端断开连接));}总结SSE 以text/event-stream文本流格式发送数据每个事件由data: ...构成以空行分隔。不支持直接发送 JSON、二进制要先序列化成字符串。JSON 用JSON.stringify二进制用 Base64。封装思路前端封装一个SSEClient自动 JSON 解析、事件监听后端封装一个send(event, data, id)工具函数统一格式化输出。