これを読んでるとやたらと楽しそうかつ簡単に導入できそうだったので試してみる。
参考: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にアクセスしてみるとずらずらとテキストストリームが表示される。