HTML 5サーバ送信イベント

1889 ワード

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

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "
";
  };

みずからやってみる
例の説明:

新しい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):


";
flush();
??>

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

コードの説明:

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

に設定

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

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

Webページに出力データ

Javascriptプレミアムプログラミング読書ノート(第2章)

HTML 5のaudioは携帯電話端末や微信端末では自動再生できません