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

HTML5でサーバー送信イベント（SSE）を処理する方法を解説

サーバー送信イベントとは？

サーバー送信イベント（Server-Sent Events、SSE）は、HTML5で導入された技術の一つで、サーバーからブラウザへリアルタイムにデータをプッシュ配信する仕組みです。株価のティッカー、ニュースフィード、チャット通知など、継続的に更新される情報を表示する際に非常に便利です。

SSEはEventSourceインターフェースを使用し、HTTP接続を介してサーバーから一方向のイベントストリームを受け取ります。WebSocketと異なり、クライアントからサーバーへの通信は不要なケースに最適で、実装もシンプルです。

SSEを処理するサンプルコード

以下は、HTML5でサーバー送信イベントを処理するための基本的なコード例です。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
         function eventHandler(event)
         {
            // サーバーから送信された時刻を表示
            document.querySelector('#ticker').innerHTML = event.data;
         }
      </script>
   </head>
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
      <div id = "ticker" name = "ticker">
         [TIME]
      </div>
   </body>
</html>

コードの解説

1. イベントソースの指定

<eventsource src="/cgi-bin/ticker.cgi" />要素により、サーバー側のスクリプト（この例ではCGI）への接続が確立されます。このURLに対してブラウザが自動的に接続を開き、イベントストリームの受信を待ちます。

2. イベントリスナーの登録

JavaScript側では、addEventListener("server-time", eventHandler, false)を使って「server-time」という名前のカスタムイベントを監視しています。サーバーからこのイベントが送られてくるたびに、eventHandler関数が呼び出されます。

3. データの表示

イベントハンドラー内では、event.dataによってサーバーから送信されたデータ（この場合は時刻）を取得し、IDが「ticker」の要素の内容を更新して画面に表示しています。

注意点

  • 古い<eventsource>要素は現在の標準では非推奨であり、現代のブラウザではJavaScriptのnew EventSource(url)コンストラクタを使用するのが一般的です。
  • SSEはHTTP/HTTPS上でのみ動作し、同一オリジンポリシーに従います。クロスドメインで利用する場合はCORS設定が必要です。
  • 接続が切断された場合、ブラウザは自動的に再接続を試みるため、堅牢なリアルタイム通信が可能です。

このように、SSEを活用することで、ポーリングなしにサーバーからの最新データを効率的に受け取ることができます。

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

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

  2. 【Jetpack Compose入門】Sealed Classとラムダ式でUIイベントをスマートに処理する方法

    本記事では、Jetpack ComposeにおけるUIイベントの処理方法について、実践的かつ簡潔に解説します。従来のViewシステムでは、OnClickListenerなどのインターフェースを使ってイベントを処理していました。一方、ComposeではKotlinのSealed Class(シールドクラス)、関数型、ラムダ式を最大限に活用できます。コンポーザブル(composable)が何かわからないという方は、まず基礎を解説した記事を読んでおくことをおすすめします。本記事の内容は3分以内の動画にもまとめられています。Sealed ClassでUIイベントをモデリングする方法まずは、UIイベント