HTML SSE API
Server-Sent Events(SSE)により、Webページはサーバーから更新を取得できます。
Server-Sent Events - 一方向メッセージ
Server-Sent Eventsは、Webページがサーバーから自動的に更新を取得するときです。
これは以前にも可能でしたが、Webページは更新が利用可能かどうかを確認する必要がありました。Server-Sent Eventsでは、更新は自動的に行われます。
例: Facebook/Twitterの更新、株価の更新、ニュース フィード、スポーツの結果など。
ブラウザのサポート
表の数字は、Server-Sent Eventsを完全にサポートする最初のブラウザーバージョンを示しています。
|
API |
|||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
サーバーから送信されたイベント通知を受信する
EventSourceオブジェクトは、サーバーから送信されたイベント通知を受信するために使用されます。
例
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
例の説明
- 新しいEventSourceオブジェクトを作成し、更新を送信するページのURLを指定します(この例では「demo_sse.php」)
- 更新が受信されるたびに、onmessageイベントが発生します。
- onmessageイベント発生時、受信したデータをid="result"の要素に入れる
Server-Sent Eventsのサポートを確認する
上記の「試してみる」の例では、Server-Sent Eventsに対するブラウザーのサポートを確認するための追加のコード行がいくつかありました。
if(typeof(EventSource) !== "undefined") {
// はい！Server-Sent Eventsをサポートしています!
// <i>いくつかのコード</i>
} else {
// すみません！サーバー送信イベントはサポートされていません。
}
サーバー側のコード例
上記の例が機能するには、データ更新を送信できるサーバー(PHPやASPなど)が必要です。
サーバー側のイベントストリームの構文は単純です。「Content-Type」ヘッダーを「text/event-stream」に設定します。これで、イベントストリームの送信を開始できます。
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.asp)
<%
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 | エラーが発生したとき |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。