基于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的目标是实现客户端和服务器端的双向通信.