HTML Server-Sentイベント

Server-Sentイベントは、ウェブページがサーバーから更新を受信できるようにします。

Server-Sentイベント - One Way Messaging

Server-Sentイベントとは、ウェブページが自動的にサーバーから更新を受信するものです。

以前もこのようなことが可能でしたが、ウェブページは更新の利用可能性を確認する必要がありました。Server-Sentイベントにより、更新が自動的に到着します。

例えば：Facebook/Twitterの更新、株価の更新、新しいブログ投稿、競技結果などが含まれます。

ブラウザのサポート

テーブルの数字は、完全にserver-sentイベントをサポートする最初のブラウザを示しています。

API
SSE 6.0 サポートしていません 6.0 5.0 11.5

Server-Sentイベント通知の受け取り

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イベントサポートの検出

TIYインスタンスでは、サーバー送信イベントのブラウザサポートを検出する追加のコードを書きました：

if(typeof(EventSource) !== "undefined") {
    // はい！サーバー送信イベントをサポートしています！
    // いくつかのコード.....
} 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: " で始まる）
  • ウェブページのリフレッシュにデータを出力

EventSource オブジェクト

上記の例では、onmessage イベントを使用してメッセージを取得します。ただし、他のイベントも使用できます：

イベント 説明
onopen サーバーへの接続が開かれた場合
onmessage メッセージを受信した場合
onerror エラーが発生した場合