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 |