使用 Server-sent Events 解决 Ajax 长轮询的痛点问题-JavaScript中文网-JavaScript教程资源分享门户

在开发 web 应用时，我们经常需要使用 Ajax 长轮询技术来获取实时更新的数据。长轮询的原理是客户端通过 Ajax 发送请求到服务器，服务器在有新数据时才返回响应，否则一段时间后返回一个空响应，然后客户端重复发送请求，一直等待服务器的响应。

尽管长轮询技术可以提供类似实时更新的效果，但是它也有一些痛点问题。例如，长轮询会有大量的无效请求造成服务器的资源浪费，且由于额外的请求和响应，也会增加通信的延迟和网络负荷。

为了解决这些问题，我们可以使用 Server-Sent Events（SSE）技术，它是一种基于 HTTP 协议的服务器推送技术，可以实现双向通信，通过一个简单的 HTTP 连接就可以实时获取实现数据。SSE 把数据推送到客户端而不是让客户端不断的发送请求。

SSE 的工作原理

SSE 可以看作是一种由服务器主动向客户端推送的“单向”的消息。其实现的原理很简单：通过建立一个 HTTP 连接，然后由服务器在任何时刻通过这个连接向客户端发送数据，这样客户端可以及时接收到最新的数据。由于这个 HTTP 连接是长连接，因此可以保持长时间的有效性，从而实现实时的通信效果。当客户端需要关闭 SSE 连接时，只需要断开连接即可，非常方便。

SSE 的协议基于 HTTP，它的报文也是 HTTP 报文。客户端通过创建 EventSource 对象来建立和服务器的连接，服务器端使用语言和框架实现对应的接口即可。

使用 SSE 实现实时数据更新

下面我们通过一个简单的例子来介绍使用 SSE 实现实时数据更新的方法：

// 客户端代码
if(typeof(EventSource)!=="undefined") {
  var source = new EventSource("/stream");  // 连接服务器
  source.onmessage = function(event) {      // 接收数据
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML="Your browser does not support server-sent events...";
}

// 服务器端代码（使用 Node.js + Express.js）
app.get('/stream', function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',          // 保持长连接
    // 设置重连时间
    'Retry-After': '5000'
  });
  setInterval(function() {              // 模拟实时数据更新
    data = parseInt(Math.random() * 100);
    res.write("data: "+data+"\n\n");    // 推送数据
  }, 1000);
})

在上面的例子中，我们通过 EventSource 对象来建立 SSE 连接，然后在 onmessage 事件中接收服务器推送的数据，并将数据显示到页面上。在服务器端，我们使用 Node.js 和 Express.js 框架来实现 SSE 的接口，通过将 Response 的 Content-Type 设置为 "text/event-stream"，并且设置 "Connection: keep-alive" 头信息来保持连接。在随后的代码中，我们使用 setInterval 函数来模拟实时的数据更新，并使用 res.write 函数将新的数据推送到客户端。

总结

在本文中，我们介绍了 SSE 技术的原理和使用方法，并且通过一个简单的例子来展示了如何使用 SSE 来实现实时数据更新效果。相比起 Ajax 长轮询技术，SSE 技术可以有效地减少对服务器资源的消耗和网络负荷，从而提高应用的效率和性能。同时，SSE 技术也非常简单易用，对后端语言和框架的支持也非常友好，因此可以广泛应用于 web 应用的开发中。

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