HTML 5 サーバー送信イベント

Server-Sent イベント - 一方向メッセージング

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

これは、ウェブページでアップデートが利用可能かどうかを尋ねる必要があった場合、以前も可能でした。サーバー経由でイベントを送信することで、更新を自動的に受信できます。

例: Facebook/Twitter の更新、評価の更新、新しいブログの投稿、イベントの結果など。

ブラウザのサポート

Internet Explorer を除くすべての主要なブラウザは、サーバー送信イベントをサポートしています。

サーバーから送信されたイベント通知を受信する

EventSource オブジェクトは、サーバーから送信されたイベント通知を受信するために使用されます:

Instance

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」の要素にプッシュします

検出サーバー送信イベントのサポート

上記の 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(&#39;Content-Type: text/event-stream&#39;); header(&#39;Cache-Control: no-cache&#39;); $time = date(&#39;r&#39;); 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: " & now()) Response.Flush() %>

コードの説明:

ヘッダー「Content-Type」を「text/event-stream」に設定します

ページがキャッシュされないことを指定します

送信日を出力します (常に "data: " で始まります)

出力データを Web ページに更新します

EventSource オブジェクト

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

Event

Description

onopen サーバーへの接続が開かれたとき

onmessage メッセージが受信されたとき

onerror エラーが発生したとき

上記は HTML です5 サーバー送信イベント 関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。