JavaScript資料推送Comet技術詳解，javascriptcomet

JavaScript資料推送Comet技術詳解，javascriptcomet

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，併當狀態改變時，進行輸出） 參考：http://www.bkjia.com/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程式設計有所協助。

您可能感興趣的文章:

• 資料庫複寫效能測試 推送模式效能測試
• .net 通過URL推送POST資料具體實現
• 頁面間隔半秒鐘更新時間 Asp.net使用Comet開發http長串連樣本分享
• SQL Server 2000向SQL Server 2008 R2推送資料圖文教程
• 使用Java實作類別似Comet風格的web app