HTML5 SSEを使用する場(chǎng)合、再接続とエラーに対処する方法には次のものが含まれます。1。デフォルトの再接続メカニズムを理解します。 EventSourceは、デフォルトで接続が中斷されてから3秒後に再試行します。再試行フィールドを介して間隔をカスタマイズできます。 2.接続障害または解析エラーに対処するためのエラーイベントを聞いて、エラータイプを區(qū)別し、自動(dòng)再接続に依存するネットワークの問題、サーバーエラーが手動(dòng)で再接続を遅らせる、認(rèn)証障害の更新トークンなど、対応するロジックを?qū)g行します。 3.接続を手動(dòng)で閉じて再構(gòu)築するなど、再接続ロジックを積極的に制御し、再試行時(shí)間の最大數(shù)を設(shè)定し、Navigatorを組み合わせてネットワークステータスを判斷して再試行戦略を最適化します。これらのメジャーは、アプリケーションの安定性とユーザーエクスペリエンスを改善できます。

HTML5サーバーセントイベント（SSE）を使用する場(chǎng)合、再接続とエラーの処理がアプリケーションの安定性を確保するための鍵です。ブラウザはデフォルトで自動(dòng)的に再接続しようとしますが、特にネットワークが不安定な場(chǎng)合やサーバー側(cè)のエラーがある場(chǎng)合、デフォルトのメカニズムでは十分ではありません。私たちは斷層の耐性を高めるために積極的に介入する必要があります。

SSEのデフォルトの再接続メカニズムを理解します

接続が中斷されると、EventSourceオブジェクトは自動(dòng)的に再接続を試みます。デフォルト間隔は3秒です。今回は、サーバーの応答でretry:フィールドを送信することでカスタマイズできます。例えば：

再試行：5000

これにより、ブラウザは次の再試行の前に5000ミリ秒（つまり5秒）を待つように指示されます。設(shè)定されていない場(chǎng)合、ブラウザはデフォルト値を使用します。

この再接続メカニズムは、短期ネットワーク切斷やサービスの再起動(dòng)など、サーバーが「一時(shí)的に利用できない」?fàn)顩rに適していることに注意する必要があります。ただし、サーバーがHTTPエラー（4xxや5xxなど）を返す場(chǎng)合、ブラウザは自動(dòng)的に再試行せず、現(xiàn)時(shí)點(diǎn)では手動(dòng)で処理する必要があります。

エラーイベントを聞いて応答します

SSEは、接続障害、解析エラーなどをキャプチャできるerrorイベントを提供します。ブラウザは場(chǎng)合によっては自動(dòng)的に再接続されますが、重大なエラーが発生したときに試してみるのが停止する場(chǎng)合があります。したがって、 errorイベントを聞いて適切に応答することが非常に重要です。

このようなリスナーを追加できます：

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

eventsource.addeventlistener（ 'error'、（err）=> {
  console.error（ 'SSEエラー：'、err）;
  //カスタム再接続ロジックはここでトリガーできます}）;

このコールバックでは、通常、エラータイプを判斷する必要があります。例えば：

• それがネットワークの問題である場(chǎng)合、ブラウザの自動(dòng)再接続に依存し続けます。
• サーバーエラー（500の返品など）の場(chǎng)合、遅延後に接続の手動(dòng)再構(gòu)築が必要になる場(chǎng)合があります。
• 認(rèn)証障害などの問題がある場(chǎng)合は、最初にトークンを更新してから再接続する必要がある場(chǎng)合があります。

ここでは、共通の再接続戦略を追加できます。

• 障害の數(shù)を記録します。
• 再試行時(shí)間の最大數(shù)を設(shè)定します。
• 上限に達(dá)した後、ユーザーはネットワークを確認(rèn)するか、システム管理者に通知するように求められます。

再接続ロジックを積極的に制御して、信頼性を向上させます

時(shí)には、再接続動(dòng)作をより注意深く制御したいと考えています。たとえば、ネットワークの復(fù)元後に接続を積極的にトリガーするか、サービスステータスに基づいてポーリングを継続するかどうかを決定します。

一般的な慣行は、エラーが検出された後、現(xiàn)在の接続を手動(dòng)で閉じて、新しいEventSourceインスタンスを作成することです。

 retrycount = 0とします。
const maxretries = 5;

eventsource.addeventlistener（ 'error'、（）=> {
  if（retrycount <maxretries）{
    setimeout（（）=> {
      eventsource.close（）;
      const neweventsource = new eventsource（ &#39;your-endpoint&#39;）;
      //リバウンドイベントリスナー...
      retrycount;
    }、5000）; // custom retry interval} else {
    console.log（ &#39;再試行の數(shù)が上限に達(dá)した&#39;）;
  }
}）;

さらに、Navigator.onlineを使用して、現(xiàn)在オンラインであるかどうかを判斷することもできます。オフラインの場(chǎng)合は、一時(shí)停止して再試行して、ネットワークを復(fù)元した後も試してみてください。

基本的にそれだけです

SSEの再接続とエラーを処理するコアは、ブラウザのデフォルト動(dòng)作を理解し、それに基づいて獨(dú)自のロジックを補(bǔ)完することです。再試行時(shí)間の設(shè)定、エラーイベントの聴取、カスタム再試行メカニズムの実裝などにより、接続の安定性とユーザーエクスペリエンスを改善できます。複雑ではないように見えますが、わずかな過失によりメッセージが失われたり、接続が詰まったりする可能性があります。

以上がHTML5サーバーセントイベントでの再接続とエラーの処理。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。