jqueryとphpを組み合わせてAJAXロングポーリングを実装する-jsチュートリアル-php.cn

jqueryとphpを組み合わせてAJAXロングポーリングを実装する

亚连

リリース： 2018-05-24 16:23:14

オリジナル

2108 人が閲覧しました

従来の AJAX ポーリング方法では、クライアントはユーザー定義の間隔でサーバーに最新のデータをクエリします。このデータ取得方法では、データの正確性を確保するために短い間隔が必要ですが、間隔が短すぎると、カスタマーサービス側が短期間に複数のリクエストをサーバーに送信することになります。

HTTP はステートレスな一方向プロトコルであり、ユーザーはクライアント経由でのみサーバーにリクエストを送信でき、サーバーは応答を処理して送り返します。チャットルーム、WEBQQ、オンラインカスタマーサービス、メールボックスなどのインスタントメッセージングアプリケーションを実装するには、「サーバープッシュテクノロジ (Comet)」を使用する必要があります。

リバース AJAX。ロングポーリングまたは COMET と呼ばれます。サーバーとクライアントは、データがあるときにサーバーがクライアントにメッセージを返すことができるように、長期的なリクエストを維持する必要があります。

XHTML

<p id="msg"></p>  
<input id="btn" type="button" value="测试" />

ログイン後にコピー

jQuery

ここでは、AJAX を使用して data.php ページをリクエストし、「success」の値を取得します。リクエスト時間は 80 秒に達します。この 80 秒間にサーバーから「success」が返されなかった場合、データが返されるか「success」の値が 0 になって接続が閉じられるまで、接続ステータスはそのままになります。接続を閉じた後、次のリクエストを続行します。

$(function(){ 
 $("#btn").bind("click",{btn:$("#btn")},function(evdata){  
   $.ajax({  
    type:"POST",  
    dataType:"json",  
    url:"data.php",  
    timeout:80000,  //ajax请求超时时间80秒  
    data:{time:"80"}, //40秒后无论结果服务器都返回数据  
    success:function(data,textStatus){  
     //从服务器得到数据，显示数据并继续查询  
     if(data.success=="1"){  
      $("#msg").append("<br>[有数据]"+data.text);  
      evdata.data.btn.click();  
     }  
     //未从服务器得到数据，继续查询  
     if(data.success=="0"){  
     $("#msg").append("<br>[无数据]");  
     evdata.data.btn.click();  
     }  
    },  
    //Ajax请求超时，继续查询  
    error:function(XMLHttpRequest,textStatus,errorThrown){  
      if(textStatus=="timeout"){  
       $("#msg").append("<br>[超时]");  
       evdata.data.btn.click();  
      }  
    }  
   });  
 });  
});

ログイン後にコピー

PHP

これは無限ループです。ループの終了条件は、戻り結果を取得して Json データを返すことです。

そして、$_POST['time'] パラメーターを受け入れて、リソースの過剰な浪費を避けるためにループのタイムアウトを制限します。 (ブラウザを閉じるとサーバーにメッセージが送信されず、使用がループ状態で継続する可能性があります)

if(emptyempty($_POST[&#39;time&#39;]))exit();  
set_time_limit(0);//无限请求超时时间  
$i=0;  
while (true){  
 //sleep(1);  
 usleep(500000);//0.5秒  
 $i++;  
 //若得到数据则马上返回数据给客服端，并结束本次请求  
 $rand=rand(1,999);  
 if($rand<=15){  
  $arr=array(&#39;success&#39;=>"1",&#39;name&#39;=>&#39;xiaocai&#39;,&#39;text&#39;=>$rand);  
  echo json_encode($arr);  
  exit();  
 }  
 //服务器($_POST[&#39;time&#39;]*0.5)秒后告诉客服端无数据  
 if($i==$_POST[&#39;time&#39;]){  
  $arr=array(&#39;success&#39;=>"0",&#39;name&#39;=>&#39;xiaocai&#39;,&#39;text&#39;=>$rand);  
  echo json_encode($arr);  
  exit();  
 }  
}

ログイン後にコピー

動作効果: データが存在しない場合のリクエスト時間が 40 秒に達していることがわかります。 40S リクエストで取得された場合、リクエストは閉じられます。