Recuperación del estado de conexión

Primero, manejemos las desconexiones pretendiendo que no hubo desconexión: esta característica se llama "Recuperación del estado de conexión".

Esta característica almacenará temporalmente todos los eventos que son enviados por el servidor e intentará restaurar el estado de un cliente cuando se reconecte:

• restaurar sus salas
• enviar cualquier evento perdido

Debe habilitarse en el lado del servidor:

index.js

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

Veámoslo en acción:

Como puedes ver en el video anterior, el mensaje "realtime" eventualmente se entrega cuando la conexión se restablece.

nota

El botón "Disconnect" fue añadido para propósitos de demostración.

Código

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>

¡Genial! Ahora, puedes preguntar:

Pero esta es una característica increíble, ¿por qué no está habilitada por defecto?

Hay varias razones para esto:

• no siempre funciona, por ejemplo si el servidor falla abruptamente o se reinicia, entonces el estado del cliente podría no guardarse
• no siempre es posible habilitar esta característica al escalar

consejo

Dicho esto, es de hecho una gran característica ya que no tienes que sincronizar el estado del cliente después de una desconexión temporal (por ejemplo, cuando el usuario cambia de WiFi a 4G).

Exploraremos una solución más general en el próximo paso.

información

CommonJS

Puedes ejecutar este ejemplo directamente en tu navegador en:

• CodeSandbox
• StackBlitz

ES modules

Puedes ejecutar este ejemplo directamente en tu navegador en:

• CodeSandbox
• StackBlitz