HTML5 サーバー送信イベント

HTML5 サーバー送信イベントを使用すると、Web ページがサーバーから更新を取得できるようになります。

ブラウザのサポート

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

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

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

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

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

クライアント側でサーバーから送信されたデータを取得し、更新します

<!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..
}

サーバー側のコード例

上記の例が機能するためには、次のことができるサーバーも必要です。データ更新を送信します (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 ページへの出力データを更新します

EventSource オブジェクト

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

学び続ける