长轮询：保持与服务器连接的简单之道

前端

2024-01-22 10:42:49

长轮询是一种与服务器保持持久连接的最简单方法，无需依赖 WebSocket 或 SSE 等特殊协议。本文将深入探讨长轮询的工作原理，它的优缺点，以及如何使用它来创建交互式 web 应用程序。

长轮询的工作原理

长轮询的工作原理很简单：

客户端向服务器发送一个 HTTP 请求。
服务器保持该请求处于打开状态，直到有新数据可用或达到超时时间。
当有新数据可用或达到超时时间时，服务器向客户端发送响应，然后关闭请求。
客户端处理响应中的数据，并在必要时发送另一个请求。

长轮询的优点

长轮询具有以下优点：

简单易懂： 长轮询易于理解和实现。它不需要任何特殊的协议或库。
兼容性强： 长轮询与所有支持 HTTP 的浏览器兼容。
可靠： 长轮询是一种可靠的方法来保持与服务器的连接。如果连接断开，客户端可以重新建立连接并继续接收更新。

长轮询的缺点

长轮询也有一些缺点：

资源密集： 长轮询需要服务器保持多个打开的连接，这可能会消耗大量的服务器资源。
延迟： 长轮询会引入延迟，因为服务器需要等待数据可用或超时时间才响应请求。
缺乏双向通信： 长轮询仅支持单向通信，即从服务器到客户端。

如何使用长轮询

要使用长轮询，您需要在客户端和服务器端实现它。

客户端端实现

客户端端实现需要发送一个 HTTP 请求并监听服务器响应。以下是使用 JavaScript 实现长轮询的一个示例：

function longPoll() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/long-poll");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        // 处理服务器响应
      } else {
        // 发生错误
      }
      longPoll();
    }
  };
  xhr.send();
}

longPoll();

服务器端实现

服务器端实现需要处理客户端请求并保持它们处于打开状态，直到有新数据可用或达到超时时间。以下是使用 Node.js 实现长轮询的一个示例：

const http = require("http");

const server = http.createServer((req, res) => {
  if (req.url === "/long-poll") {
    // 保持请求处于打开状态
    res.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive",
    });
    res.write("\n");

    // 每 1 秒发送一次事件
    setInterval(() => {
      res.write(`data: ${Date.now()}\n\n`);
    }, 1000);
  }
});

server.listen(3000);