接続状態の復旧

まず、切断がなかったかのように見せかけて切断を処理してみましょう。この機能は「接続状態の復旧」と呼ばれます。

この機能は、サーバーから送信されたすべてのイベントを一時的に保存し、クライアントが再接続したときにその状態を復元しようとします。

• ルームを復元
• 見逃したイベントを送信

サーバー側で有効にする必要があります

index.js

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

実際に動作を見てみましょう

上のビデオでわかるように、「realtime」メッセージは最終的に接続が再確立されたときに配信されます。

注

「切断」ボタンは、デモンストレーションの目的で追加されました。

コード

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