Server-Sent Eventsでtail -Fっぽいやつ

ブラウザへの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>