連線狀態復原

首先，讓我們假裝沒有斷線來處理斷線：此功能稱為「連線狀態復原」。

此功能將暫時儲存伺服器傳送的所有事件，並嘗試在用戶端重新連線時復原其狀態

• 復原其房間
• 傳送任何錯過的事件

必須在伺服器端啟用

index.js

const io = new Server(server, {
  connectionStateRecovery: {}
});

讓我們看看實際運作

如上方的影片所示，當連線重新建立時，最終會傳遞「即時」訊息。

備註

「斷線」按鈕是為了示範目的而新增的。

程式碼

ES6

<form id="form" action="">
  <input id="input" autocomplete="off" /><button>Send</button>
  <button id="toggle-btn">Disconnect</button>
</form>

<script>
  const toggleButton = document.getElementById('toggle-btn');

  toggleButton.addEventListener('click', (e) => {
    e.preventDefault();
    if (socket.connected) {
      toggleButton.innerText = 'Connect';
      socket.disconnect();
    } else {
      toggleButton.innerText = 'Disconnect';
      socket.connect();
    }
  });
</script>

ES5

<form id="form" action="">
  <input id="input" autocomplete="off" /><button>Send</button>
  <button id="toggle-btn">Disconnect</button>
</form>

<script>
  var toggleButton = document.getElementById('toggle-btn');

  toggleButton.addEventListener('click', function(e) {
    e.preventDefault();
    if (socket.connected) {
      toggleButton.innerText = 'Connect';
      socket.disconnect();
    } else {
      toggleButton.innerText = 'Disconnect';
      socket.connect();
    }
  });
</script>

太棒了！現在，你可能會問

這是一個很讚的功能，為什麼預設不啟用？

有幾個原因

• 它並非總是有效，例如，如果伺服器突然崩潰或重新啟動，則客戶端狀態可能無法儲存
• 擴充時，並非總是能夠啟用此功能

提示

話雖如此，由於你無需在暫時斷線後同步客戶端狀態（例如，當使用者從 WiFi 切換到 4G 時），這確實是一個很棒的功能。

我們將在下一步中探討更通用的解決方案。

資訊

CommonJS

你可以在以下位置的瀏覽器中直接執行此範例

• CodeSandbox
• StackBlitz

ES 模組

你可以在以下位置的瀏覽器中直接執行此範例

• CodeSandbox
• StackBlitz