HTML5のサーバーセントイベントの理解

サーバーセントイベント（SSE）は、サーバーからクライアントへのデータのリアルタイムプッシュを実装するために使用されるHTML5のテクノロジーであり、株式市場、通知システム、その他のシナリオに適しています。 HTTPプロトコルに基づいており、接続を確立した後は開いたままです。サーバーは、自動再接続と標準のデータ形式をサポートして、いつでも更新を送信できます。フロントエンドは、Eventsourceオブジェクトを作成し、メッセージイベントを聴くことにより、データを受信します。バックエンドは、正しいMIMEタイプ（テキスト/イベントストリーム）を設定し、接続を開いて継続的に出力データストリームを保持する必要があります。それを使用する場合、クロスドメインの問題、接続タイムアウト、ブラウザの互換性、および中間層の制限に注意を払う必要があります。

サーバーセントイベント（SSE）は非常に実用的ですが、HTML5では見過ごされがちな機能です。サーバーがリアルタイムの更新をブラウザにプッシュできるようになり、株式市場、通知システム、チャットアプリケーション、その他のシナリオに適しています。

サーバーセントイベントとは何ですか？

SSEは、サーバーがクライアントに積極的にデータを送信できるようにするテクノロジーです。従来のポーリング方法とは異なり、SSEが接続を確立した後、サーバーは新しいデータをクライアントに継続的にプッシュできます。

• HTTPプロトコルに基づいており、実装が比較的簡単です。
• 自動再接続がサポートされており、回復後に再確立が試みられます。
• データ形式には標準仕様があり、解析が簡単です。

たとえば、気象警告システムで作業している場合は、SSEを使用して、ユーザーがページを手動で更新せずにリアルタイムで最新の天気アラート情報をプッシュできます。

フロントエンドでSSEを使用する方法は？

WebページでSSEを使用するには、 EventSourceオブジェクトを作成してメッセージイベントを聞くだけです。

 const eventsource = new EventSource（ 'Your-endpoint-url'）;

eventsource.onmessage = function（event）{
  console.log（ '受信メッセージ：'、event.data）;
};

注意すべきこと：

• サーバーによって返されるMIMEタイプがtext/event-streamであることを確認してください。
• デフォルトでは、接続が中断された場合、ブラウザは自動的に再接続を試みます。
• 接続ステータスとエラー処理は、 .onopenおよび.onerrorを介して聞くことができます。

バックエンドと協力する方法は？

SSEをサポートするには、バックエンドが接続を開いたままにして、指定された形式でデータストリームを出力する必要があります。

node.jsを例にとると、次のような単純なSSEインターフェイスを書くことができます。

 app.get（ '/sse'、（req、res）=> {
  res.setheader（ 'content-type'、 'text/event-stream'）;
  Res.Setheader（ 'Cache-Control'、 'No-Cache'）;

  setInterval（（）=> {
    res.write（ `data：$ {new date（）} \ n \ n`）;
  }、1000）;
}）;

PHPやPythonなどの他の言語も、応答ヘッダーと出力データストリームを同様に設定することもできます。重要なのは、応答を一度に終了するのではなく、接続を開いたままにすることです。

SSEを使用する場合のFAQ

SSEは非常に便利ですが、実際に使用するにはいくつかの落とし穴に遭遇する可能性があります。

• クロスドメインの問題：フロントエンドとバックエンドに正しいCORSヘッダーセットがあることを確認してください。そうしないと、接続を確立できません。
• 接続タイムアウト：一部のエージェントまたはロードバランサーは長期接続を中断する場合があり、サーバー側にハートビートメカニズムを追加することをお勧めします。
• ブラウザの互換性：最新のブラウザは基本的にSSEをサポートしますが、IEと互換性がある必要がある場合は、代替案を考慮する必要があります。

接続が頻繁に切断されているか、メッセージを受信できないことがわかった場合、最初にサーバーが応答ヘッダーを正しく設定しているかどうか、および長い接続を制限する中間層（nginxなど）があるかどうかを確認できます。

基本的にそれだけです。 SSEを理解して正しく使用すると、多くのシナリオでリアルタイム通信の難しさを簡素化できます。

以上がHTML5のサーバーセントイベントの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。