SSE（Server-Sent Event）

SSE 简介

Server-Sent Event，是一种基于 HTTP 协议建立的服务端与浏览器之间的长连接，是一种单工通信方式，仅服务端向客户端发送消息

特点

单工通讯

长连接，server 向浏览器持续发送新数据

技术实现

基于 HTTP 协议

数据格式

文本数据

跨域

浏览器跨域限制

状态

open

message

Error

使用场景

chatGPT 返回数据的方式就是基于 SSE 技术

实时数据大屏，如果只是展示后端实时数据而无需前端交互，就可以用 SSE，而不是一定要用 webSocket

服务端使用

1. 建立 SSE 连接

   res.writeHead(200, {
     'Content-Type': 'text/event-stream',
   });

2. 自定义 SSE 事件名称，默认为 message

   res.write('event:lyrics\n');

3. 返回数据

   res.write(`data: ${mockData[current]}\n\n`);

客户端使用

1. 建立 SSE 连接

   const sse = new EventSource('/api/sse/sse');

2. 监听消息。如果后端没有自定义事件名称，默认为 message

   通过 e.data 获取消息

   sse.addEventListener('lyrics', (e) => {
     content += e.data;
     divDOM.innerHTML = content
   })

3. 关闭连接

   sse.close()