web-dev-qa-db-ja.com

PHPサーバーから更新間隔なしでHTML / JSクライアントを更新する方法は？

管理ページから更新できるシンプルなクライアント側Webページを構築しています。私はPHP=クライアントターゲットページのサーバー側操作に使用しています。

セットアップは私にはやり過ぎのように感じます：

  1. _index.html_には、いくつかの基本的なhtml入力要素があります。ボタンが_makeClientPage.php_のXML GETリクエストをトリガーします。 PHPスクリプトは、HTML入力から生成された変数を受け取り、_clientPage.html_ファイルを書き留めます。
  2. 生成されたクライアントページには、管理ページから変数に割り当てられる_new_image_と呼ばれる2つのJavaScript変数と、任意の文字列値を持つ_old_image_があります。
  3. 生成される変数は、PNG画像のディレクトリ名です。管理者が選択できるPNG画像は1000以上あります。このパスは、_new_image_の_<script>_タグの間のJavaScript変数（_clientPage.html_）に渡されます。
  4. 画像は単に_<img>_タグで表示されるのではありません。パノラマ画像ビューアーである Panolens.js に渡す必要があります。 JS関数は、新しいイメージでPanolens.jsを更新します。
  5. 最後に_clientPage.html_でsetInterval(function(){checkUpdate())}, 1000)を実行します。 checkUpdate()も以下にあります。それは基本的に毎秒実行され、_new_image_を_old_image_と比較し、それらが異なる場合、PanoLens APIが更新目的で呼び出され、_old_image_が_new_image_に割り当てられ、毎秒更新される同じ画像。

ここでのトリックは、_clientPage.html_ファイルでは、_new_image_変数がJavaScript自体によって直接読み取られないことです。実際に別のPHP関数にリクエストを送信し、_clientPage.html_を読み取り、_new_image_変数を抽出し、代わりにそのように比較します。なぜですか？クライアントが_url/clientPage.html_、ブラウザはファイルの変更を追跡できないため、管理者のアクションによって更新された変数の実際の値を要求するリクエストをサーバーに送り返す必要があります。

最後に、自分のコンピュータの管理者と自分の電話のあるクライアントを想像してください。管理者は入力を入力してボタンを押し、クライアントが表示しているページに目的の画像を送信します。クライアントは、ヘッドセット付きの電話を「身につけ」、Oculusデバイスにいるかのように画像を表示します。そのため、「更新」をクリックするだけのオプションはありません。

私の質問はsetInterval()についてです。このアプリケーションを100のクライアントに配布する場合、サーバーは非常に多くのphpリクエストを処理する必要があります。そして、いいえ、原始的な本能や時期尚早な最適化などの人たち、私はこの質問をしているので、学ぶことができます。以下は、私が試したものですが、別の方法で実行できるかどうか尋ねます。 「意見」を求めていないことを願っています。

私はプログラミングのキャリアにおいて非常に新しいです。そして、それは私が行っている最初のサーバー側のWeb開発です。 PHPは何か便利なことをするために行き来する必要があります。昨日、JSからPHPに変数を渡すために、XMLHttpRequestをPHPに作成する方法を学びました。同時に明るいと暗い。

毎秒コントロールをバイパスするために、PHPからJavaScript関数をトリガーする方法について、インターネットを検索し続けます。理にかなっているのは、管理者が_generate image_ボタンを押すと、クライアントページがその通知を受け取るということです。しかし、differnetファイルでそれがどのように行われるか理解できません。

このトピックに関するあなたの経験を共有していただければ幸いです。

コード：

_clientPage.html_のscriptタグの間：

_...
new_image = '_name_%new_image%_name_';
old_image = 'old_image';
var setInterval_forUpdate = setInterval(function(){checkUpdate()}, 1000); // everysecond

function checkUpdate(){
  callPHPUpdate();
  if(newImageInfo != old_image){
    old_image = newImageInfo;
    updateImage();
  }
}
function updateImage(){
  ...
  // update PanoLens.js image
  ...
}
function callPHPUpdate(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){ 
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      res = xmlhttp.responseText;
      newImageInfo = res.split('_name_')[1];
    }
  }
  xmlhttp.open("GET","updateInfo.php",false);
  xmlhttp.send();
}
_

_updateInfo.php_は、_clientPage.html_が必要とするものです。

_<?php 
function getLineWithString($fileName, $str) {
    $lines = file($fileName);
    foreach ($lines as $lineNumber => $line) {
        if (strpos($line, $str) !== false) {
            return $line;
        }
    }
    return -1;
}


$new_line = getLineWithString('clientPage.html', 'new_image = '); // notice how I read the variable 


echo $new_line;
?>
_
phpjavascriptweb-developmentweb-applicationsperformance
1
hrkucuk

（1）サーバー送信イベント、（2）WebSocket、および（3）ロングポーリングを探しています。 3つすべては、同じ要求を何度も繰り返さずに（ポーリングと呼ばれる）クライアント側で情報を受信するというまったく同じ問題を解決する実際の方法です。

あなたのケースでは、サーバー送信イベント（SSE）から始めます。 WebSocketの追加機能が必要になるとは思われません。SSEは、プロキシサーバーやその他のインフラストラクチャの点で、ロングポーリングと比較して幅広いサポートを提供する可能性があります。

そうは言っても、あなたの主な懸念は時期尚早の最適化を示しています。 推測ではなく、サーバーが処理する要求の正確な数推測の事柄が予想されます（経験が豊富であっても、とにかく間違ってしまうでしょう）。そして、負荷テストを実行することでこの数がわかります。これを超えると、サーバーが誤動作を開始するしきい値が表示されます。

2
Arseni Mourzenko