基于Web的实时通讯方案

简介:

传统web方式以客户端发出请求,服务器端响应方式工作,但实际应用中客户端常常需要保持和服务器的持续更新,如:

监控系统

股票价格系统

这些应用都需要服务器端将实时的信息发送到客户端,而无需客户端发出请求。

实现方式:

普通的轮询

Comet:基于Http长连接的"服务器推"技术.这其中又分为三种:

基于Ajax的长轮询方式

基于Ajax的流方式

基于iframe和htmlfile的流方式

基于客户端套接口的"服务器推"技术,这其中又分为两种:

Flash XMLSocket

JavaApplet

WebSocket(html5)

实现:

普通轮询

定时刷新页面:<meta http-equiv="refresh" content="5"/>

Ajax定时轮询请求数据:

var polling=function(){
$.post("test.ashx",function(data){
$("#name").append(data+"<br/>")
})
}
interval=setInterval(polling,1000);

Comet

基于Ajax的长轮询方式:

Ajax调用XMLHttpRequest对象发出异步请求,在Ajax回调函数中处理完服务器端返回的信息后,再次发出请求,重新建立连接.

在这种长轮询方式下,客户端是在XMLHttpRequest的readyState为4(数据传输结束)时调用回调函数,进行信息处理,然后重新建立连接.

var pull=function(){

$.ajx({url:"test.ashx",

type:"post",

dataType:"text",

success:onSuccess

});

}

var onSuccess=function(data){

$("#name").append(data+"<br/>");

window.setTimeOut(pull,0);

}

这种方式服务器端会阻塞请求直到有数据传递或者超时时才返回。服务器端在处理过程中每间隔一定的时间检查是否有更新,如果没有更新,不执行操作.如果有更新, 则返回数据,断开连接。客户端处理数据,进行下一轮的连接请求。这种方式是现在最常用的一种方式。

基于Ajax的流方式:

这种方式在XMLHttpRequest的readyState==3(即数据传送过程中),客户端可以接收并处理数据,而不用关闭连接。但是IE中XMLHttpRequest==3时不能读取服务器端 返回的数据,所以目前IE不支持这种方式(Streaming Ajax).服务器端是不停地向客户端发送数据的.

try{

var request=new XMLHttpRequest();

}

catch{

}

request.onreadystatechange=function(){

if(request.readystate==3) {

$("#name").append(request.responseText);

}

}

request.open("send","test.ashx",null);

request.send(null);

基于iframe和htmlfile的流方式:

这种方式是在页面中嵌入一个隐藏的iframe,让其src属性指向一个长连接,这样服务器端会源源不断地向客户端发送数据,但是它发送的数据是javascript代码,用于操作父 级页面的Dom树结构,但是它也存在一个问题,就是IE,FireFox的进度栏总是显示为正在加载状态,而且IE上方的图标会不停地转动，显示正在加载中.但Google的天才们用 了一个"htmlfile"的ActiveX,解决了这个问题,并用到了gmail+gtalk产品中.

FlashXMLSocket是利用Flash程序中的xmlsocket接口,在客户端程序中用javascript直接调用Flash的接口来实现数据传递.

JavaApplet在客户端建立和服务器端的套接口,但是javascript无法获取JavaApplet在服务器端返回的数据,无法更新页面.

websocket的目标是实现客户端和服务器端的双向通信.