HTML SSE API
サーバー送信イベント(SSE)を使用すると、Webページでサーバーから更新を取得できます。
サーバー送信イベント-一方向メッセージング
サーバー送信イベントは、Webページがサーバーから更新を自動的に取得する場合です。
これは以前にも可能でしたが、Webページは更新が利用可能かどうかを尋ねる必要がありました。サーバーから送信されたイベントでは、更新が自動的に行われます。
例:Facebook / Twitterの更新、株価の更新、ニュースフィード、スポーツの結果など。
ブラウザのサポート
表の数字は、サーバーから送信されたイベントを完全にサポートする最初のブラウザーバージョンを示しています。
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"の要素に入れます
サーバー送信イベントのサポートを確認する
上記のtryitの例では、サーバーから送信されたイベントに対するブラウザーのサポートを確認するための追加のコード行がいくつかありました。
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
サーバー側のコード例
上記の例を機能させるには、データ更新を送信できるサーバー(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イベントを使用してメッセージを取得しました。ただし、他のイベントも利用できます。
Events | Description |
---|---|
onopen | When a connection to the server is opened |
onmessage | When a message is received |
onerror | When an error occurs |