SSE 和长轮询技术的区别-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，实时性的需求越来越高。为了满足这一需求，出现了一些技术，比如 SSE 和长轮询。这两种技术都可以实现实时通信，但是它们有不同的优缺点和适用场景。

SSE（Server-Sent Events）

SSE 是一种基于 HTTP 的服务器推送技术。它允许服务器向客户端发送事件，这些事件可以是文本、JSON 或二进制数据。SSE 的优点包括：

简单易用。SSE 只需要一个 HTTP 连接，无需额外的握手或协议。
实时性好。SSE 可以实现真正的实时通信，因为它是服务器主动向客户端推送数据。
兼容性好。SSE 被大多数现代浏览器所支持。

SSE 的缺点包括：

只能支持单向通信。SSE 只能由服务器向客户端发送数据，客户端无法向服务器发送数据。
不支持跨域。SSE 只能在同源策略下使用，不能跨域。
不支持低版本浏览器。一些老旧的浏览器不支持 SSE。

下面是一个使用 SSE 的示例：

const eventSource = new EventSource('/stream');
eventSource.onmessage = function(event) {
  console.log('Received event: ', event.data);
};
eventSource.onerror = function(event) {
  console.error('Error occurred: ', event);
};

上面的代码创建了一个 EventSource 对象，向 /stream 发送请求，并监听 onmessage 和 onerror 事件。当服务器向客户端发送数据时，onmessage 事件会被触发。

长轮询（Long Polling）

长轮询是一种模拟实时通信的技术。它的原理是客户端向服务器发送一个请求，服务器保持连接打开，直到有数据可以发送给客户端。客户端接收到数据后，再立即发送下一个请求。长轮询的优点包括：

支持双向通信。客户端可以向服务器发送数据。
支持跨域。可以通过 JSONP 或 CORS 等方式跨域使用。
兼容性好。长轮询可以在大多数浏览器中使用。

长轮询的缺点包括：

实时性差。虽然长轮询可以模拟实时通信，但是由于客户端需要不断发送请求，所以实时性比 SSE 差。
实现复杂。长轮询需要客户端和服务器相互配合，实现比较复杂。
对服务器压力大。由于服务器需要保持连接打开，所以长轮询对服务器的压力比较大。

下面是一个使用长轮询的示例：

function poll() {
  fetch('/poll')
    .then(response => response.json())
    .then(data => {
      console.log('Received data: ', data);
      poll();
    })
    .catch(error => {
      console.error('Error occurred: ', error);
      setTimeout(poll, 5000);
    });
}

poll();

上面的代码使用 fetch 发送请求，服务器返回数据后，再继续发送下一个请求。如果出现错误，会等待 5 秒后再次发送请求。

总结

SSE 和长轮询都是实现实时通信的技术，它们各有优缺点和适用场景。如果需要实现真正的实时通信，推荐使用 SSE。如果需要支持双向通信或跨域使用，可以考虑使用长轮询。

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