JavaScript資料推送Comet技術詳解

NO IMAGE

JavaScript資料推送主要致力於webapp的線上推送服務,不用我們每次都像伺服器去傳送Ajax請求而主動從Server端推送資料到本地。

資料推送進化史:

1. HTTP協議簡易輪詢,保持著一個連結不放,或者通過前端不停的向後端傳送請求

2. H5更新後有了WebSocket大大改善了雙向和單向推送資料的便利性

3. SSE(Server-Send Event):伺服器推送資料的新方式 

Comet:基於 HTTP 長連線的伺服器推送技術
本課時介紹Comet:基於 HTTP 長連線的伺服器推送技術,Comet 是一種 Web 應用架構。伺服器端會主動以非同步的方式向客戶端程式推送資料(Ajax請求死迴圈),而不需要客戶端顯式的發出請求。Comet 架構非常適合事件驅動的 Web 應用,以及對互動性和實時性要求很強的應用,如股票交易行情分析、聊天室和 Web 版線上遊戲等。

 1.先來看一個最簡單的ajax請求json資料例子:

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'=>'我是測試的文字');
echo json_encode($res);
?>

這樣前端就能獲取後端資料並輸出。下面我們來模擬後端不斷推送資料到前端:

一種辦法是前端迴圈不斷髮送ajax請求

2.前端jQuery的Ajax不斷髮送請求:

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"); //設定沒有快取
sleep(1);
$res = array('success'=>'ok', 'text'=>'我是測試的文字');
echo json_encode($res);
?>

但是這樣的連線輪詢,網路請求浪費非常明顯,我們也可以讓後端伺服器來迴圈做這件事情,看下面例子

3.原生Ajax,伺服器隔一段時間推送一次(後端迴圈,用ob_flush()和flush()吐資料)

data.php


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

前臺js(原生js實現ajax,並當狀態改變時,進行輸出) 參考://www.jb51.net/article/82085.htm


var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流瀏覽器提供了XMLHttpRequest物件
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE瀏覽器沒有提供XMLHttpRequest物件
//所以必須使用IE瀏覽器的特定實現ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if (xhr.readyState === 3 && xhr.status === 200) {
//獲取成功後執行操作
//資料在xhr.responseText
console.log(xhr.responseText);
}
};
xhr.open("get", "data.php", true);
xhr.send("");

以上就是本文的全部內容,希望對大家學習javascript程式設計有所幫助。

您可能感興趣的文章:

Node.js學習教程之HTTP/2伺服器推送【譯】vue使用stompjs實現mqtt訊息推送通知ASP.NET SignaiR 實現訊息的即時推送,並使用Push.js實現通知的示例程式碼Node.js實現資料推送使用 Javascript 實現瀏覽器推送提醒功能的示例