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: " +
4000
errorThrown + " ]<br/>");
if (textStatus == "timeout") { // 请求超时
longPolling(); // 递归调用

// 其他错误，如网络错误等
} else {
longPolling();
}
},
success: function (data, textStatus) {
$("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>");

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