前端开发中，请求后端数据是不可避免的事情。而请求方式可以使用轮询和长连接轮询。本文将着重介绍如何使用 Server-Sent Events 实现这两种方法，以及它们的比较。
Server-Sent Events 简介
Server-Sent Events （SSE）是一项 HTML5 技术，用于在客户端与服务器之间构建单向通讯。在普通的 HTTP 请求中，请求的响应只能是一次性的，即客户端发送请求后只有在收到响应后才能发下一次请求。而 SSE 允许服务器向客户端发送无限的数据流，客户端可以不断接收这些数据。
SSE 的主要用途是向客户端推送事件，例如即时通讯、实时数据更新等。客户端与服务器之间的交互过程是实时和持久的，即使客户端失去连接，同样可以继续接收消息。此外，SSE 只需要一次请求即可建立连接，同时也只需要保持一个 TCP 连接，并保持低负载和低延迟。
轮询 vs 长连接轮询
轮询
轮询是实现客户端与服务器交互的传统方式之一。其流程如下：
- 客户端发出请求。
- 服务器收到请求并返回数据。
- 客户端收到响应后重新发出请求。
在这个过程中，客户端会不断的向服务器发送请求，并等待响应，造成大量不必要的网络流量和服务器负载。
长连接轮询
长连接轮询（Comet）则是对轮询的改进，大部分原理跟普通的轮询基本相同，唯一不同的是，服务器不会立即返回响应，而是等待有数据时再返回。其流程如下：
- 客户端发出请求。
- 服务器收到请求，但暂时没有数据，进入等待状态。
- 服务器有数据时，立即返回响应。
- 客户端收到响应后，重新发出请求。
在这个过程中，服务器能够在等待期间节省资源，同时确保客户端能够实时获取到数据。但是长连接轮询依然需要依靠客户端不停的发起请求。
Server-Sent Events
Server-Sent Events 提供了一种比轮询和长连接轮询更优雅的解决方案。在 SSE 中，服务器可以通过单个连接向指定的客户端数据流发送事件，自动更新数据，而客户端可以实时接收这些事件。
使用 SSE 需要建立一条服务器向客户端推送事件的数据通道。这个通道保持连接状态，直到客户端和服务器之间的 TCP 连接关闭，或者通过代码关闭连接。
SSE 的代码实现很简单。服务器只需要通过 HTTP 规范的响应头设置“Content-Type”为“text/event-stream”，并通过每行消息的格式来发送消息。客户端可以通过 EventSource 对象来接收 SSE 数据流。
下面是服务器端的实现代码：
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = new Date();
res.write(`data: ${data}\n\n`);
}, 1000);
});
server.listen(3000);使用 SSE 的最大优点在于，它能够否决无休止的轮询和长连接轮询请求，减少网络流量和服务器压力，同时还能够实时发送事件流。
在客户端的代码实现也很简单：
const eventSource = new EventSource('/sse');
eventSource.onmessage = function (event) {
const message = event.data;
console.log(`Message: ${message}`);
};总结
总而言之，轮询和长连接轮询都有一些明显的缺陷。使用 Server-Sent Events 可以更轻松地推送实时事件，减少浏览器和服务器的负载，并增强用户体验。相对于 WebSocket 的功能较为简单，适用于一些简单的实时应用场景。
SSE 的实现很简单，但在某些情况下，需要在服务器端进行一些额外的设置，例如支持跨域请求、断线重连等等。因此，在实施 SSE 之前，需要仔细考虑应用的场景和需求，选择合适的实现策略。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65387a837d4982a6eb14eee7