ajax轮询
ajax轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息。
一个简单的实例:
function showUnreadNews()
{
$(document).ready(function() {
$.ajax({
type: "POST",
url: "unread_list.php",
dataType: "json",
success: function(data) {
alert(data);
}
});
});
}
setInterval('showUnreadNews()',5000);//轮询执行,5000ms一次
long poll(长轮询)
原理跟 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();//超时,重新请求
}
}
});
}
缺点:Ajax轮询需要服务器有很快的处理速度与快速响应。long poll需要很高的并发,体现在同时容纳请求的能力。
WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
一个简单的实例:
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();//关闭连接