SSE 与 Long Polling：长连接和短连接的优缺点-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 应用中，客户端和服务器之间的通信方式有很多种，其中最基本的就是短连接，也就是客户端向服务器发送请求，服务器返回响应，然后连接就断开了。但是在某些场景下，这种短连接的方式就无法满足需求了，比如实时通信、消息推送等场景。为了解决这些问题，长连接技术应运而生，其中 SSE 和 Long Polling 是比较常用的两种。

SSE（Server-Sent Events）

SSE 是一种浏览器与服务器之间的单向通信技术，它允许服务器向客户端发送事件。它的优点在于实现简单，不需要像 WebSocket 那样实现复杂的协议，而且 SSE 可以通过 HTTP/HTTPS 协议进行通信，因此更容易穿透防火墙。

实现原理

SSE 的实现原理是基于 HTTP 长连接的，客户端向服务器发送一个 HTTP 请求，服务器返回一个响应，并保持连接打开。当服务器有新的事件需要推送时，就通过这个连接发送事件信息，这样客户端就可以实时获取到服务器推送的数据。

优点

实现简单，不需要复杂的协议
可以通过 HTTP/HTTPS 协议进行通信，更容易穿透防火墙
对服务器资源的消耗比较小，可以支持大量的客户端连接

缺点

SSE 只能实现服务器向客户端的单向通信，无法实现双向通信
SSE 无法像 WebSocket 那样进行二进制数据的传输
SSE 对浏览器的兼容性有一定要求，不支持 IE 浏览器

实例代码

// javascriptcn.com 代码示例
const eventSource = new EventSource('/sse');

eventSource.addEventListener('message', event => {
  console.log('收到消息：', event.data);
});

eventSource.addEventListener('error', event => {
  console.error('连接发生错误：', event);
});

Long Polling

Long Polling 是一种模拟实时通信的技术，它通过客户端向服务器发送一个请求，服务器在接收到请求后不会立即返回响应，而是等待一段时间，如果有新的数据推送，就立即返回响应，否则等到一定的时间后返回一个空响应，客户端再次发起请求，如此循环，就可以实现长连接的效果。

实现原理

Long Polling 的实现原理是客户端向服务器发送一个 HTTP 请求，服务器在接收到请求后不会立即返回响应，而是等待一段时间，如果有新的数据推送，就立即返回响应，否则等到一定的时间后返回一个空响应，客户端再次发起请求，如此循环，就可以实现长连接的效果。

优点

可以模拟实时通信的效果，实现简单
对浏览器的兼容性较好，支持大多数浏览器

缺点

对服务器资源的消耗比较大，因为需要等待一定的时间才能返回响应
如果服务器推送数据的频率比较高，就会导致长轮询的效果失效，因为客户端的请求会被服务器频繁打断

实例代码

// javascriptcn.com 代码示例
function longPolling() {
  fetch('/long-polling')
    .then(response => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error('请求失败');
      }
    })
    .then(data => {
      console.log('收到消息：', data);
      longPolling();
    })
    .catch(error => {
      console.error('连接发生错误：', error);
      setTimeout(longPolling, 5000);
    });
}

longPolling();

总结

SSE 和 Long Polling 是两种实现长连接的技术，它们各有优缺点，应根据具体场景选择合适的技术。如果需要实现双向通信或者二进制数据传输，就应该选择 WebSocket；如果需要模拟实时通信的效果，就可以选择 SSE 或者 Long Polling。

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