连接状态恢复

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

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

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

必须在服务器端启用此功能：

index.js

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

让我们看看它的实际效果：

如上面视频所示，当连接重新建立时，“实时”消息最终会被传递。

备注

“断开连接”按钮是为了演示目的而添加的。

代码

ES6

<form id="form" action="">
  <input id="input" autocomplete="off" /><button>发送</button>
  <button id="toggle-btn">断开连接</button>
</form>

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

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

ES5

<form id="form" action="">
  <input id="input" autocomplete="off" /><button>发送</button>
  <button id="toggle-btn">断开连接</button>
</form>

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

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

很好！你可能会问：

这是一个很棒的功能，为什么默认没有启用呢？

原因有几个：

• 它并不总是有效，例如，如果服务器突然崩溃或重启，客户端状态可能无法保存
• 在扩展时并不总是可以启用此功能

提示

尽管如此，这确实是一个很棒的功能，因为在临时断开连接后（例如，当用户从 WiFi 切换到 4G 时），你不必同步客户端的状态。

我们将在下一步探索一个更通用的解决方案。

信息

CommonJS

你可以在浏览器中直接运行此示例：

• CodeSandbox
• StackBlitz

ES modules

你可以在浏览器中直接运行此示例：

• CodeSandbox
• StackBlitz