长轮询是与服务器保持持久连接的最简单的方式，它不使用任何特定的协议，例如 WebSocket 或者 Server Sent Event。

它很容易实现，在很多场景下也很好用。

常规轮询

从服务器获取新信息的最简单的方式是定期轮询。也就是说，定期向服务器发出请求：“你好，我在这儿，你有关于我的任何信息吗？”例如，每 10 秒一次。

作为响应，服务器首先通知自己，客户端处于在线状态，然后 —— 发送目前为止的消息包。

这可行，但是也有些缺点：

  1. 消息传递的延迟最多为 10 秒（两个请求之间）。
  2. 即使没有消息，服务器也会每隔 10 秒被请求轰炸一次，即使用户切换到其他地方或者处于休眠状态，也是如此。就性能而言，这是一个很大的负担。

因此，如果我们讨论的是一个非常小的服务，那么这种方式可能可行，但总的来说，它需要改进。

长轮询

所谓“长轮询”是轮询服务器的一种更好的方式。

它也很容易实现，并且可以无延迟地传递消息。

其流程为：

  1. 请求发送到服务器。
  2. 服务器在有消息之前不会关闭连接。
  3. 当消息出现时 —— 服务器将对其请求作出响应。
  4. 浏览器立即发出一个新的请求。

对于此方法，浏览器发出一个请求并与服务器之间建立起一个挂起的（pending）连接的情况是标准的。仅在有消息被传递时，才会重新建立连接。

长轮询（Long polling） - 图1

如果连接丢失，可能是因为网络错误，浏览器会立即发送一个新请求。

实现长轮询的客户端 subscribe 函数的示例代码：

  1. async function subscribe() {
  2.   let response = await fetch("/subscribe");
  4.   if (response.status == 502) {
  5.     // 状态 502 是连接超时错误，
  6.     // 连接挂起时间过长时可能会发生，
  7.     // 远程服务器或代理会关闭它
  8.     // 让我们重新连接
  9.     await subscribe();
  10.   } else if (response.status != 200) {
  11.     // 一个 error —— 让我们显示它
  12.     showMessage(response.statusText);
  13.     // 一秒后重新连接
  14.     await new Promise(resolve => setTimeout(resolve, 1000));
  15.     await subscribe();
  16.   } else {
  17.     // 获取并显示消息
  18.     let message = await response.text();
  19.     showMessage(message);
  20.     // 再次调用 subscribe() 以获取下一条消息
  21.     await subscribe();
  22.   }
  23. }
  25. subscribe();

正如你所看到的，subscribe 函数发起了一个 fetch，然后等待响应，处理它，并再次调用自身。

服务器应该可以处理许多挂起的连接

服务器架构必须能够处理许多挂起的连接。

某些服务器架构是每个连接对应一个进程。对于许多连接的情况，将会有很多进程，并且每个进程占用大量内存。因此，过多的连接会消耗掉全部内存。

使用 PHP，Ruby 语言编写的后端程序会经常遇到这个问题，但是从技术上讲，它不是语言问题，而是实现问题。大多数现代编程语言都允许实现适当的后端，但是其中一些语言比其他语言更容易实现。

使用 Node.js 写的后端通常不会出现这样的问题。

示例：聊天

这是一个聊天演示，你可以下载它并在本地运行（如果你熟悉 Node.js 并且可以安装模块）：

结果

browser.js

server.js

index.html

  1. // Sending messages, a simple POST
  2. function PublishForm(form, url) {
  4.   function sendMessage(message) {
  5.     fetch(url, {
  6.       method: 'POST',
  7.       body: message
  8.     });
  9.   }
  11.   form.onsubmit = function() {
  12.     let message = form.message.value;
  13.     if (message) {
  14.       form.message.value = '';
  15.       sendMessage(message);
  16.     }
  17.     return false;
  18.   };
  19. }
  21. // Receiving messages with long polling
  22. function SubscribePane(elem, url) {
  24.   function showMessage(message) {
  25.     let messageElem = document.createElement('div');
  26.     messageElem.append(message);
  27.     elem.append(messageElem);
  28.   }
  30.   async function subscribe() {
  31.     let response = await fetch(url);
  33.     if (response.status == 502) {
  34.       // Connection timeout
  35.       // happens when the connection was pending for too long
  36.       // let's reconnect
  37.       await subscribe();
  38.     } else if (response.status != 200) {
  39.       // Show Error
  40.       showMessage(response.statusText);
  41.       // Reconnect in one second
  42.       await new Promise(resolve => setTimeout(resolve, 1000));
  43.       await subscribe();
  44.     } else {
  45.       // Got message
  46.       let message = await response.text();
  47.       showMessage(message);
  48.       await subscribe();
  49.     }
  50.   }
  52.   subscribe();
  54. }
  1. let http = require('http');
  2. let url = require('url');
  3. let querystring = require('querystring');
  4. let static = require('node-static');
  6. let fileServer = new static.Server('.');
  8. let subscribers = Object.create(null);
  10. function onSubscribe(req, res) {
  11.   let id = Math.random();
  13.   res.setHeader('Content-Type', 'text/plain;charset=utf-8');
  14.   res.setHeader("Cache-Control", "no-cache, must-revalidate");
  16.   subscribers[id] = res;
  18.   req.on('close', function() {
  19.     delete subscribers[id];
  20.   });
  22. }
  24. function publish(message) {
  26.   for (let id in subscribers) {
  27.     let res = subscribers[id];
  28.     res.end(message);
  29.   }
  31.   subscribers = Object.create(null);
  32. }
  34. function accept(req, res) {
  35.   let urlParsed = url.parse(req.url, true);
  37.   // new client wants messages
  38.   if (urlParsed.pathname == '/subscribe') {
  39.     onSubscribe(req, res);
  40.     return;
  41.   }
  43.   // sending a message
  44.   if (urlParsed.pathname == '/publish' && req.method == 'POST') {
  45.     // accept POST
  46.     req.setEncoding('utf8');
  47.     let message = '';
  48.     req.on('data', function(chunk) {
  49.       message += chunk;
  50.     }).on('end', function() {
  51.       publish(message); // publish it to everyone
  52.       res.end("ok");
  53.     });
  55.     return;
  56.   }
  58.   // the rest is static
  59.   fileServer.serve(req, res);
  61. }
  63. function close() {
  64.   for (let id in subscribers) {
  65.     let res = subscribers[id];
  66.     res.end();
  67.   }
  68. }
  70. // -----------------------------------
  72. if (!module.parent) {
  73.   http.createServer(accept).listen(8080);
  74.   console.log('Server running on port 8080');
  75. } else {
  76.   exports.accept = accept;
  78.   if (process.send) {
  79.      process.on('message', (msg) => {
  80.        if (msg === 'shutdown') {
  81.          close();
  82.        }
  83.      });
  84.   }
  86.   process.on('SIGINT', close);
  87. }
  1. <!DOCTYPE html>
  2. <script src="browser.js"></script>
  4. All visitors of this page will see messages of each other.
  6. <form name="publish">
  7.   <input type="text" name="message" />
  8.   <input type="submit" value="Send" />
  9. </form>
  11. <div id="subscribe">
  12. </div>
  14. <script>
  15.   new PublishForm(document.forms.publish, 'publish');
  16.   // random url parameter to avoid any caching issues
  17.   new SubscribePane(document.getElementById('subscribe'), 'subscribe?random=' + Math.random());
  18. </script>

浏览器代码在 browser.js 中。

使用场景

在消息很少的情况下，长轮询很有效。

如果消息比较频繁，那么上面描绘的请求-接收（requesting-receiving）消息的图表就会变成锯状状（saw-like）。

每个消息都是一个单独的请求，并带有 header，身份验证开销（authentication overhead）等。

因此，在这种情况下，首选另一种方法，例如：Websocket 或 Server Sent Events。