简介
前端作为现代 Web 技术的一部分，往往需要与后端进行通信，在实现消息推送时，SSE 和长轮询是两种最常用的技术。它们的主要目的均是实时向客户端推送数据，但实现方法有所不同。本文将对这两种技术进行详细比较，并分析它们的优缺点，帮助读者在实际开发中选择更适合的技术方案。
SSE
SSE 全称为 Server-Sent Events，是浏览器原生的一种实现服务器向客户端推送数据的技术。SSE 实际上是长轮询的一种变体，采用了类似 Comet 的技术来达到实时推送的效果。客户端通过一个持久化链接，与服务器建立连接，服务器通过该链接向客户端不断发送数据，以达到实时推送的效果。
下面是一个 SSE 的示例代码：
var source = new EventSource('/api/sse');
source.onmessage = function(event) {
console.log(event.data); // 服务器推送过来的数据
};此处 EventSource 类是 HTML5 中的一种新对象，可以建立一个 SSE 的链接。在客户端代码中，我们通过 onmessage 回调函数来处理服务器推送过来的数据。
在服务器端，我们需要设置 Content-Type 标头为 text/event-stream，并将数据以一定格式发送给客户端。下面是一个 Node.js Express 服务器端的示例代码：
app.get('/api/sse', function(req, res) {
res.set('Content-Type', 'text/event-stream');
setInterval(function() {
res.write('data: ' + new Date() + '\n\n');
}, 1000);
});此处我们设置了一个定时器，每隔一秒钟向客户端发送一条数据，发送的数据需要以固定格式出现，即必须以 data: 开始，后面跟着实际数据，最后以 \n\n 结尾。
长轮询
长轮询是一种不断发送请求来检查服务器是否有新数据推送的技术，与普通的轮询相比，它不会在服务器没有新数据的情况下频繁地向服务器发送请求，而是等待服务器有新数据有才发送请求。这样可以有效减少无用的请求。
以下是一个长轮询的示例代码：
-- -------------------- ---- -------
-------- ------------- -
--------
---- --------------------
-------- -------------- -
------------------ -- ----------
-------------- -- --------
--
-------- ------ -- ----- -- -
------ ---------- -
-------------- -- --------
-
---
-
-------------- -- -------在客户端代码中，我们通过不断发送 Ajax 请求来检查服务器是否有新数据推送。在成功回调函数中，我们可以处理服务器推送过来的数据，并在当前请求结束后进行下一次长轮询。
在服务器端，我们需要等待一定时间来检查是否有新数据推送，如果没有，则等待一段时间后再次发送请求。以下是一个 Node.js Express 服务器端的示例代码：
app.get('/api/long-polling', function(req, res) {
function wait() {
setTimeout(function() {
res.send('Hello World!');
}, 5000);
}
wait();
});此处我们设置了一个定时器，等待 5 秒后向客户端发送数据。在实际项目中，我们需要从数据库或其他存储设备中获取最新数据并发送给客户端。
优缺点比较
下面是 SSE 和长轮询的优缺点比较：
SSE 的优点
- 实现简单，浏览器原生支持。
- 支持自定义的事件类型和消息数据。
- 保持长连接，可降低服务器的负载。
- 支持服务端推送，可在客户端不发送请求的情况下接收数据，减少网络流量。
SSE 的缺点
- 浏览器对 SSE 的支持度有限，IE 和 Edge 仅从 Edge 17 开始支持。
- 无法处理大量消息，浏览器存在一些消息积压的问题。
- 无法在服务端检测到客户端是否已经断开连接，需要手动处理如何处理连接断开的情况。
长轮询的优点
- 支持多种浏览器和旧版本的 IE。
- 可按需发送消息，能够灵活处理各种请求。
- 可在服务端检测到客户端连接的状态，可以更好地控制连接状态。
长轮询的缺点
- 需要不断地发送请求，增加了服务器的负载。
- 可能会存在多次请求不产生任何新数据的情况，浪费了网络带宽和服务器资源。
结论
SSE 和长轮询都是实现实时推送数据的有效技术，在实际项目中可以根据其特点选择不同的方案。一般来说，对于支持 SSE 的浏览器，建议使用 SSE 技术，因为其实现简单、流量小，并支持服务端推送，而对于不支持 SSE 的浏览器，则可以使用长轮询来实现实时数据推送。此外，我们还需要结合实际业务场景和服务器负载状况来进行技术选择，避免出现过度推崇某种技术而导致的性能问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6739358c317fbffedf15a6eb