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

サーバーからのリアルタイムアップデートのためにHTML5サーバーセントイベント（SSE）APIを使用する方法

HTML5サーバーセントイベント（SSE）APIは、Webサーバーがクライアントのブラウザにリアルタイムで更新をプッシュするためのシンプルで効率的な方法を提供します。 WebSocketsなどのテクノロジーとは異なり、SSEは単方向です。サーバーはクライアントにデータを送信しますが、クライアントは同じ接続を介してサーバーにデータを送信することはできません。このシンプルさにより、ストックティッカー、ライブスコア、チャットアプリケーション（クライアントがメッセージを受信する必要がある場合）など、サーバーがクライアントに更新をプッシュする必要があるシナリオに最適です。

SSEを使用するには、JavaScriptコードでEventSourceオブジェクトを作成する必要があります。このオブジェクトは、イベントをストリーミングするサーバー側のエンドポイントへの永続的な接続を確立します。これが基本的な例です。

 <code class="javascript">const eventSource = new EventSource('/events'); eventSource.onmessage = function(event) { console.log('Received event:', event.data); // Process the received data here, eg, update the UI }; eventSource.onerror = function(error) { console.error('EventSource failed:', error); };</code>

このコードは/eventsに接続されたEventSourceを作成します。 onmessageイベントハンドラーは、サーバーから送信されたデータを受信し、 onerrorハンドラーはエラーをキャッチします。サーバーは、AT /eventsを設定する必要があります。正しいSSE形式でデータを送信するように構成する必要があります（これについては、以下のサーバー側のセクションで詳しく説明します）。潜在的なエラーを処理し、再接続ロジックを実装することを忘れないでください（後のセクションで詳しく説明してください）。サーバーは、クライアントまたはサーバーのいずれかによって接続が閉じられるまで、この接続に対してデータを継続的に送信します。

WebSocketsのような他のリアルタイム通信技術と比較して、サーバーセントイベント（SSE）を使用することの利点

SSEは、WebSocketsのような他のリアルタイム通信技術よりもいくつかの利点を提供します。

• シンプルさ： SSEは、クライアント側とサーバー側の両方で実装するのが大幅に簡単です。 APIは簡単で、プロトコルはWebSocketsよりも複雑ではありません。これにより、開発時間と複雑さが短縮されます。
• 効率： SSEは、一方向の通信により効率的です。サーバーからクライアントへの通信のみを可能にするため、WebSocketsのような双方向通信プロトコルに関連するオーバーヘッドを回避します。これは、特に多くのクライアントを扱う場合、帯域幅の消費量の減少とサーバーの負荷の削減につながります。
• HTTPベース： SSEは既存のHTTPインフラストラクチャを活用して、既存のWebサーバーやインフラストラクチャと簡単に統合できます。これにより、特殊なセットアップまたはプロトコルの必要性がなくなります。
• 組み込みの再試行メカニズム： SSEには、組み込みの再試行メカニズムが含まれています。接続が失われた場合、クライアントは指定された遅延後に自動的にサーバーに再接続しようとします。これにより、エラー処理が簡素化され、堅牢性が保証されます。 （ただし、この動作をカスタマイズできますが）。

ただし、双方向通信が必要な場合、WebSocketは優れています。 SSEの単方向性は、クライアントがサーバーに積極的にデータを送信する必要があるシナリオでの適用性を制限します。

SSEクライアントアプリケーション内でエラー処理と再接続ロジックの実装

SSEには再試行メカニズムが組み込まれていますが、堅牢なアプリケーションは、より制御されたレスポンシブエクスペリエンスのために、カスタムエラー処理と再接続ロジックを実装する必要があります。これが強化された例です：

 <code class="javascript">const eventSource = new EventSource('/events'); let reconnectAttempts = 0; const maxReconnectAttempts = 5; eventSource.onmessage = function(event) { console.log('Received event:', event.data); reconnectAttempts = 0; // Reset on successful message }; eventSource.onerror = function(error) { console.error('EventSource failed:', error); if (reconnectAttempts  { eventSource.close(); eventSource = new EventSource('/events'); // Reconnect reconnectAttempts ; }, retryDelay); } else { console.error('Max reconnect attempts reached. Giving up.'); // Handle the failure appropriately, eg, display an error message to the user } };</code>

この改善された例が追加されます：

• 再接続試行：無限のループを防ぐための再接続試行の数を制限します。
• 指数バックオフ：試行ごとに指数関数的に再試行遅延を増加させ、接続問題中にサーバーの負荷を削減します。
• 障害処理：再接続試行の最大数に達する状況を処理するメカニズムを提供します。

サーバー側のコードを構築して、サーバーセントイベント（SSE）APIを使用してイベントを効率的に送信する

SSEのサーバー側の実装は、使用されるテクノロジー（node.js、python、java）に依存します。ただし、コア原則は同じままです。サーバーは、正しいSSE形式でデータを送信する必要があります。この形式には、特定のHTTPヘッダー（ Content-Type: text/event-stream ）と特定のデリミターでフォーマットされたデータが必要です。 Expressを使用してnode.jsを使用した基本的な例を次に示します。

 <code class="javascript">const express = require('express'); const app = express(); const port = 3000; app.get('/events', (req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // Simulate sending events every second setInterval(() => { const data = `data: ${new Date().toISOString()}\n\n`; res.write(data); }, 1000); req.on('close', () => { console.log('Client disconnected'); }); }); app.listen(port, () => { console.log(`Server listening on port ${port}`); });</code>

このnode.jsコードは/eventsでエンドポイントを設定します。 res.writeHead関数は、必要なHTTPヘッダーを設定します。 setInterval関数は、毎秒データを送信することをシミュレートします。重要なことに、各データメッセージの後に、SSE仕様で必要とされる2つのNewline文字（ \n\n ）が続きます。 req.on('close')イベントハンドラーは、切断を記録するために重要です。このコードを選択したサーバー側のテクノロジーとデータソースに適応させることを忘れないでください。効率的なスケーリングについては、ロードバランサーや非同期フレームワークなど、多くの同時接続を処理するために設計されたテクノロジーの使用を検討してください。

以上がサーバーからのリアルタイムアップデートにHTML5サーバーセントイベント（SSE）APIを使用するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。