HTML5 サーバー送信イベント（Server-Sent Events）

HTML5 サーバー送信イベント（server-sent event）により、Webページはサーバーからの更新を取得できます。

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

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

以前もこれを行うことは可能でしたが、Webページは利用可能な更新があるかどうかを問い合わせる必要がありました。サーバー送信イベントにより、更新は自動的に届きます。

例：Facebook/Twitterの更新、株価の更新、新しいブログ記事、試合結果など。

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

Server-Sent イベント通知の受信

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

例

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" の要素に挿入します。

Server-Sent イベントのサポート検出

以下の例では、サーバー送信イベントのブラウザサポート状況を検出するための追加コードを作成しました：

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 イベントを使用してメッセージを取得しました。ただし、他のイベントも使用できます：

イベント 説明
onopen サーバーへの接続が開かれたとき
onmessage メッセージを受信したとき
onerror エラーが発生したとき
その他の拡張