Server-sent Events 和 Ajax 轮询比较

在前端开发中，我们通常需要向后端发送请求获取数据并更新页面。常见的方式有 Ajax 轮询和 Server-sent Events（以下简称 SSE）两种。本文将对这两种方式进行详细比较，并提供相应的示例代码。

Ajax 轮询

Ajax 轮询是一种通过重复向后端发送请求来获取最新数据的方式。其基本流程如下：

1. 前端发送请求到后端。
2. 后端返回最新数据。
3. 前端更新页面。
4. 前端等待一段时间后重复以上步骤。

Ajax 轮询的优点是实现简单，且兼容性较好。但其缺点也十分明显：

1. 频繁的请求会导致服务器压力增大。
2. 等待时间和请求次数的设置难以平衡，如果设置时间过短，会导致频繁请求，如果设置时间过长，会导致数据不及时更新。

以下是一个简单的 Ajax 轮询示例代码：

// javascriptcn.com 代码示例
function poll() {
  $.ajax({
    url: '/getLatestData',
    success: function(data) {
      updatePage(data);
    },
    complete: function() {
      setTimeout(poll, 5000);
    }
  });
}

Server-sent Events

SSE 是一种基于 HTTP 协议的实时推送技术。其基本流程如下：

1. 前端通过 EventSource 对象建立与后端的长连接。
2. 后端主动向前端推送最新数据。
3. 前端接收到数据后更新页面。

SSE 的优点是可以实现实时推送，且对服务器的压力较小。但其缺点也存在：

1. SSE 不兼容 IE 浏览器。
2. SSE 只能通过 HTTP 协议传输文本数据。

以下是一个简单的 SSE 示例代码：

// javascriptcn.com 代码示例
var source = new EventSource('/getLatestData');

source.addEventListener('message', function(event) {
  updatePage(event.data);
}, false);

source.addEventListener('error', function(event) {
  if (event.eventPhase === EventSource.CLOSED) {
    // 连接关闭，做相应处理
  }
}, false);

比较

通过上述介绍，我们可以看出，Ajax 轮询和 SSE 各有优缺点。在实际开发中，需要根据具体情况选择合适的方式。

如果需要实现实时推送，并且对 IE 浏览器的兼容性要求不高，可以选择 SSE。如果需要兼容 IE 浏览器，或者对实时性要求不高，可以选择 Ajax 轮询。

总结

本文对 Ajax 轮询和 SSE 进行了详细比较，并提供了相应的示例代码。在实际开发中，需要根据具体情况选择合适的方式。同时，我们也需要注意减少不必要的请求，以避免服务器压力过大。

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