HTML5 サーバー送信イベント
HTML5 サーバー送信イベント
HTML5 サーバー送信イベントを使用すると、Web ページがサーバーから更新を取得できるようになります。
ブラウザのサポート
Internet Explorer を除くすべての主要なブラウザは、サーバー送信イベントをサポートしています。
Server-Sent イベント - 一方向メッセージング
Server-Sent イベントは、Web ページがサーバーから更新を自動的に取得することを指します。
これは、ウェブページでアップデートが利用可能かどうかを?qū)い亭氡匾ⅳ盲繄龊?、以前も可能でした。サーバー経由でイベントを送信することで、更新を自動的に受信できます。
例: Facebook/Twitter の更新、評価の更新、新しいブログの投稿、イベントの結(jié)果など。
クライアント側(cè)でサーバーから送信されたデータを取得し、更新します
<!DOCTYPE html>
<html>
<body>
<h1>獲得服務器更新</h1>
<div id="result">
</div>
<script>if(typeof(EventSource)!=="undefined"){
var source=new EventSource("http://www.w3school.com.cn/example/html5/demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";}
</script>
</body>
</html>サポートするサーバーコード(PHPまたはASP)は次のとおりです:
<?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();
?>コードの説明:
ヘッダー「Content-Type」を「text」に設定します/event-stream" ”
ページがキャッシュされないことを指定します
送信日を出力します(常に「data:」で始まります)
出力データをWebページに更新します
サーバー送信イベントのサポートを検出します
次の例では、サーバー送信イベントに対するブラウザーのサポートを検出する追加の段落コードを作成しました:
if(typeof(EventSource)!=="undefined")
{
// 瀏覽器支持 Server-Sent
// 一些代碼.....
}
else
{
// 瀏覽器不支持 Server-Sent..
}サーバー側(cè)のコード例
上記の例が機能するためには、次のことができるサーバーも必要です。データ更新を送信します (PHP や ASP など)。
サーバーサイドイベントストリーミングの構(gòu)文は非常に簡単です。 「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 ページへの出力データを更新します
EventSource オブジェクト
上記の例では、onmessage イベントを使用してメッセージを取得します。ただし、他のイベントを使用できます。
