WebSocket与HTTP轮询、长轮询有什么区别？ - 面试题

在实时通信场景中，WebSocket、HTTP轮询和长轮询是三种常见的技术方案。

HTTP轮询（Polling）

工作原理

客户端定期向服务器发送HTTP请求，询问是否有新数据。

javascript
// 客户端轮询实现
setInterval(() => {
  fetch('/api/check-updates')
    .then(response => response.json())
    .then(data => {
      if (data.hasUpdates) {
        console.log('收到更新:', data.updates);
      }
    });
}, 5000); // 每5秒请求一次

优点

实现简单，兼容性好
服务器无需特殊配置
容易理解和使用

缺点

延迟高：最多等待一个轮询周期
资源浪费：大量无效请求
服务器压力大：频繁的HTTP请求
带宽浪费：每次请求都携带HTTP头部

HTTP长轮询（Long Polling）

工作原理

客户端发送请求后，服务器保持连接打开，直到有新数据或超时才返回。

javascript
// 客户端长轮询实现
function longPoll() {
  fetch('/api/long-poll')
    .then(response => response.json())
    .then(data => {
      console.log('收到数据:', data);
      longPoll(); // 立即发起新的请求
    })
    .catch(error => {
      setTimeout(longPoll, 5000); // 错误后延迟重试
    });
}
longPoll();

优点

实时性较好：服务器有数据立即返回
减少请求次数：相比短轮询减少无效请求

缺点

连接管理复杂：需要处理超时和重连
服务器资源占用：保持大量打开的连接
仍然有延迟：超时时间设置需要权衡

WebSocket

工作原理

建立持久连接，服务器和客户端可以随时发送消息。

javascript
// WebSocket实现
const ws = new WebSocket('ws://example.com/socket');

ws.onopen = () => {
  console.log('连接已建立');
};

ws.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

ws.onerror = (error) => {
  console.error('WebSocket错误:', error);
};

ws.onclose = () => {
  console.log('连接已关闭');
};

优点

真正的实时性：双向通信，零延迟
低开销：建立连接后只需少量数据传输
全双工：服务器和客户端可以同时发送消息
高效：减少HTTP头部开销

缺点

实现复杂度较高：需要处理连接状态、重连等
服务器要求高：需要支持WebSocket协议
兼容性问题：旧浏览器不支持
防火墙限制：某些网络环境可能阻止WebSocket

性能对比

指标	HTTP轮询	长轮询	WebSocket
实时性	低	中	高
服务器负载	高	中	低
带宽消耗	高	中	低
实现复杂度	低	中	高
浏览器兼容性	最好	好	良好

适用场景

HTTP轮询

数据更新频率低
实时性要求不高
简单的配置检查

长轮询

需要较好的实时性
服务器资源充足
不想引入WebSocket复杂度

WebSocket

高实时性要求
双向通信需求
频繁的数据交换
在线聊天、游戏、实时监控等