基于nodejs实现text/event-stream简单应用案例，SSE_nodejs sse

text/event-stream

是一种用于服务器向客户端推送事件的媒体类型（Media Type）。它是基于 HTTP 协议的一种流式传输技术，也被称为 Server-Sent Events（SSE）

1. 格式：text/event-stream 使用纯文本的格式，基于换行符分隔每个事 件。每个事件由多个字段组成，包括事件类型、数据等。常见字段有 event、data、id、retry 等（包含四个字段：event、data、id和retry。event表示事件类型，data表示消息内容，id用于设置客户端EventSource对象的“last event ID string”内部属性，retry指定了重新连接的时间）。
2. 事件流：服务器通过持久连接（长轮询或HTTP/2流）将事件流式传输给客户端。客户端通过监听 onmessage 事件来接收并处理从服务器发送的事件。
3. 服务器推送：服务器可以在任何时间点向客户端推送事件，无需客户端发起请求。这使得实时更新、通知和推送等应用场景变得可行，例如聊天应用、实时股票报价、即时通知等。
4. 处理丢失连接：
   1. 如果客户端与服务器之间的连接中断，客户端可以尝试重新连接以继续接收事件。
   2. 客户端可以使用 Last-Event-ID 请求头字段来指定从特定事件 ID 开始接收事件，以便处理连接断开后的事件不丢失。

使用 text/event-stream，服务器可以实现与客户端的实时双向通信，通过推送事件来传递实时数据和状态变化。它与其他实时通信技术（如 WebSocket）相比，更适合于单向的服务器向客户端的通信场景，不支持客户端向服务器发送消息。它提供了一种简单的方式来实现服务器推送的功能，且在浏览器端的兼容性较好。

代码实现

服务器端

const http = require('http');
const yun = express();
const eventServer = http.createServer((req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'Access-Control-Allow-Origin': "*",
        'Access-Control-Allow-Headers': 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With',
        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS'
    });
    setInterval(() => {
    	// 事件要用两个\n结束
        res.write('data: The server time is: ' + new Date() + '\n\n');
    }, 1000);
    req.connection.addListener('close', () => {
        console.log('SSE connection closed!');
    }, false);
}).listen(4001);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

前端

mounted() {
   const evtSource = new EventSource("http://localhost:4001/");
      evtSource.onmessage = function(event) {
         console.log('event', event)
          const serverTime = document.getElementById('serverTime');
          serverTime.innerHTML = event.data;
     };
 }
1
2
3
4
5
6
7
8

效果