ajax轮询和websocket协议通讯

定义

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，可实现浏览器和服务器之间一次握手，长连接，双向传输。

为什么选择websocket：

1. Ajax轮询 ，前端js定时器定时向服务器进行Http请求，获取最新的数据，并渲染至前端页面，缺点是不断发送请求，由于http请求可能包含很长的头部，有效数据可能很小，浪费带宽。

   ajax轮询实现：

  var intv=self.setInterval("refreshTable()",5000);
  function refreshTable()
  {
   
          //ajax请求
       var config = {
   
              url: "/realDataList",
              type: "get",
              dataType: "json",
              data: {
   "key":"提交的数据"},
              success: function(result) {
   
              
              }
        };
        $.ajax(config);
  }
  window.onunload =function(e){
   
      //离开页面,清除定时器"
      window.clearInterval(intv);
  };
  
  

2. WebSocket协议，节省带宽和服务器资源，能够实时双向通讯。

websocket逻辑过程：

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

WebSocket实现过程：

webSocket属性

1. Socket.readyState:标识连接状态的只读属性，0：连接未建立；1：连接已建立，可通信；2：正在关闭；3：连接已关闭或者连接打不开

2. Socket.bufferedAmount：只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

webSocket事件

1. open，连接建立时触发；

2. message：客户端接收服务端数据时触发；

3. error：通信发生错误时触发；

4. close：连接关闭时触发

websocket方法

1. Socket.send()：当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

2. Socket.close():关闭连接

前台实现

前台j