「JavaScript深入」轮询（Polling）：基础的实时通信方式

在 Web 开发中，实现服务器与客户端的实时通信有多种方式，其中轮询（Polling）是一种最基本的方法。轮询可以分为短轮询（Short Polling）和长轮询（Long Polling），它们各有优缺点，并在特定场景下仍然被广泛使用。

---

轮询技术概述

1. 基本原理

• 客户端主动请求： 定期向服务器发送HTTP请求
• 服务器响应数据： 返回当前可用数据或保持连接
• 实现简单： 基于标准HTTP协议，无需特殊服务器支持

2. 技术对比

短轮询 vs 长轮询 vs WebSocket 对比

特性	短轮询	长轮询	WebSocket
连接方式	周期性请求	持续等待请求	持续打开连接
请求频率	固定间隔	事件驱动	持续连接
服务器压力	高	中等	低
延迟	高	低	极低
适用场景	数据更新不频繁	需要更快更新	高频双向通信
实现复杂度	简单	中等	较高

---

短轮询（Short Polling）

1. 短轮询的工作原理

短轮询是一种简单的 HTTP 请求机制，客户端会定期向服务器发送请求，检查是否有新的数据。如果服务器有新数据，就返回数据；否则，返回空响应。

2. 短轮询示例（JavaScript + Express 服务器）

服务器端（Node.js + Express）

const express = require('express');
const app = express();
const port = 3000;

let messages = [];

app.get('/poll', (req, res) => {
  res.json({ messages });
  messages = []; // 清空已发送消息
});

app.post('/send', express.json(), (req, res) => {
  messages.push(req.body.message);
  res.sendStatus(200);
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

客户端（HTML + JavaScript）

<script>
function pollServer() {
  fetch('/poll')
    .then(response => response.json())
    .then(data => {
      if (data.messages.length > 0) {
        console.log('New messages:', data.messages);
      }
    })
    .catch(err => console.error('Polling error:', err));
  
  setTimeout(pollServer, 5000); // 每 5 秒轮询一次
}

pollServer();
</script>

3. 短轮询的优缺点

优点：

• 简单易实现，不需要 WebSocket 或 SSE。
• 适用于数据更新不频繁的场景。

缺点：

• 请求频繁，可能会对服务器造成较大压力。
• 即使没有新数据，仍会发送 HTTP 请求，浪费带宽。
• 延迟较高，数据更新不够实时。

---

长轮询（Long Polling）

1. 长轮询的工作原理

长轮询与短轮询类似，但区别在于：当服务器暂时没有新数据时，它不会立即返回响应，而是保持请求打开，直到有新数据可用。

2. 长轮询示例（JavaScript + Express 服务器）

服务器端（Node.js + Express）

const express = require('express');
const app = express();
const port = 3000;

let pendingRequests = [];

app.get('/longpoll', (req, res) => {
  pendingRequests.push(res);
});

app.post('/send', express.json(), (req, res) => {
  const message = req.body.message;
  pendingRequests.forEach(res => res.json({ message }));
  pendingRequests = []; // 清空请求队列
  res.sendStatus(200);
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

客户端（HTML + JavaScript）

<script>
function longPoll() {
  fetch('/longpoll')
    .then(response => response.json())
    .then(data => {
      console.log('Received message:', data.message);
      longPoll(); // 重新发起请求
    })
    .catch(err => {
      console.error('Long polling error:', err);
      setTimeout(longPoll, 5000); // 发生错误时，5 秒后重试
    });
}

longPoll();
</script>

3. 长轮询的优缺点

优点：

• 减少了短轮询的无效请求，降低了服务器压力。
• 能更快地响应新数据，提高实时性。

缺点：

• 每个客户端会占用服务器的连接资源，可能导致并发处理能力下降。
• 仍然基于 HTTP 请求，连接建立和关闭会有一定开销。

4. 优化策略

• 超时处理： 设置合理的超时时间（如30秒）

• 心跳机制： 定期发送空响应保持连接

• 连接管理： 限制最大连接数，防止资源耗尽

---

性能对比与优化

1. 请求数量对比

时间周期	短轮询请求数	长轮询请求数
1分钟	12次	1-2次
1小时	720次	60-120次

2. 服务器资源占用

• 短轮询：

  • 高CPU占用（频繁处理请求）
  • 内存占用稳定

• 长轮询：

  • 较低CPU占用
  • 较高内存占用（保持连接）

3. 优化建议

• 缓存机制： 减少数据库查询

• 连接复用： 使用HTTP/2

• 负载均衡： 分布式部署

---

轮询的应用场景

• 短轮询适用场景：

  • 低频数据更新，如每分钟一次的天气数据获取。
  • 服务器端负载敏感，不希望长时间保持连接。

• 长轮询适用场景：

  • 需要更实时的数据更新，如在线通知系统。
  • 服务器可以支持一定数量的长时间挂起请求。

• WebSocket 更适合的场景：

  • 高并发和高频数据交换，如在线聊天、游戏。
  • 需要服务器和客户端同时能够发送消息的应用。

---

现代替代方案

1. WebSocket 【详解：WebSocket：高效的双向实时通信技术】

// 建立WebSocket连接
const socket = new WebSocket('wss://example.com');

socket.onmessage = (event) => {
  processUpdates(JSON.parse(event.data));
};

2. Server-Sent Events (SSE)【详解：Server-Sent Events (SSE)：轻量级实时通信技术】

// 创建EventSource
const es = new EventSource('/api/sse');

es.onmessage = (event) => {
  processUpdates(JSON.parse(event.data));
};

3. 技术选型建议

场景	推荐技术
简单状态检查	短轮询
中等实时性要求	长轮询
高实时性要求	WebSocket
服务端推送	SSE
双向通信	WebSocket

---

安全与可靠性

1. 安全防护

• 认证授权： 验证客户端身份

• 速率限制： 防止滥用

• 数据校验： 严格验证输入数据

2. 可靠性保障

• 重试机制： 指数退避策略

• 错误处理： 优雅降级

• 监控报警： 实时监控系统状态

---

总结

轮询是一种基础的实时通信方式，短轮询简单但效率较低，长轮询优化了数据获取的实时性，但仍然受限于 HTTP 连接的开销。对于高频双向通信需求，WebSocket 通常是更好的选择。

选择何种方式，应根据具体应用需求、服务器资源和客户端环境进行权衡！