2017-02-19 16 views
2

私は大学のプロジェクトを大気質監視システムにしています。そのデータ(ある整数値など)はセンシングユニットからウェブページに取り込まなければなりません。私はPhpを使用してクライアントから別のクライアントにデータをプッシュ

はこのURL http://localhost/AQProject/recordupdate.php?val=2で呼びかけスクリプトがコンテンツを表示するWebページを更新していることです欲しい

。今私は、データベースにそのデータを保存し、更新を確認するために2秒ごとにajaxベースのクエリを実行することができますが、私はその更新プログラムをサーバーにプッシュしたい。私がやっていること

は:

私はServer sent eventsを試してみました。ここで私は

<?php 
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 

if($_SERVER["REQUEST_METHOD"]=="GET") 
{ 
    if(empty($_GET["val"])) die ("Empty Value from source"); 
    else 
    { 
     $v = $_GET['val']; 
     echo "data: The Pollution stub value is {$v}".PHP_EOL; 
     ob_flush(); 
     flush(); 
    } 
}?> 

を試してみましたが、HTMLは、私は考え出した、今すぐスクリプト

<script> 
if(typeof(EventSource) !== "undefined") { 
    var source = new EventSource("recordupdate.php"); 
    source.onmessage = function(event) { 
     document.getElementById("result").innerHTML = event.data + 
     "<br>"; 
    }; 
} else { 
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events..."; 
} 
</script> 

を持っているものだ。このくらいの別のクライアントが(センシングときので、それは動作しません(私は間違っている場合私を修正)することをユニット)は、recordupdate.phpをウェブページクライアントが呼び出すものとは異なるスクリプトのインスタンスとして呼び出します。

server sent eventsを使用してこれを行う方法はありますか?または、私は絶対にWebSocket、node.jsなどを掘り下げる必要があります。事前にお礼します。

答えて

1

あなたがしたいことはあなたが望むほど簡単ではありませんが、まだSSEが適している仕事です。ソケットを使う必要はなく、ajaxポーリングを使う必要はありません。

しかし、サーバー上にPHPスクリプトで共有できるデータベースストアが必要です。 LAMPスタックをインストールするのは簡単なので、MySQLを使用することをお勧めします。ただし、必要なものが残っているかもしれません。しかし、あなたのデータベースはテキストファイルのように単純なものにすることができます。

(以下のサンプルをできるだけ小さくするために、私はあなたのDBが/tmp/val.txtと仮定しています。ファイルのロックや悪いデータのチェックは行っていません。信頼されていない環境での生産でこれを入れて前の仕事私は存在しないファイルに関する任意のノイズを避けるために、事前に作成/tmp/val.txtをお勧めします)

あなたrecordupdate.phpは、それが与えられた値を記録するために仕事をしている:。。

<?php 
if($_SERVER["REQUEST_METHOD"]=="GET") 
{ 
    if(empty($_GET["val"])) die ("Empty Value from source"); 
    else file_put_contents("/tmp/val.txt", $_GET['val']); 
} 

次に、Webクライアントに接続するsse.phpがあります。

<?php 
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 
$prev = ''; 
while(1){ 
    $v = file_get_contents("/tmp/val.txt"); 
    if($v != $prev){ 
    echo "data: The Pollution stub value is {$v}\n\n"; 
    $prev = $v; 
    } 
    usleep(100000); //0.1s 
    } 

このスクリプトはテキストファイルの変更を1秒間に10回確認しています。それが見つかるとクライアントに送信します。 (平均待ち時間は0.05sとネットワークオーバーヘッドになります)。待ち時間を短縮するためには、より少ない時間でスリープします。

フロントエンドHTMLの唯一の変更は、「sse」を呼び出すことです。代わりに、PHP」:

<script> 
if(typeof(EventSource) !== "undefined") { 
    var source = new EventSource("sse.php"); 
    source.onmessage = function(event) { 
     document.getElementById("result").innerHTML = event.data + 
     "<br>"; 
    }; 
} else { 
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events..."; 
} 
</script> 
1

HTTPは片道プロトコルです。クライアントからサーバーへの要求のみ。はい、絶対にWebSocket、node.jsなどを調べる必要があります。

+0

しかし、データが実際に別のクライアントから流れることになる参照は、二重接続はありませんそれは、全二重接続を開くよりも簡単でなければなら –

+0

ブラウザのHTTP経由でのみ送信することができます。リクエストを受け取り、回答を受け取ることはできません。例はhttps://habrahabr.ru/post/209864/をご覧ください。単純なPHPサーバとjsクライアントの例があります。 –

関連する問題