Server-Sent Eventsを試してみた

参考にしたサイトとほぼ同じコードですが、SSEで実行することができました！

Server-Sent Events の利用 - Server-sent events | MDN

  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="list"></ul>
<script>
    var evtSource = new EventSource("ssedemo.php");

    evtSource.addEventListener("ping", function(e) {
        var newElement = document.createElement("li");
        var eventList = document.getElementById('list');
        console.log(e.data);
        var obj = JSON.parse(e.data);
        newElement.innerHTML = "ping at " + obj.time;
        eventList.appendChild(newElement);
    }, false);

    evtSource.addEventListener("error",function(e){
        console.log(e);
        alert("EventSource failed.");
    },false);
</script>
</body>
</html>

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

$counter = rand(1, 10);
while (1) {
  // "ping" イベントを毎秒送信
  
  echo "event: ping\n";
  echo 'data: {"time": "' . (new DateTime())->format('Y/m/d H:i:s') . '"}';
  echo "\n\n";
  
  // シンプルなメッセージをランダムな間隔で送信
  
  $counter--;
  
  if (!$counter) {
    echo "event: ping2\n";
    echo 'data: This is a message at time ' . (new DateTime())->format('Y/m/d') . "\n\n";
    $counter = rand(1, 10);
  }
  
  if (ob_get_contents()) ob_end_clean();
  flush();
  sleep(1);
}

f:id:okumuraa1:20180407223701g:plain

すごい！！