使用 HTML5 SSE 時，處理重連和錯誤的方法包括：1. 了解默認(rèn)重連機制，EventSource 默認(rèn)在連接中斷后 3 秒重試，可通過 retry 字段自定義間隔；2. 監(jiān)聽 error 事件以應(yīng)對連接失敗或解析錯誤，區(qū)分錯誤類型并執(zhí)行相應(yīng)邏輯，如網(wǎng)絡(luò)問題依賴自動重連、服務(wù)器錯誤手動延遲重連、認(rèn)證失效刷新 token；3. 主動控制重連邏輯，如手動關(guān)閉并重建連接、設(shè)置最大重試次數(shù)、結(jié)合 navigator.onLine 判斷網(wǎng)絡(luò)狀態(tài)以優(yōu)化重試策略。這些措施可提升應(yīng)用穩(wěn)定性與用戶體驗。

使用 HTML5 Server-Sent Events（SSE）時，處理重連和錯誤是確保應(yīng)用穩(wěn)定性的關(guān)鍵。瀏覽器默認(rèn)會嘗試自動重連，但僅靠默認(rèn)機制往往不夠，特別是在網(wǎng)絡(luò)不穩(wěn)定或服務(wù)器端出錯的情況下。我們需要主動介入來增強容錯能力。

了解 SSE 默認(rèn)的重連機制

當(dāng)連接中斷時，EventSource 對象會自動嘗試重新連接，默認(rèn)間隔為 3 秒。這個時間可以通過在服務(wù)器響應(yīng)中發(fā)送 retry: 字段來自定義。例如：

retry: 5000

這告訴瀏覽器下次重試前等待 5000 毫秒（即 5 秒）。如果不設(shè)置，瀏覽器將使用默認(rèn)值。

需要注意的是，這種重連機制適用于服務(wù)器“暫時不可用”的情況，比如短時斷網(wǎng)或服務(wù)重啟。但如果服務(wù)器返回了 HTTP 錯誤（如 4xx 或 5xx），瀏覽器不會自動重試，這時候就需要我們手動處理。

監(jiān)聽 error 事件并做出響應(yīng)

SSE 提供了 error 事件讓我們可以捕獲連接失敗、解析錯誤等情況。雖然瀏覽器會在某些情況下自動重連，但在一些嚴(yán)重錯誤發(fā)生時，它可能停止嘗試。因此，監(jiān)聽 error 事件并做出適當(dāng)反應(yīng)非常關(guān)鍵。

你可以這樣添加監(jiān)聽器：

const eventSource = new EventSource('your-endpoint');

eventSource.addEventListener('error', (err) => {
  console.error('SSE error:', err);
  // 可以在這里觸發(fā)自定義重連邏輯
});

在這個回調(diào)中，你通常需要判斷錯誤類型。例如：

• 如果是網(wǎng)絡(luò)問題，繼續(xù)依賴瀏覽器的自動重連即可；
• 如果是服務(wù)器錯誤（如返回 500），可能需要延遲后手動重建連接；
• 如果是認(rèn)證失效等問題，可能需要先刷新 token 再重連。

這里可以加入一個通用的重連策略：

• 記錄失敗次數(shù)；
• 設(shè)置最大重試次數(shù)；
• 達到上限后提示用戶檢查網(wǎng)絡(luò)或通知系統(tǒng)管理員。

主動控制重連邏輯以提高可靠性

有時候，我們希望更精細(xì)地控制重連行為。比如在網(wǎng)絡(luò)恢復(fù)后主動觸發(fā)連接，或者根據(jù)業(yè)務(wù)狀態(tài)決定是否繼續(xù)輪詢。

一種常見做法是在檢測到錯誤后，手動關(guān)閉當(dāng)前連接并創(chuàng)建新的 EventSource 實例：

let retryCount = 0;
const maxRetries = 5;

eventSource.addEventListener('error', () => {
  if (retryCount < maxRetries) {
    setTimeout(() => {
      eventSource.close();
      const newEventSource = new EventSource('your-endpoint');
      // 重新綁定事件監(jiān)聽器...
      retryCount  ;
    }, 5000); // 自定義重試間隔
  } else {
    console.log('重試次數(shù)已達上限');
  }
});

此外，還可以結(jié)合 navigator.onLine 來判斷當(dāng)前是否在線，如果離線則暫停重試，在恢復(fù)網(wǎng)絡(luò)后再繼續(xù)嘗試。

基本上就這些

處理好 SSE 的重連和錯誤，核心在于理解瀏覽器的默認(rèn)行為，并在其基礎(chǔ)上補充自己的邏輯。你可以通過設(shè)置 retry 時間、監(jiān)聽 error 事件、實現(xiàn)自定義重試機制等方式，提升連接的穩(wěn)定性和用戶體驗。雖然看起來不復(fù)雜，但稍有疏忽就可能導(dǎo)致消息丟失或連接卡死，所以細(xì)節(jié)上還是要多加注意。

以上是使用HTML5服務(wù)器序列事件處理重新連接和錯誤。的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！