整理 轮询、WebSocket

轮询、WebSocket

长/短连接

• 短链接：所谓短链接，及连接只保持在数据传输过程，请求发起，连接建立，数据返回，连接关闭。它适用于一些实时数据请求，配合轮询来进行新旧数据的更替。
• 长连接：长连接便是在连接发起后，在请求关闭连接前客户端和服务端都保持连接，实质是保持这个通信管道，之后便可以对其进行复用。它适用于涉及消息推送，请求频繁的场景（直播，流媒体）。连接建立后，在该连接下的所有请求都可以重用这个长连接通道，避免了频繁连接请求，提升了效率。

长/短轮询

• 短轮询：短轮询指的是在循环周期内，不断发起请求，每一次请求都立即返回结果，根据新旧数据对比决定是否使用这个结果。
• 长轮询：而长轮询则是在请求的过程中，若是服务器端数据并没有更新，那么则将这个连接挂起，直到服务器推送新的数据，再返回，然后在进入循环周期。

代码

短轮询：设置一个定时器，定时询问服务器是否有信息，每次建立连接传输数据之后，连接会关闭。

var polling = function (url, type, data) {
      var xhr = new XMLHttpRequest(),
        type = type || "GET",
        data = data | null;
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          reveive(xhr.responseText);
          xhr.onreadystatechange = null;
        }
      };
      xhr.open(type, url, true);
      xhr.send(type == "GET" ? null : data);
    };
    var timer = setInterval(function () {
      polling;
    }, 1000);

长轮询：在xhr对象关闭连接的时候马上又给他接上

// 长轮询
    var longPoll = function (type, url) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          receive(xhr.responseText);
          xhr.onreadystatechange = null;
          longPoll(type, url);
        }
      };
      xhr.open(type, url, true);
      xhr.send();
    };

WebSocket

WebSocket是全双工、双向、单套接字连接。WebSocket是一个底层网络协议，可以在它的基础上构建其他标准协议。

一旦建立起WebSocket请求，不需要客户端发起，客户端也能及时接收到来自服务端的数据。

代码

 var ws = new WebSocket("ws:www.example.com:8888");
    ws.onopen = function (evt) {};
    ws.onmessage = function (evt) {
      deal(evt.data);
    };
    ws.onclose = function (evt) {};
    ws.send(data)
    // ws.close()