JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Server-Sent Events（SSE）入門：Webアプリでサーバーからのイベントを受信する方法

WebアプリケーションでServer-Sent Events（サーバー送信イベント、SSE）を利用するには、ドキュメント内に <eventsource> 要素を追加します。

<eventsource> 要素の src 属性には、永続的なHTTP接続を確立し、イベントを含むデータストリームを継続的に送信するURLを指定します。

このURLは、イベントデータの送信処理を担当するPHP、Perl、Pythonなどのサーバーサイドスクリプトを指すのが一般的です。

記述例

以下は、サーバーから配信される時刻情報を受け取って表示するアプリケーションの例です。

<!DOCTYPE HTML>
<html>
   <head>
     <script>
       /* ここにイベント処理のロジックを定義 */
     </script>
   </head>

   <body>
     <div id = "sse">
       <eventsource src = "/cgi-bin/ticker.cgi" />
     </div>
     <div id = "ticker">
       <TIME>
     </div>
   </body>
</html>

サーバー側のレスポンス形式

SSEを正しく動作させるためには、サーバー側が適切なヘッダーとデータ形式で応答する必要があります。具体的には、レスポンスの Content-Type を「text/event-stream」に設定し、「data:」というプレフィックスを付けた行でイベントデータを送信します。また、キャッシュを無効化するために「Cache-Control: no-cache」ヘッダーも併せて指定することが推奨されます。

サーバー側スクリプトの例（PHP）

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

echo "data: " . date('Y-m-d H:i:s') . "\n\n";
flush();
?>

補足：現在の実装では EventSource API が標準

なお、<eventsource> 要素は初期のHTML5ドラフトで提案されたものですが、現在の仕様では削除されており、主要ブラウザでもサポートされていません。現代のWebアプリケーションでは、代わりにJavaScriptの EventSource インターフェースを使用するのが標準的な方法です。

EventSource API を使った実装例

const source = new EventSource('/cgi-bin/ticker.cgi');

source.onmessage = function(event) {
  document.getElementById('ticker').innerHTML = event.data;
};

// 接続エラー時の処理
source.onerror = function() {
  console.log('サーバーとの接続が切断されました');
};

このように EventSource API を使用すれば、サーバーとの接続が切れた場合にも自動的に再接続が行われるため、堅牢なリアルタイム通信を実現できます。チャットアプリケーション、株価やニュースのティッカー、通知システムなど、サーバーからクライアントへの一方向のリアルタイム更新が必要な場面でSSEは非常に有効です。

  1. HTML5のサーバー送信イベント（SSE）の仕組みと実装方法を解説

    サーバー送信イベント（SSE）とはサーバー送信イベント（Server-Sent Events：SSE）は、サーバーからクライアントへデータをストリーミング配信する仕組みを標準化した技術です。クライアントが定期的にリクエストを繰り返すポーリング方式と異なり、サーバー側から一方向的にデータを継続的にプッシュできる点が大きな特徴です。基本的な使い方Webアプリケーションでサーバー送信イベントを利用するには、ドキュメント内に <eventsource> 要素を追加します。<eventsource> 要素の src 属性には、イベントデータを含むデータストリームを送信するための永

  2. HTML5のレスポンシブ対応とは？Webデザインにおける応答性の重要性を解説

    HTML5は、最新かつ人気の高いWebデザイン言語として、デザイン業界に大きな変革をもたらしました。従来のHTMLと比較したとき、HTML5を特別な存在にしている最大の要因こそが「レスポンシブ（応答性）」です。 Webページのレスポンシブ性とは、ページがブラウザ上に読み込まれた後、閲覧に使われたデバイス（PC、スマートフォン、タブレットなど）に応じて、適切な出力・表示を行う能力のことを指します。 旧来のHTMLには多くの制約があり、それが新バージョン誕生のきっかけとなりました。当時のWebデザイナーには、変化するテクノロジーに合わせて柔軟にページを作り込む自由度がなかったのです。 最新のテ