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 | エラーが発生したとき |