JavaScript Academy · Lektion

Strategien zur Wiederverbindung

Stellen Sie Verbindungen nach Abbrüchen zuverlässig wieder her.

Strategien zur Wiederverbindung ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum erneut verbinden?

Netzwerke sind unzuverlässig – WLAN-Verbindungen brechen ab, Laptops wechseln in den Ruhezustand und Server werden neu gestartet. Ein robuster WebSocket-Client erkennt die Schließung und stellt die Verbindung automatisch wieder her, damit die Benutzererfahrung nahtlos bleibt.

Naives erneutes Verbinden

Der einfachste Ansatz öffnet die Verbindung sofort nach dem Schließen erneut. Die Gefahr: Wenn der Server ausgefallen ist, wird er in einer engen Schleife ständig mit Anfragen bombardiert.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

Konstante Verzögerung

Eine konstante Verzögerung ist schonender, sendet aber weiterhin regelmäßig Verbindungsversuche und kann viele Clients synchronisieren (den Thundering-Herd-Effekt).

socket.onclose = () => {
  setTimeout(connect, 3000);
};

Exponentielles Backoff

Verdoppeln Sie die Wartezeit nach jedem fehlgeschlagenen Versuch: 1 s, 2 s, 4 s, 8 s … Begrenzen Sie sie auf einen Höchstwert. Dadurch verteilen sich die Wiederholungsversuche und ein überlasteter Server wird entlastet.

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

Jitter hinzufügen

Variieren Sie die Verzögerung geringfügig zufällig, damit sich nicht Tausende Clients im selben Moment erneut verbinden. Full Jitter wählt einen zufälligen Wert zwischen 0 und dem berechneten Höchstwert.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

Bei Erfolg zurücksetzen

Setzen Sie den Zähler der Versuche zurück, wenn onopen ausgelöst wird, damit das Backoff beim nächsten Verbindungsabbruch von vorn beginnt.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

Ein vollständiger Client für erneute Verbindungen

Führen Sie die Bausteine zusammen: Verbinden Sie sich, setzen Sie den Zähler beim Öffnen zurück und verwenden Sie beim Schließen Backoff.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

Online- und Offline-Status berücksichtigen

Hören Sie auf die Online-/Offline-Ereignisse des Browsers. Pausieren Sie die erneute Verbindung im Offline-Modus und starten Sie sofort einen Versuch, sobald die Verbindung wiederhergestellt ist.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

Versuche begrenzen

Begrenzen Sie optional die Anzahl der Wiederholungsversuche und zeigen Sie dem Benutzer einen dauerhaften Fehler an, anstatt unbegrenzt weiterzuversuchen.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

Zustand nach der erneuten Verbindung synchronisieren

Eine neue Verbindung verfügt über keinen serverseitigen Kontext. Melden Sie sich beim erneuten Öffnen wieder für die Kanäle an und fordern Sie alle Nachrichten an, die während der Trennung verpasst wurden.

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

Doppelte Sockets vermeiden

Verhindern Sie, dass mehrere Sockets geöffnet werden, wenn die Logik für die erneute Verbindung zweimal ausgelöst wird. Verfolgen Sie den aktuellen Socket und ignorieren Sie veraltete Handler.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

Kurztest

Testen Sie das Design für erneute Verbindungen.

Rückblick: Erneute Verbindung

Sie sind von einer naiven erneuten Verbindung zu exponentiellem Backoff mit Jitter übergegangen, setzen Versuche bei Erfolg zurück, berücksichtigen Online-/Offline-Ereignisse, begrenzen Wiederholungsversuche, synchronisieren den Zustand nach einer erneuten Verbindung und vermeiden doppelte Sockets. Ihr Client ist jetzt robust.

Häufig gestellte Fragen

Ist die Lektion „Strategien zur Wiederverbindung“ kostenlos?

Ja — der vollständige Text von „Strategien zur Wiederverbindung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Strategien zur Wiederverbindung“?

Stellen Sie Verbindungen nach Abbrüchen zuverlässig wieder her. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Strategien zur Wiederverbindung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy