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

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

サーバー送信イベント（SSE）とは

サーバー送信イベント（Server-Sent Events：SSE）は、サーバーからクライアントへデータをストリーミング配信する仕組みを標準化した技術です。クライアントが定期的にリクエストを繰り返すポーリング方式と異なり、サーバー側から一方向的にデータを継続的にプッシュできる点が大きな特徴です。

基本的な使い方

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

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

このURLは、イベントデータの送信を継続的に担当するPHP、Perl、Pythonなどのスクリプトを指します。以下は、サーバーの時刻を受信して表示するシンプルなWebアプリケーションの例です。

サンプルコード

次のコードを実行すると、HTML5でサーバー送信イベントを利用する方法を実際に確認できます。

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            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>

最後に、Perlで記述された ticker.cgi のコードは以下のとおりです。

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
    print "Event: server-time\n";
    $time = localtime();
    print "Data: $time\n";
    sleep(5);
}

補足：モダンブラウザでの実装方法

なお、<eventsource> 要素は現在のHTML仕様では非推奨となっており、最新のブラウザではJavaScriptの EventSource インターフェースを使用するのが一般的です。「new EventSource('/cgi-bin/ticker.cgi')」のようにオブジェクトを生成し、addEventListenerでイベントを購読することで、同様の動作を実現できます。

SSEは、チャットアプリの新着通知、株価やニュースフィードのリアルタイム更新など、サーバーからクライアントへの一方向のデータ配信が必要な場面で特に活躍します。WebSocketと比べると実装がシンプルで、通常のHTTP接続を利用できる点もメリットです。

  1. HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説

    HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l

  2. HTML5のlocalStorage APIを使ってブラウザにデータを保存する方法

    HTML5 localStorageとは HTML5のlocalStorageは、文字列データをブラウザ内に保存し、現在のセッションが終了してもデータを保持し続けることができる仕組みです。localStorageは有効期限なしでデータを保存します。一方、sessionStorageはセッション中のみ有効であり、ブラウザを閉じると保存されたデータは失われます。 localStorageの用途と特徴 ローカルストレージは、複数のウィンドウ間で共有でき、セッションをまたいでもデータが持続するストレージとして設計されています。特に、Webアプリケーションではパフォーマンス向上のために、ユーザーが作成