JavaScriptデータプッシュの詳しい解説 Cometテクノロジー_JavaScriptスキル

JavaScript データ プッシュは、主に Web アプリのオンライン プッシュ サービス専用です。毎回 Ajax リクエストをサーバーに送信する必要はなく、サーバーからローカルにデータを積極的にプッシュします。

データプッシュの進化の歴史:

1. HTTP プロトコルの単純なポーリング、リンクの維持、またはフロントエンド経由でバックエンドにリクエストを継続的に送信します

2. H5 アップデート後、WebSocket の双方向および一方向のデータプッシュの利便性が大幅に向上しました

3. SSE (サーバー送信イベント): サーバーがデータをプッシュする新しい方法

Comet: HTTP ロング接続に基づくサーバープッシュテクノロジー
このクラスでは、HTTP ロング接続に基づくサーバー プッシュ テクノロジである Comet を紹介します。 Comet は Web アプリケーション アーキテクチャです。サーバーは、クライアントが明示的にリクエストを行わなくても、非同期方法 (Ajax リクエストの無限ループ) でクライアント プログラムにデータをアクティブにプッシュします。 Comet アーキテクチャは、イベント駆動型の Web アプリケーションや、株取引分析、チャット ルーム、Web ベースのオンライン ゲームなど、強力な対話性とリアルタイム パフォーマンスを必要とするアプリケーションに非常に適しています。

1. まず、JSON データをリクエストする 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">
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
  }
 });
</script>

data.php

<&#63;php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

このようにして、フロントエンドはバックエンドのデータを取得して出力することができます。バックエンドがフロントエンドにデータを継続的にプッシュする様子をシミュレートしてみましょう:

1 つの方法は、フロントエンド ループで 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

<&#63;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);
&#63;>

ただし、このような接続ポーリングは明らかにネットワーク リクエストを無駄にします。以下の例を参照してください。バックエンド サーバーにこれを実行させることもできます。

3. ネイティブ Ajax、サーバーは時々プッシュします (バックエンド ループ、ob_flush() と flash() を使用してデータを吐き出します)

data.php

<&#63;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(); //缓存吐到浏览器
}
&#63;>

フロントエンドjs（ネイティブjsがajaxを実装し、状態変化時に出力） 参考：http://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 プログラミングを学習する皆さんのお役に立てれば幸いです。