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イベントが発生したとき、受信したデータを"result"IDの要素にプッシュします

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 エラーが発生した場合