12月, 2014 | 俺日記

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

参考：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);
}

<?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>

<html>

<head>

<title>Server Sent Event テスト</title>

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>

</body>

</html>

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

月別: 2014年12月

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