Web实时通讯——轮询、WebSocket

轮询

其实就是客户端不停地向服务器发出请求，以达到获取最新数据的目的。

主要有以下方式：

1. 普通轮询(隔一段时间请求一次)

实现原理： ajax放在计时器里面

缺点：由于请求大部分是没用的，浪费带宽资源。

实例：

var xhr = new XMLHttpRequest();
    setInterval(function(){
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){

        };
        xhr.send();
    },1000)

2. 长轮询(回调)

实现原理：

首先ajax对象设定一个时间，如果超过了设定时间或者发生错误，便再次调用该ajax。

缺点：

长连接会消耗资源，返回数据顺序无保证，难于管理维护。

jQuery代码参考：

(function longPolling() {

                    $.ajax({
                        url: "${pageContext.request.contextPath}/communication/user/ajax.mvc",
                        data: {"timed": new Date().getTime()},
                        dataType: "text",
                        timeout: 5000,
                        error: function (XMLHttpRequest, textStatus, errorThrown) { $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]
"); if (textStatus == "timeout") { // 请求超时 longPolling(); // 递归调用 // 其他错误，如网络错误等 } else { longPolling(); } },
                        success: function (data, textStatus) { $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]
"); if (textStatus == "success") { // 请求成功 longPolling(); } }
                    });
                })();

WebSocket（IE10+）

上面的轮询，其实都是通过客户端主动向服务端发送请求，以达到获取信息的目的。

那么，有没有办法能够让服务端有了新消息以后，主动向客户端发送信息呢？

WebSocket就是这样的解析方案。


实例：

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 

// 打开Socket 
socket.onopen = function(event) { 

  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 

  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 

  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 

  // 关闭Socket.... 
  //socket.close() 
};

待扩展部分：

Socket.IO、dojox.Socket



文章参考信息：

http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html

http://www.cnblogs.com/zhaowinter/p/5332681.html

http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html