html5 server-sent event 012

Server-Sentイベント-一方向メッセージング
Server-Sentイベントとは、Webページがサーバからの更新を自動的に取得することです.
以前は、Webページが利用可能な更新があるかどうかを尋ねざるを得ないことを前提としていました.サーバからイベントを送信することで、更新が自動的に到着します.
例:Facebook/Twitter更新、見積り更新、新しいブログ、試合結果など.
ServerSentイベント通知の受信
EventSourceオブジェクトは、サーバからイベント通知を送信するために使用されます.
≪インスタンス｜Instance｜emdw≫

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」の要素

にプッシュする.
ServerSentイベントサポートの検出
上記のTIY例では、サーバがイベントを送信するブラウザのサポート状況を検出するための追加のコードを作成しました.

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}

";
flush();
?>

ASPコード(VB)(demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

コードの説明:

ヘッダ「Content-Type」を「text/event-stream」

に設定

は、ページをキャッシュすることを規定する

.

出力送信日(常に「data:」で始まる)

Webページに出力データ

をリフレッシュする.