HTML5 Server送信イベントを使用してクライアントのスケジュールを更新するには

私はスケジュールで予約WebサイトにPHPを構築しています。私は効率的な方法で自分のユーザーのためのリアルタイムの更新を持っていることを探しています。私はAjaxを見つけましたが、クライアントがサーバーに更新について尋ねるのではなく、サーバーがスケジュールを編集したときに更新されたスケジュールをクライアントに送信するようにします。HTML5 Server送信イベントを使用してクライアントのスケジュールを更新するには

HTML5 Server Sent Eventsが私の必要とするものであることがわかりました。 SSE経由でアップデートを取得する簡単なテストページを試しました。

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


$ver = 2; 
$time = date("H:i:s"); 
if ($ver != $_GET["ver"]) 
{ 
    echo "data: Page updated at: {$time}\n\n"; 
    flush(); 
} 
?>

demo.html

<!DOCTYPE html> 
<html> 
<body> 
<h1>SSE Output</h1> 
<div id="result"></div> 
<h1>Debug Console</h1> 
<div id="status"></div> 
<script> 
//SSE si compatible 
if(typeof(EventSource)!=="undefined") 
{ 
    var i = 1; 
    var source=new EventSource("demo_sse.php?ver=2"); 

    //Lorsque le serveur envoie un message 
    source.onmessage=function(event) 
    { 
     document.getElementById("result").innerHTML+=event.data + " #" + i + "<br />";   
     i++; 
    } 

    //EventListener 
    source.addEventListener('message', function(e) 
    { 
     console.log(e.data); 
     //document.getElementById("status").innerHTML+= "Message Recevied<br />"; 
    }, false); 

    source.addEventListener('open', function(e) 
    { 
     // Connection was opened. 
     document.getElementById("status").innerHTML+= "Connection #" + i + " opened<br />"; 
    }, false); 

    source.addEventListener('error', function(e) 
    { 
     if (e.readyState == EventSource.CLOSED) 
     { 
      // Connection was closed. 
      document.getElementById("status").innerHTML+= "Connection closed<br />"; 
     } 
    }, false); 

    //Validation de l'origine du serveur 
    if (event.origin != 'https://mydomain.com') 
    { 
     alert('Looks like the Origin of the EventSource (the schedule\'s live update service) wasn\'t coming from our secure server!'); 
     //return; 
    } 
} 
else 
{ 
    document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; 
}  

</script>  
</body> 
</html>

demo_see.phpは問題が各3秒のような接続があることであるバージョンが、私はそうマッチングされているかどうか何を開設クライアントに問い合わせるクライアントではなく、サーバーに要求するクライアントであると考えてください。私が望むのは、クライアントとサーバー間のオープンな接続を維持して、スケジュールに従って更新が行われたときにサーバーが変更を送信できるようにすることです。

ヒントをいただければ幸いです！

おかげ

出典

2012-03-28 exomic

サーバー・コードがオープン接続を維持されていないため、ブラウザが3秒ごとに再接続されます。それは時間が一度終わったら終了します。次のようなものを試してみてください。

while (true) { 
    echo "data: Page updated at: {$time}\n\n"; 
    flush(); 
    sleep(1); 
}

出典

2012-03-28 20:56:02 robertc

睡眠はコードを一時停止するだけですか？私が探しているのは、サーバーがクライアントとのオープンな接続を維持することで、別のクライアントがスケジュールを編集したときに、他のすべてのオンラインクライアントに通知を送信して新しいデータでデータを更新することです。それはSSEで可能ですか？ – exomic

@exomicはい、スリープが一時停止します。そうでなければ、スクリプトはすべてのサーバーリソースを吸い上げて、数千回新しい日付を吐き出します。重要なビットは 'while'ループです。 – robertc

HTML5 Server送信イベントを使用してクライアントのスケジュールを更新するには

答えて

関連する問題