月: 2014年12月

PHPでServer Sent Eventを簡単に試してみる

これを読んでるとやたらと楽しそうかつ簡単に導入できそうだったので試してみる。

参考：https://developer.mozilla.org/ja/docs/Server-sent_events/Using_server-sent_events

see_test1.php

<?php
header("Content-Type: text/event-stream\n\n");

$counter = rand(1, 10);
while (1) {
  // "ping" イベントを毎秒送信
  
  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";
  
  // シンプルなメッセージをランダムな間隔で送信
  
  $counter--;
  
  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  }
  
  ob_flush();
  flush();
  sleep(1);
}

index.html

<html>
    <head>
        <title>Server Sent Event テスト</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>
            window.onload = function() {
                var evtSource = new EventSource("sse_test1.php");
                var eventList = document.getElementById("log");
                
                evtSource.onmessage = function(e) {
                    var newElement = document.createElement("li");

                    newElement.innerHTML = "message: " + e.data;
                    eventList.appendChild(newElement);
                }
                evtSource.addEventListener("ping", function(e) {
                    var newElement = document.createElement("li");

                    var obj = JSON.parse(e.data);
                    newElement.innerHTML = "ping at " + obj.time;
                    eventList.appendChild(newElement);
                }, false);
            }
        </script>

    </head>
    <body>
        <div>TODO write content</div>

        <div id ="log"></div>
    </body>
</html>

これで、index.htmlにアクセスしてみるとずらずらとテキストストリームが表示される。