基于HTTP的Web端推送技术--Comet

我们希望能够尽我们所能，来让这个世界变的更简单，如果你想了解我们，请点击这里

有前端开发经验（包括客户端和手机端）的同学都应该知道，所有的与服务器通讯，或者说数据请求（HTTP协议下）都分为两种，
1：前端主动请求服务器，前端发送header和body，服务器根据自身逻辑和接收到的前端发送的信息返回数据，链接关闭（AJax）。
2：前端主动请求服务器，但链接并不立即关闭，也就是说，客户端与服务器建立了一个长连接（Comet）。

Comet技术本指一种更高级的Ajax技术，因为Ajax是一种从页面向服务器发送请求数据的技术，而Comet则是服务器向页面推送数据的技术，所以也经常有人说Comet为服务器推送技术。

有两种实现 Comet 的方式:长轮询和流。
长轮询是传统轮询(也称为短轮询)的一个翻版，即浏览器定时向服务器发送请求，看有没有更新的数据。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求。这一过程在页面打开期间一直持续不断。如图所示
这里写图片描述

无论是短轮询还是长轮询，浏览器都要在接收数据之前，先发起对服务器的连接。两者最大的区别在于服务器如何发送数据。短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。轮询的优势是所有浏览器都支持，因为使用 XHR 对象和 setTimeout()就能实现。而你要做的就是决定什么时候发送请求。

第二种流行的 Comet 实现是 HTTP 流。流不同于上述两种轮询，因为它在页面的整个生命周期内只使用一个 HTTP 连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。
所有服务器端语言都支持打印到输出缓存然后刷新(将输出缓存中的内容一次性全部发送到客户端)的功能。而这正是实现 HTTP 流的关键所在。

在 Firefox、Safari、Opera 和 Chrome （不支持IE）中，通过侦听 readystatechange 事件及检测 readyState 的值是否为 3，就可以利用 XHR 对象实现 HTTP 流。在上述这些浏览器中，随着不断从服务器接收数据，readyState 的值会周期性地变为 3。当 readyState 值变为 3 时，responseText 属性中就会保存接收到的所有数据。此时，就需要比较此前接收到的数据，决定从什么位置开始取得最新的数据。使用 XHR 对象实现 HTTP 流的典型代码如下所示。

function createStreamingClient(url, progress, finished){
        var xhr = new XMLHttpRequest(),
            received = 0;
        xhr.open("get", url, true);
        xhr.onreadystatechange = function(){
            var result;
            if (xhr.readyState == 3){
    //只取得最新数据并调整计数器
result = xhr.responseText.substring(received);
received += result.length; 21
 //调用 progress 回调函数 progress(result);
        } else if (xhr.readyState == 4){
            finished(xhr.responseText);
}
    };
    xhr.send(null);
    return xhr;
}

  var client = createStreamingClient("streaming.php", function(data){ 11 alert("Received: " + data);
}, function(data){
   alert("Done!");
});

这个 createStreamingClient()函数接收三个参数:要连接的 URL、在接收到数据时调用的函数以及关闭连接时调用的函数。有时候，当连接关闭时，很可能还需要重新建立，所以关注连接什么时候关闭还是有必要的。

只要 readystatechange 事件发生，而且 readyState 值为 3，就对 responseText 进行分割以取得最新数据。这里的 received 变量用于记录已经处理了多少个字符，每次 readyState 值为 3 时都递增。然后，通过 progress 回调函数来处理传入的新数据。而当 readyState 值为 4 时，则执行 finished 回调函数，传入响应返回的全部内容。

基于HTTP的Web端推送技术--Comet

猜你喜欢