html5 http的轮询和Websocket原理

HTML5 HTTP轮询和Websocket是现代web开发中最重要的实时通信技术。它们都可以在客户端和服务器之间实现双向通信，但在实现方式和效率上有所不同。

HTML5 HTTP轮询

HTML5 HTTP轮询是一种通过HTTP长连接保持持久状态的技术。在轮询过程中，客户端在一定时间间隔内不断向服务器发送请求，服务器在收到请求后返回最新的数据。客户端会不断轮询服务器，直到有新的数据返回。

下面是一个使用HTML5 HTTP轮询的示例说明：

客户端代码：

function pollServer() {
  $.ajax({
    url: '/get_data',
    dataType: 'json',
    success: function(data) {
      // 处理返回的数据
      // ...
      pollServer();
    },
    error: function(xhr, status, error) {
      // 处理错误
      // ...
    },
    timeout: 10000 // 轮询超时时间
  });
}

pollServer();

服务器端代码：

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/')
def index():
    return app.send_static_file('index.html')

@app.route('/get_data')
def get_data():
    # 获取最新的数据
    data = {'foo': 'bar'}
    return jsonify(data)

在这个示例中，我们使用了jQuery的$.ajax方法来发送GET请求，同时设置dataType为’json’以表示返回的数据为JSON格式。在成功的回调函数中处理返回的数据，并在轮询函数的最后递归执行轮询函数。在发生错误的回调函数中，可以进行错误处理以确保轮询不会中断。

虽然HTML5 HTTP轮询可以实现实时通信，但也存在一些缺点，包括：

延迟较高。轮询操作的时间间隔将会影响到延迟时间，轮询时间间隔过短会导致服务器负载过高，轮询时间间隔过长会导致延迟时间变长。
流量和计算成本较高。轮询会产生大量的HTTP请求，这会占用大量的带宽、CPU和内存资源，从而增加部署和运营成本。
实时性差。由于所有的请求都需要经过HTTP协议，所以实时性受到限制，无法像原生的socket那样实时。

Websocket

Websocket是一种基于TCP协议的全双工通信协议。通过Websocket协议，客户端和服务器可以在连接建立之后随时互相发送消息，而不需要像HTTP那样重新建立连接。

下面是一个使用Websocket的示例解释：

客户端代码：

var ws = new WebSocket('ws://localhost:8080/');

ws.onopen = function() {
  // 连接成功
};

ws.onerror = function(event) {
  // 发生错误
};

ws.onclose = function(event) {
  // 连接关闭
};

ws.onmessage = function(event) {
  // 处理返回的数据
  var data = JSON.parse(event.data);
  // ...
};

服务器端代码：

from flask import Flask
from flask_sockets import Sockets
import json

app = Flask(__name__)
sockets = Sockets(app)

@sockets.route('/echo')
def echo_socket(ws):
  while not ws.closed:
    message = ws.receive()
    if message:
      # 处理返回的数据
      data = {'foo': 'bar'}
      ws.send(json.dumps(data))

在这个示例中，我们使用JavaScript的WebSocket对象来创建一个Websocket连接，该连接需要指定服务器端的URL地址。在客户端代码中，我们定义了open、error、close和message等四个事件处理函数，在连接建立之后、连接发生错误、连接关闭和接收到数据时分别进行回调。

在服务器端代码中，我们使用了Flask-Sockets扩展来监听Websocket连接，同时在echo_socket函数中定义了一个循环来不断接收客户端发送的数据并向客户端发送数据。

与HTML5 HTTP轮询相比，Websocket具有以下优点：