SSE 的服务端实现及其应用-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）是一种新兴的 Web 技术，它使得服务器能够向客户端推送即时数据，而无需客户端发起请求。它与 WebSockets 类似，但是更加轻量和易于实现。在本文中，我们将介绍 SSE 的基本概念和工作原理，以及如何在服务端实现 SSE 和在前端使用 SSE。

SSE 的基本概念和工作原理

SSE 技术与 AJAX 和 WebSockets 技术类似，都是用来实现实时数据传输的。不同之处在于：

AJAX 是通过轮询来获取数据的，消息是在客户端发起请求时返回的，不适宜实现实时数据传输。
WebSockets 是在客户端和服务器之间建立持久连接，可以实现双向通信，但是它需要客户端和服务端都实现 WebSockets 协议，一般用于大规模的实时数据传输。
SSE 是在客户端和服务器之间建立类似于“长轮询”的 HTTP 连接，但是客户端只发送一次请求，服务器会一直保持连接并向客户端发送事件消息，直到客户端关闭连接。

SSE 的数据传输格式是文本格式，格式如下：

event: eventType
data: message
id: messageId

event: eventType2
data: message2
id: messageId2

...

其中，event 表示事件类型，是一个可选字段；data 表示消息内容，必选字段；id 表示消息的唯一标识，是一个可选字段。服务器可以发送多个消息，每个消息之间用一个空行隔开。

下面是一个 SSE 的例子：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache

event: ping
id: 1
data: This is a ping message.

event: message
id: 2
data: This is a normal message.

event: message
id: 2
data: Another message.

客户端可以通过 JS 的 EventSource 对象来接收 SSE 消息，代码如下：

const source = new EventSource('http://example.com/stream');

source.addEventListener('ping', function(event) {
  console.log(event.data);
});

source.addEventListener('message', function(event) {
  console.log(event.data);
});

客户端可以监听多个事件类型，通过 EventSource 对象接收到消息后，可以对消息进行处理，比如显示在页面上、发送到另一个服务端等。

在服务端实现 SSE

在服务端实现 SSE 首先需要保持 HTTP 连接，这一般可以通过长轮询、HTTP 流或异步响应等方式实现。比如，在 Node.js 环境下，可以使用 http 或 express 模块提供的 API 实现 SSE。

下面是一个 SSE 服务端的示例代码：

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
  });

  setInterval(function() {
    res.write('event: ping\nid: 1\ndata: This is a ping message.\n\n');
  }, 1000);

  res.on('close', () => {
    console.log('Connection closed');
  });
}).listen(8080, () => {
  console.log('Server listening on port 8080');
});

这个服务端会在客户端连接上之后每隔 1 秒钟向客户端发送一条 ping 消息，直到客户端关闭连接。

在前端使用 SSE

在前端使用 SSE 需要通过 EventSource 对象来订阅服务器的事件。代码如下：

const source = new EventSource('http://localhost:8080');

source.addEventListener('ping', function(event) {
  console.log(event.data);
});

当服务器向客户端发送 SSE 消息时，EventSource 对象就会触发相应的事件，并传递消息给回调函数。

应用场景

SSE 主要用于实现实时消息传输，比如聊天室、股票行情、天气预报等。由于 SSE 的实现比 WebSocket 更加简单，且能够利用 HTTP 协议的长连接和缓存机制，因此在某些场合下，SSE 也可以代替 WebSocket。

总结

SSE 技术是一种轻量级的实时数据传输技术，与 AJAX 和 WebSocket 技术相比，它更加简单易用。在服务端实现 SSE 主要是保持 HTTP 连接，客户端可以通过 EventSource 对象订阅服务器的事件。SSE 主要用于实现实时消息传输，比如聊天室、股票行情、天气预报等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b6eac6add4f0e0fff88501