HTML5 Server-Sent Events (SSE)

1. サーバー送信イベント - 一方向通信

Server-Sent Events (SSE) とは、Web ページがサーバーから自動的に更新情報を受け取ることができる仕組みです。

以前からこれに近いことは可能でしたが、そのためには Web ページ側から更新があるかどうかを確認（ポーリング）しに行く必要がありました。SSE を利用すれば、サーバー側から自動的に更新内容がプッシュされます。

1.1 主な活用例

• Facebook や Twitter のタイムライン更新
• 株価のリアルタイム表示
• ニュースフィードの配信
• スポーツの試合速報

2. ブラウザのサポート状況

各ブラウザにおける Server-Sent Events のサポート状況は以下の通りです。

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

EventSource オブジェクトを使用して、サーバー送信イベントの通知を受信します。

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

3.1 コードの解説

1. 新しい EventSource オブジェクトを作成し、更新を送信するページの URL（この例では "demo_sse.php"）を指定します。
2. 更新が受信されるたびに onmessage イベントが発生します。
3. onmessage イベントが発生すると、受信したデータが ID "result" の要素に表示されます。

4. サーバー送信イベントのサポート確認

Web Worker の例と同様に、ブラウザがサーバー送信イベントをサポートしているかを確認するコードを記述することが推奨されます。

if (typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events をサポートしています。
  // ここに受信用のコードを記述します。
} else {
  // Sorry! Server-sent events はサポートされていません。
}

5. サーバー側のコード例

SSE を動作させるには、データを送信するためのサーバーが必要です（PHP や ASP など）。

サーバー側のスクリプトはシンプルです。HTTP ヘッダーの Content-Type を text/event-stream に設定する必要があります。これで、サーバーから継続的に更新を送信できるようになります。

5.1 PHP による実装例 (demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: サーバー時刻は: {$time}\n\n";
flush();
?>

5.2 サーバーコードの解説

1. Content-Type を text/event-stream に設定します。これは SSE 標準で定められた形式です。
2. Cache-Control を no-cache に設定し、ページがキャッシュされないようにします。
3. 送信するデータ行は必ず data: で開始する必要があります。
4. 出力バッファを flush() して、データを即座にブラウザへ送信します。

6. EventSource オブジェクトのイベント

上記の例では onmessage イベントを使用してメッセージを取得しましたが、他にも利用可能なイベントがあります。

これらのイベントを適切にハンドリングすることで、接続の瞬断からの復帰や、エラー時のユーザー通知など、より堅牢なリアルタイム機能を実装することが可能です。