SSE（Server-Sent Event）

SSE 简介

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

特点

单工通讯

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

技术实现

基于 HTTP 协议

数据格式

文本数据

跨域

浏览器跨域限制

状态

open

message

Error

服务端使用

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()