HTML5のリアルタイムアップデートにサーバーセントイベント（SSE）を使用するにはどうすればよいですか？-htmlチュートリアル-php.cn

HTML5のリアルタイムアップデートにサーバーセントイベント（SSE）を使用するにはどうすればよいですか？

Emily Anne Brown

リリース： 2025-03-14 11:33:32

オリジナル

489 人が閲覧しました

HTML5のリアルタイムアップデートにサーバーセントイベント（SSE）を使用するにはどうすればよいですか？

HTML5のリアルタイムアップデートにサーバーセントイベント（SSE）を使用するには、クライアント側とサーバー側の両方のコンポーネントを設定する必要があります。これが段階的なガイドです：

クライアント側のセットアップ：

Eventsourceの作成：
HTMLファイルでは、サーバー上のURLに接続するEventSourceオブジェクトを作成します。このURLは、イベントを送信するエンドポイントである必要があります。
```
 <code class="html"><script> var source = new EventSource(&#39;/events&#39;); </script></code>
```
ログイン後にコピー
イベントを聞く：
message 、 open 、 errorなど、さまざまな種類のイベントを聞くことができます。たとえば、着信メッセージを処理するには：
```
 <code class="html"><script> source.onmessage = function(event) { console.log(&#39;New message:&#39;, event.data); // Handle the event data }; </script></code>
```
ログイン後にコピー
カスタムイベント：
サーバーがカスタムイベントを送信した場合、 addEventListenerを使用してそれらを聞くことができます。
```
 <code class="html"><script> source.addEventListener(&#39;customEvent&#39;, function(event) { console.log(&#39;Custom event:&#39;, event.data); }, false); </script></code>
```
ログイン後にコピー

サーバー側のセットアップ：

サーバーのセットアップ：
サーバーは、適切なヘッダーで応答し、データを正しくフォーマットする必要があります。たとえば、Expressを使用したnode.jsで：

 <code class="javascript">app.get('/events', function(req, res) { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); setInterval(function() { res.write('data: ' new Date().toLocaleTimeString() '\n\n'); }, 1000); });</code>

ログイン後にコピー

データの送信：
データは、 data:から始めて、データを使用して、2つのNewline文字（ \n\n ）で終了する正しい形式で送信する必要があります。

これらの手順を使用して、WebアプリケーションにSSEを実装して、クライアントにリアルタイムの更新をプッシュできます。

WebSocketsのような他のリアルタイムテクノロジーよりもSSEを使用することの利点は何ですか？

SSEは、次のようなWebSocketsなどの他のリアルタイムテクノロジーよりもいくつかの利点を提供します。

実装がより簡単：
通常、SSEはセットアップが簡単で、WebSocketsと比較してオーバーヘッドが少なくなります。 HTTPを使用して、既存のWebインフラストラクチャと簡単に統合できます。
自動再接続：
SSE接続は、中断された場合に自動的に再接続を試み、接続を管理するための追加のロジックの必要性を減らします。
サーバーからクライアントのみ：
SSEは単方向であり、サーバーからクライアントにのみデータを送信します。これは、サーバーのロジックを簡素化するため、アプリケーションがサーバー間通信のみを必要とする場合に有益です。
HTTPフレンドリー：
SSEはHTTPを介して動作し、プロキシやロードバランサーなどの既存のHTTPベースのシステムに拡大して適合しやすくなります。
イベントタイプ：
SSEは、名前付きイベントを可能にし、クライアント側のさまざまな種類の更新を簡単に分類できます。

ただし、SSEは、双方向通信を必要とするアプリケーションには適していない場合があります。これは、WebSocketの重要な利点です。

WebアプリケーションでSSEを使用するときに、エラーと切断を処理するにはどうすればよいですか？

SSEのエラーと切断の処理は、堅牢なWebアプリケーションを維持するために重要です。ここにいくつかの戦略があります：

エラーイベントを聞く：
errorイベントを聞くことでエラーを処理できます。

 <code class="html"><script> source.onerror = function() { console.log(&#39;An error occurred while attempting to connect to the server.&#39;); // Handle error, perhaps by attempting to reconnect }; </script></code>

ログイン後にコピー

再接続ロジック：
EventSourceオブジェクトは、接続が失われた場合に自動的に再接続しようとしますが、カスタムロジックを追加する場合があります。

 <code class="html"><script> var attempt = 0; source.onerror = function() { if (attempt < 3) { setTimeout(function() { source = new EventSource(&#39;/events&#39;); attempt ; }, 1000); } else { console.log(&#39;Failed to reconnect after several attempts.&#39;); } }; </script></code>

ログイン後にコピー

サーバー側の取り扱い：
サーバー側では、長寿命の接続を適切に処理し、リソースを効率的に管理してサーバーの過負荷を防ぎます。
ユーザーフィードバック：
接続が失われ、再確立されたときにユーザーのフィードバックを提供して、アプリケーションのステータスについてユーザーに通知し続けます。

これらの戦略を実装すると、SSEベースのアプリケーションでエラーや切断をより優雅に処理するのに役立ちます。

SSEを実装するときにブラウザの互換性を確保するために、どのような手順を実行すればよいですか？

SSEを実装するときにブラウザの互換性を確保するには、いくつかのステップが含まれます。

ブラウザのサポートを確認してください：
SSEは、Chrome、Firefox、Safari、Edgeなど、ほとんどの最新のブラウザーによってサポートされています。ただし、各ブラウザの特定のバージョンを確認して、サポートを確保する必要があります。
ポリフィルとフォールバック：
SSEネイティブにサポートしていない古いブラウザの場合、ポリフィルまたはフォールバックの使用を検討してください。 EventSource polyfillなどのライブラリは、SSE機能を非サポートブラウザーに拡張するのに役立ちます。
フォールバックメカニズム：
SSEサポートなしでブラウザのフォールバックメカニズムを実装します。ポーリングやWebSocketsのような別のリアルタイムテクノロジーをフォールバックとして使用できます。
ブラウザ全体のテスト：
一貫した動作を確保するために、さまざまなブラウザーとバージョンで実装を徹底的にテストします。クロスブラウザーテストには、Browserstackやソースラボなどのツールを使用します。
優雅な劣化：
SSEが利用できない場合は、アプリケーションを設計して優雅に劣化させます。 SSE障害を介してリアルタイムの更新を受けた場合、ユーザーが更新を受信するための代替方法を提供します。
サーバー側の互換性：
サーバー側のコードがSSEプロトコルと互換性があることを確認し、さまざまなクライアントの実装に対してテストします。