ブラウザへのPUSH実装を考え、WebSocketを調べていたら、その何倍も手軽に実装できるServer-Sent EventsというAPIがあるということで、tail -Fっぽく、ファイルが更新されたらブラウザに差分をPUSHするスクリプトを書いてみました。
まず、サーバ側。Mozillaのサンプルを参考に、冒頭でContent-Typeを宣言し、１秒毎にファイルの更新をチェックし、最終更新時間(filemtime)が変わっていれば、差分を
data: ファイルの差分
という形式で出力します。
test.php
<?php
header("Content-Type: text/event-stream\n\n");
$fname = "test.txt";
$ftime = "";
$ftime_old = "";
$contents = "";
$contents_old = "";
while (1) {
$ftime = filemtime($fname);
if( $ftime != $ftime_old ){
$contents = file_get_contents($fname);
echo 'data: '.str_replace($contents_old,"",$contents)."\n\n";
$contents_old = $contents;
}
$ftime_old = $ftime;
clearstatcache();
ob_end_flush();
sleep(1);
}
次にブラウザ側。EventSourceオブジェクトを生成し、onmessageハンドラでサーバからPUSHされたデータを読み込み表示します。
index.html
<ul id="eventList"></ul>
<script>
var eventList = document.getElementById("eventList");
var evtSource = new EventSource("test.php");
evtSource.onmessage = function(e) {
var newElement = document.createElement("li");
newElement.innerHTML = e.data;
eventList.appendChild(newElement);
}
</script>
