JavaScript數(shù)據(jù)推送Comet技術(shù)詳解

更新時(shí)間：2016年04月07日 16:36:34 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)推送Comet技術(shù)，感興趣的小伙伴們可以參考一下

JavaScript數(shù)據(jù)推送主要致力于webapp的在線推送服務(wù)，不用我們每次都像服務(wù)器去發(fā)送Ajax請(qǐng)求而主動(dòng)從Server端推送數(shù)據(jù)到本地。

數(shù)據(jù)推送進(jìn)化史：

1. HTTP協(xié)議簡(jiǎn)易輪詢，保持著一個(gè)鏈接不放，或者通過(guò)前端不停的向后端發(fā)送請(qǐng)求

2. H5更新后有了WebSocket大大改善了雙向和單向推送數(shù)據(jù)的便利性

3. SSE(Server-Send Event)：服務(wù)器推送數(shù)據(jù)的新方式

Comet：基于 HTTP 長(zhǎng)連接的服務(wù)器推送技術(shù)
本課時(shí)介紹Comet:基于 HTTP 長(zhǎng)連接的服務(wù)器推送技術(shù)，Comet 是一種 Web 應(yīng)用架構(gòu)。服務(wù)器端會(huì)主動(dòng)以異步的方式向客戶端程序推送數(shù)據(jù)（Ajax請(qǐng)求死循環(huán)），而不需要客戶端顯式的發(fā)出請(qǐng)求。Comet 架構(gòu)非常適合事件驅(qū)動(dòng)的 Web 應(yīng)用，以及對(duì)交互性和實(shí)時(shí)性要求很強(qiáng)的應(yīng)用，如股票交易行情分析、聊天室和 Web 版在線游戲等。

1.先來(lái)看一個(gè)最簡(jiǎn)單的ajax請(qǐng)求json數(shù)據(jù)例子：

index.html

<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
  }
 });
</script>

data.php

<?php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是測(cè)試的文本');
echo json_encode($res);
?>

這樣前端就能獲取后端數(shù)據(jù)并輸出。下面我們來(lái)模擬后端不斷推送數(shù)據(jù)到前端：

一種辦法是前端循環(huán)不斷發(fā)送ajax請(qǐng)求

2.前端jQuery的Ajax不斷發(fā)送請(qǐng)求：

index.html

<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function conn(){
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
   conn();
  }
 });
}
conn(); 
</script>

data.php

<?php 
header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //設(shè)置沒(méi)有緩存
sleep(1);
$res = array('success'=>'ok', 'text'=>'我是測(cè)試的文本');
echo json_encode($res);
?>

但是這樣的連接輪詢，網(wǎng)絡(luò)請(qǐng)求浪費(fèi)非常明顯，我們也可以讓后端服務(wù)器來(lái)循環(huán)做這件事情，看下面例子

3.原生Ajax，服務(wù)器隔一段時(shí)間推送一次（后端循環(huán)，用ob_flush()和flush()吐數(shù)據(jù)）

data.php

<?php 
// header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //設(shè)置沒(méi)有緩存
$i = 0;
while ($i<9) {
 $i++;
 // $res = array('success'=>'ok', 'text'=>'我是測(cè)試的文本');
 // echo json_encode($res);
 sleep(1);
 $radom = rand(1,999);
 echo $radom;
 echo '<br/>';
 ob_flush(); //輸出緩存，必須和flush()一起使用
 flush(); //緩存吐到瀏覽器
}
?>

前臺(tái)js（原生js實(shí)現(xiàn)ajax，并當(dāng)狀態(tài)改變時(shí)，進(jìn)行輸出）參考：http://www.dbjr.com.cn/article/82085.htm

var getXmlHttpRequest = function() {
 if (window.XMLHttpRequest) {
  //主流瀏覽器提供了XMLHttpRequest對(duì)象
  return new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  //低版本的IE瀏覽器沒(méi)有提供XMLHttpRequest對(duì)象
  //所以必須使用IE瀏覽器的特定實(shí)現(xiàn)ActiveXObject
  return new ActiveXObject("Microsoft.XMLHttpRequest");
 }

};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
 console.log(xhr.readyState);
 if (xhr.readyState === 3 && xhr.status === 200) {
  //獲取成功后執(zhí)行操作
  //數(shù)據(jù)在xhr.responseText
  console.log(xhr.responseText);
 }
};
xhr.open("get", "data.php", true);
xhr.send("");

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: