HTML5 Server-Sent イベント

Server-Sent イベントは、Webページがサーバからの更新を取得することを可能にします。

Server-Sent イベント - 一方向メッセージング

server-sent は、 Web ページがサーバから自動的に更新を取得するときのイベントです。

これは、以前にも可能でしたが、Web ページは、利用できる更新があるかどうかを問合せる必要がありました。 server-sent イベントを使用すると、更新が自動的に送信されて来ます。

例：Facebook/Twitter の更新、株価の更新、ニュースフィード、スポーツの結果など。

ブラウザ・サポート

表中の数字は、完全にServer-Sent イベントをサポートした最初のブラウザのバージョンを示しています。

API
SSE	6.0	Not supported	6.0	5.0	11.5

Server-Sent イベント通知の受信

EventSource オブジェクトは、server-sent イベント通知を受信するために使用します：

例

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};

Try it yourself ❯

例の説明：

新しい EventSource オブジェクトを作成し、更新を送信するページ（この例では "demo_sse.php"）の URL を指定します
更新を受信するたびに、onmessage イベントが発生します
onmessage イベントが発生すると、id="result" を持つ要素に受信データを配置します

Server-Sent イベントのサポート確認

上記 tryit の例の中に、server-sent イベントのブラウザ・サポートを確認するため、いくつかの特別なコードがあります：

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

サーバ・サイドのコード例

上記の例を動かすには、データ更新を送信できるサーバ（PHP や ASP など）が必要です。

サーバ・サイド・イベント·ストリームの構文は簡単で、 "text/event-stream" を "Content-Type" ヘッダに設定するだけです。これで、イベントストリームの送信を開始することができます。

PHP コード(demo_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();
?>

ASP (VB) コード(demo_sse.html):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

コードの説明：

"Content-Type" ヘッダに "text/event-stream" を設定する
ページがキャッシュされないように指定する
送信するデータを出力する（常に、"data: "で始まる）
Web ページに戻す出力データをフラッシュする

EventSource オブジェクト

上記例では、メッセージの取得に onmessage イベントを使用しましたが、他のイベントも用意されています：

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

❮ 前章へ次章へ ❯