连接状态恢复

首先，让我们通过假装没有断开连接来处理断开连接：此功能称为“连接状态恢复”。

此功能将**暂时**存储服务器发送的所有事件，并尝试在客户端重新连接时恢复其状态

• 恢复其房间
• 发送任何错过的事件

它必须在服务器端启用

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