前端 - 轮询, 长轮训, websocket

轮询

概念

ajax 轮询的原理很简单，让浏览器间隔几秒就发送一次请求，询问服务器是否有新信息

代码

function showUnreadNews()
{
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "unread_list.php",
            dataType: "json",
            success: function(data) {
                alert(data);
            }
        });
    });
}
setInterval('showUnreadNews()',5000);  //轮询执行，5000ms一次  

长轮训

概念

原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型

也就是说，客户端发起连接后

如果没消息，就一直不返回Response给客户端，直到有消息才返回或超时

返回完之后，客户端再次建立连接，周而复始，基于事件的触发，一个事件接一个事件

代码

function showUnreadNews()
{
    $.ajax({
        type: "POST",
        url: "unread_list.php",
        dataType: "json",
        success: function(data) {
            //处理返回数据
            alert(data);
            //再次请求
            showUnreadNews();
        },
        complete:function(XMLHttpRequest,textStatus)
        {
            if(textStatus=='timeout'){//判断是否超时
                showUnreadNews();//超时，重新请求
            }
        }
    });
}

websocket

概念

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道, 两者之间就直接可以数据互相传送。

详细跳转 　　 Flask websocket

代码

var ws;

function WebSocketTest()
{
   if ("WebSocket" in window)
   {
      alert("您的浏览器支持 WebSocket!");

      // 打开一个 web socket
      ws = new WebSocket("ws://localhost:9998/echo");

      ws.onopen = function()
      {
         // Web Socket 已连接上，使用 send() 方法发送数据
         ws.send("发送数据");
         alert("数据发送中...");
      };

      ws.onmessage = function (evt)
      {
         var received_msg = evt.data;
         alert("数据已接收..." + received_msg);
      };
      ws.onerror = function (evt) {
          //出错
          alert(JSON.stringify(evt));
       }
      ws.onclose = function()
      {
         // 关闭 websocket
         alert("连接已关闭...");
      };
   }
   else
   {
      // 浏览器不支持 WebSocket
      alert("您的浏览器不支持 WebSocket!");
   }
}

ws.close();//关闭连接