Bağlantı durumu geri yükleme

Öncelikle, bağlantı kesintilerini, bağlantının kesilmediğini varsayarak halledelim: bu özellik "Bağlantı durumu geri yükleme" olarak adlandırılır.

Bu özellik, sunucu tarafından gönderilen tüm olayları geçici olarak saklayacak ve bir istemci yeniden bağlandığında durumunu geri yüklemeye çalışacaktır:

odalarını geri yüklemek
kaçırılan olayları göndermek

Sunucu tarafında etkinleştirilmelidir:

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

Bunu uygulamada görelim:

Yukarıdaki videoda gösterildiği gibi, "gerçek zamanlı" mesaj, bağlantı yeniden kurulduğunda eninde sonunda iletilir.

not

"Bağlantıyı Kes" butonu gösterim amacıyla eklenmiştir.

Kod

<form id="form" action="">
  <input id="input" autocomplete="off" /><button>Gönder</button>
  <button id="toggle-btn">Bağlantıyı Kes</button>
</form>

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

  toggleButton.addEventListener('click', (e) => {
    e.preventDefault();
    if (socket.connected) {
      toggleButton.innerText = 'Bağlan';
      socket.disconnect();
    } else {
      toggleButton.innerText = 'Bağlantıyı Kes';
      socket.connect();
    }
  });
</script>

<form id="form" action="">
  <input id="input" autocomplete="off" /><button>Gönder</button>
  <button id="toggle-btn">Bağlantıyı Kes</button>
</form>

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

  toggleButton.addEventListener('click', function(e) {
    e.preventDefault();
    if (socket.connected) {
      toggleButton.innerText = 'Bağlan';
      socket.disconnect();
    } else {
      toggleButton.innerText = 'Bağlantıyı Kes';
      socket.connect();
    }
  });
</script>

:::

Harika! Şimdi, sorabilirsiniz:

Ama bu harika bir özellik, neden varsayılan olarak etkin değil?

Bunun birkaç nedeni var:

her zaman çalışmıyor, örneğin sunucu aniden çökederse veya yeniden başlatılırsa, istemci durumu kaydedilmeyebilir
bu özelliği etkinleştirmek, büyütme işlemleri sırasında her zaman mümkün olmayabilir

ipucu

Yine de, bu gerçekten harika bir özellik çünkü geçici bir bağlantı kesilmesinden sonra istemcinin durumunu senkronize etmenize gerek kalmıyor (örneğin, kullanıcı WiFi'den 4G'ye geçerse).

Bir sonraki adımda daha genel bir çözümü keşfedeceğiz.

bilgi

Bu örneği doğrudan tarayıcınızda çalıştırabilirsiniz: