HTML5 サーバー送信イベント

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

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

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

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

以下は、クライアント側 JavaScript とサーバー側 PHP コードを含む W3School のサンプル コードです:

var source = new EventSource("demo_sse.php");

source.onmessage = function(even ) {

Document.getElementById("result").innerHTML +=event.data + "<br />";

};

このコードは、demo_sse.php からデータを継続的に取得します。そして、結果のIDを使用して結果をdivに出力します。

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: サーバー時刻は: {$time}nn";

flush();

?>

thisこのコード部分は、サーバーの現在時刻をクライアントに返します。最後に、次のような結果がクライアント ページに表示されます:

サーバー時間は: Fri, 29 Aug 2016 02:03:21 +0800

サーバー時間は: Fri, 29 Aug 2016 02:03:24 + 0800

サーバー時間は: Fri, 29 Aug 2016 02:03:27 +0800

サーバー時間は: Fri, 29 Aug 2016 02:03:30 +0800

サーバー時間は: Fri, 29 Aug 2016 02:03:33 +0800

...

サーバー送信イベント通知の受信

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

instance

var ソース=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」の要素にプッシュされます

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

次の例では、サーバーのブラウザーサポートを検出する追加のコードを作成しました。送信されたイベント:

if(typeof(EventSource)!=="未定義")
{
// ブラウザは Server-Sent をサポートしています
// 一部のコード...
}
else
{
// ブラウザはサポートしていませんsupport Server-Sent ..
}

サーバー側のコード例

上記の例が機能するには、データ更新を送信できるサーバー (PHP や ASP など) も必要です。

サーバーサイドイベントストリーミングの構文は非常に簡単です。 「Content-Type」ヘッダーを「text/event-stream」に設定します。これで、イベント ストリームの送信を開始できるようになりました。

例

<?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: " & now())
Response.Flush()
%>

コードの説明:

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

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

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

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