Server-Sent Events（EventSource）を試してみます

Server-Sent Events を試用してみます。

「Server-Sent Events W3C Candidate Recommendation 11 December 2012」

サーバからイベントを受信します。 イベントを受け取るために EventSource オブジェクトを作成します。イベントを生成するスクリプトの URI を設定します。

  var source = new EventSource('sse.php');

インスタンスを生成したら、メッセージの受け取りができます。

  source.onmessage = function(event) {
    document.getElementById('msg').innerHTML = 
    '<p>' + event.data + '</p>';
  }

上記は、event フィールドのないメッセージを受け取ります。デフォルトの event タイプは message です。addEventListener() を使用すると  event タイプごとにメッセージを受け取ります。

  source.addEventListener('message', function(event){
    document.getElementById('msg').innerHTML = 
    '<p>' + event.data + '</p>'
  },false);

イベントを送信するサーバサイドのスクリプトは PHP で用意しました。

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

  echo 'event: ' . 'messages' . PHP_EOL;
  echo 'id: ' . time() . PHP_EOL;
  echo 'data: ' . 'Server Time ' . date('h:i:s', time()) . ', Server Sent Events Sample.' . PHP_EOL;
  echo 'retry: ' . '5000' . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
?>

イベントを受信するスクリプトのサンプルです。

<div id="msg"><p>メッセージ</p></div>
<script type="text/javascript>
  function sse(){
    if (typeof (EventSource) !== 'undefined') {
        var source = new EventSource('sse.php');
                
        source.addEventListener('messages', function(event){
            document.getElementById('msg').innerHTML = '<p>' + event.data + '</p>' ;
        },false);
         
        source.addEventListener('end', function(event){
            document.getElementById('msg').innerHTML = '<p>終了します。</p>' ;
            source.close();
        },false);

        source.onerror = function (event) {
            if (source.readyState === EventSource.CLOSED) {
                document.getElementById('msg').innerHTML = '<p>終了しています。</p>' ;
            }
            else if (source.readyState === EventSource.OPEN) {
                document.getElementById('msg').innerHTML = '<p>終了します。</p>' ;
                source.close();
            }
        }        
    } else {
        document.getElementById('msg').innerHTML = '<p>Server-Sent Events はサポートされていません。</p>' ;
    }
  }
  window.onload = sse;
</script>

以下にて実際にイベントの受信を試みます。