HTML Server-Sent

Server-Sent イベントを使用すると、Web ページがサーバーから更新を取得できるようになります。

Server-Sent イベント - One Way Messaging

Server-Sent イベントは、Web ページがサーバーから更新を自動的に取得することを意味します。

ページでアップデートが利用可能かどうかを尋ねる必要がある場合は、以前もこれを行うことは可能でした。 更新は、Server-Sent イベントを通じて自動的に到着します。

例: Facebook/Twitter の更新、株価の更新、新しいブログ投稿、スポーツの結果など。

ブラウザのサポート

表内の数字は、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:」で始まります）
• 出力データを Web ページに更新する

EventSourc1e オブジェクト

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