HTML入門 | HTML5 API | SSE(Server Sent Events)

Server Sent Events API

Server Sent Events APIは、Webページがサーバーから更新情報を自動で受け取れるようにする。

Server Sent Eventsをサポートする主なWebブラウザーのバージョンは次のとおりである。

API ie chrome firefox safari opera
server sent events サポートなし 6.0 6.0 5.0 11.5

Server Sent Eventsを使う前に、まずユーザーのWebブラウザーがこれをサポートしているか確認する必要がある。

構文

if (typeof(EventSource) !== "undefined") {
    // Server Sent Events用のコード
} else {
    // Server Sent Eventsをサポートしないブラウザー向けの案内
}

次の例は、Server Sent Eventsを使って5秒ごとにWebページを更新する例である。

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("/examples/media/sse.php");
    source.onmessage = function(event) { 
        document.getElementById("result").innerHTML += event.data + "<br>"; 
    };
}

上の例で使用したサーバーサイドPHPファイルsse.phpは次のとおりである。

sse.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

EventSourceオブジェクトのメソッド

上の例では、onmessageイベントを使ってメッセージを取得した。 ほかにもイベントがあり、イベントメソッドの種類は次のとおりである。

イベント 説明
onopen サーバーへの接続が開かれたとき
onmessage メッセージを受信したとき
onerror エラーが発生したとき