前端（二十四）——轮询与 WebSocket的battle

😃博主：小猫娃来啦
😃文章核心：轮询与 WebSocket的battle

前言

在现代Web应用中，实时通信已经成为用户体验的重要组成部分。实时通信指的是通过网站或应用程序实时传输数据并保持连接，在无需手动刷新页面的情况下更新内容。轮询和WebSocket都是用于现实时通信的技术。今天我们来对比一下这两种实现方式，看看到底哪个好。

轮询的原理及实现

什么是轮询
轮询是一种客户端不断向服务器发送请求以获取更新的数据的方式。客户端定期（通常使用定时器）向服务器发送请求，不管服务器是否有新数据。如果服务器没有更新，服务器返回空或者相同的响；如果有新数据，服务器会返回最新的数据。

轮询的工作原理
轮询的工作原理很简单。客户端发起请求，服务器检查是否有新数据。如果有，服务器返回数据；如果没有，服务器等待一段时间，然后返回空响应。客户端接收到响应后，再次发起请求，继续这个过程。

轮询的实现方式
轮询有两种常见的实现方式：定时轮询和递归轮询。定时轮询是设置一个固定的时间隔，每隔一段时间就发送一次请求；递归轮询是在每次请求的回调函数中再次发送请求。

以下是一个使用javascript的定时轮询示例：

function pollServer() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      // 处理服务器响应的数据
      console.log('Received data:', data);
      
      // 继续下一次轮询
      setTimeout(pollServer, 5000);
    });
}

// 开始轮询
pollServer();

WebSocket的原理及实现

什么是WebSocket
WebSocket是一种全双工、持久化的通信协议，可以在客户端和服务器之间建立实时的双向通信。与传统的HTTP请求-响应模型不同，WebSocket允许服务器主动向客户端推送数据，而不需要客户端不断发送请求。

WebSocket的工作原理
WebSocket的工作原理基于HTTP协议的升级。客户端向服务器发送一个特殊的Upgrade请求头，服务器收到请求后，如果支持WebSocket协议，将响应101 Switching Protocols，并将连接升级为全双工通信的WebSocket连接。之后，服务器和客户端都可以通过这个连接进行实时的双向通信。

WebSocket的实现方式
在前端，你可以使用WebSocket API与服务器建立WebSocket连接，并通过发送和接收消息来实现实时通信。在服务器端，你需要使用相应的后端框架或库来处理WebSocket连接和消息。

以下是一个使用JavaScript的WebSocket示例：

const socket = new WebSocket('ws://example.***/socket');

socket.onopen = function() {
  console.log('WebSocket connection established.');
};

socket.onmessage = function(event) {
  const data = event.data;
  // 处理收到的数据
  console.log('Received data:', data);
};

socket.onerror = function(error) {
  console.error('WebSocket error:', error);
};

socket.onclose = function() {
  console.log('WebSocket connection closed.');
};

以上代码示例中，我们创建了一个WebSocket对象，并通过监听事件来处理连接的建立、收到的数据、错误和连接关闭。

轮询与WebSocket的比较

性能比较
性能方面，WebSocket比轮询具有明显的优势。因为WebSocket使用持久化连接，不需要在每个请求中发送额外的头信息，减少了网络传输的开销。相比之下，轮询需要频繁地发送请求和接收响应，增加了不必要的网络流量。

实时性比较
WebSocket是一种实时双向通信协议，可以在服务器端有新数据时立即将其推送给客户端，实现实时更新。轮询依赖于定时发送请求，无法实时地获取到最新的数据，存在一定的延迟。

扩展性比较
由于WebSocket使用全双工通信，服务器可以主动向客户端推送数据，这使得WebSocket在处理大规模用户和实时数据推送场景中更具扩展性。轮询在大规模用户时会增加服务器的负载。

兼容性比较
WebSocket在现代浏览器中得到了广泛支持，包括最新版本的桌面和移动浏览器。然而，对于一些旧版浏览器，特别是IE系列的浏览器，可能不支持或提供低的兼容性。轮询可以在几乎所有的浏览器中工作，但存在性能和效率的问题。

开发复杂度比较
WebSocket在实现时相对复杂，需要在前端和后端分别实现相应的逻辑和处理器。而轮询的实现相对简单，只需在前端设置定时器和后端处理请求。因，如果项目对开发时间有限制或者开发资源有限，轮询可能是更简单的解决方案。

轮询的应用场景

实时聊天应用
轮询可以用于实现简单的即时聊天应用。前端定时向服务器发送请求获取最新的消息，实现简单的消息推送功能。

在线游戏应用
对于一些简单的在线游戏应用，轮询可以用于更新玩家之间的动态，例如玩家位置、分数等信息。

股票市场行情显示
在股票市场中，轮询可以用于获取最新的股票行情数据，并在页面上实时展示股票价格的变动。

其他实时数据展示应用
对于需要实时展示数据的应用，例如实时天气预报、实时交通状况，轮询可以用于获取最新的数据并实时更新展示。

WebSocket的应用场景

实时数据推送应用
WebSocket最适合于需要实时推送大量数据的应用场景，例如时股票市场行情、实时新闻推送等。通过建立持久的WebSocket连接，服务器可以主动向客户端推送实时数据，而不需要客户端发起请求。

即时协作应用
对于需要多人实时协作的应用，例如团协作编辑、在线白板等，WebSocket能够实现高效的实时通信，使得个用户之间可以实时共享信息和进行协作操作。

多人在线游戏应用
WebSocket可以用于构建多人在线游戏应用，玩家之间可以实时交互、共享游戏状态和进行实时的游戏操作。

其他需要实时双向通信的应用
WebSocket适用于任何需要实时双向通信的应用场景，例如实时聊天应用、实时客服系统、实时推送通知等。

使用场景的对比与选择

当选择轮询还是WebSocket时，需要根据具体的需求来决定。以下是一些考虑因素：

• 实时性需求：如果应用需要实时更新，能够快速推送数据给客户端，WebSocket是更好的选择。
• 性能要求：如果应用需要高性的实时通信，并且可以扩展到大量用户，WebSocket是更合适的方案。
• 兼容性要求：如果应用需要支持各种浏览器，尤其是旧版浏览器，轮询可能是更可靠的解决方案。
• 开发难度与成本：WebSocket的实现相对复杂，涉及到前端和后端的开发，而轮询的实现相对简单。

根据对这些因素的权衡，可以选择最适合应用需求的方案。

WebSocket的安全性考虑

在使用WebSocket时，需要考虑一些安全性方面的问题：

• 跨站脚本攻击（XSS）：使用WebSocket时，应确保对用户输入进行适当的验证和过滤，以防止跨站脚本攻击。

• 跨站请求伪造（CSRF）：WebSocket连接可能受到CSRF攻击的威胁。可以使用CSRF令牌或其他身份验证机制来防止此类攻击。

• 安全认证和授权：确保WebSocket连接的安全认证和授权机制。只有经过身份验证且具有适当权限的用户才能建立WebSocket连接。

• 数据加密：可以使用SSL/TLS协议对WebSocket连接进行加密，以确保数据在传输过程中的安全性。

WebSocket与服务器端推送技术的比较

WebSocket可以用于服务器端主动推送数据给客户端，与其他服务器端推送技术相比具有如下优势：

• 实时性：WebSocket具有实时双向通信的能力，可以实时推送数据给客户端，与服务器端轮询相比，可以更快地将数据发送到客户端。

• 性能：WebSocket使用持久连接，减少了网络传输的开销，且能够高效地处理大规模并发连接。

• 扩展性：WebSocket具备较高的扩展性，可以处理大量同时连接的用户，且不会造成服务器过载。

• 兼容性：WebSocket在现代浏览器中得到广泛支持，可以在各种平台和设备上运行。

• 开发复杂度：相较于其他服务器端推送技术，WebSocket的实现可能更复杂一些，需要在前端和后端分别实现相应的逻辑和处理器。

综上所述，WebSocket与其他服务器端推送技术相比，具有好的实时性、性能、扩展性和兼容性。然而，需要根据具体应用需求和开发资源的限制来选择合适的技方案。

总之，在实时通信方面，WebSocket是一种非常有用的技术，适用于需要实时双向通信的应用场景。与传统的轮询相比，WebSocket具有更好的性能和实时性，可以实现更好的用户体验和效率。同时，需要注意对WebSocket的安全性进行恰当的考虑和防护，以确保数据传输的安全性。