Automatische Wiederverbindung beim Client
Erstellen Sie einen robusten Browser-WebSocket-Client, der Verbindungsabbrüche erkennt und sich mit exponentiellem Backoff und Nachrichtenwarteschlangen automatisch wieder verbindet.
Automatische Wiederverbindung beim Client ist eine kostenlose WebSockets & Realtime Systems Programming-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 WebSockets & Realtime Systems Programming-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der WebSockets & Realtime Systems Programming-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Connections Drop
Networks are unreliable. Wi-Fi hiccups, tabs sleep, and servers restart. A good client detects a closed socket and reconnects without the user noticing.
Detecting a Drop
The browser fires close when the connection ends and error on failures. Reconnection logic hooks into close.
ws.addEventListener('close', () => {
scheduleReconnect();
});Naive Reconnect Is Risky
Reconnecting instantly in a tight loop can hammer a struggling server. Instead, wait longer after each failed attempt.
Exponential Backoff
Double the delay each attempt, up to a cap, so a recovering server is not overwhelmed.
let attempt = 0;
function delay() {
return Math.min(1000 * 2 ** attempt, 30000);
}Adding Jitter
If many clients reconnect at once, they create a thundering herd. Random jitter spreads them out.
function delayWithJitter() {
return delay() * (0.5 + Math.random() * 0.5);
}The Reconnect Function
Wrap connection creation so each attempt re-binds handlers and schedules the next retry on failure.
function connect() {
ws = new WebSocket(url);
ws.addEventListener('open', onOpen);
ws.addEventListener('close', scheduleReconnect);
}Resetting on Success
When a connection opens successfully, reset the attempt counter so future drops start backoff fresh.
function onOpen() {
attempt = 0;
flushQueue();
}Queuing Messages While Down
If the user sends while disconnected, buffer the message and send it once reconnected.
const queue = [];
function send(data) {
if (ws.readyState === WebSocket.OPEN) ws.send(data);
else queue.push(data);
}Flushing the Queue
On reconnect, drain the buffer in order.
function flushQueue() {
while (queue.length) ws.send(queue.shift());
}Giving Up Gracefully
After a max number of attempts, surface an error to the user rather than retrying forever.
function scheduleReconnect() {
if (++attempt > 10) return showOffline();
setTimeout(connect, delayWithJitter());
}Best Practices
Build resilient clients:
- Use exponential backoff with jitter
- Reset state on a successful open
- Queue outgoing messages while offline
- Cap retries and inform the user
Quick Check
Test your reconnection knowledge.
Recap
You built an auto-reconnecting client:
- Hook the
closeevent to schedule retries - Use exponential backoff with jitter
- Reset attempts on open
- Queue and flush messages around outages
Your client now survives flaky networks.
Lerne WebSockets & Realtime Systems Programming mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 12
- Lektionen
- 47
Häufig gestellte Fragen
Ist die Lektion „Automatische Wiederverbindung beim Client“ kostenlos?
Ja — der vollständige Text von „Automatische Wiederverbindung beim Client“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des WebSockets & Realtime Systems Programming-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der WebSockets & Realtime Systems Programming-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Automatische Wiederverbindung beim Client“?
Erstellen Sie einen robusten Browser-WebSocket-Client, der Verbindungsabbrüche erkennt und sich mit exponentiellem Backoff und Nachrichtenwarteschlangen automatisch wieder verbindet. Du übst WebSockets & Realtime Systems Programming 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 WebSockets & Realtime Systems Programming zu starten?
Keine Vorkenntnisse erforderlich. WebSockets & Realtime Systems Programming 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 „Automatische Wiederverbindung beim Client“?
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 WebSockets & Realtime Systems Programming-Lektion Code schreiben und ausführen?
Ja. Jede WebSockets & Realtime Systems Programming-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
- Grundlagen der WebSocket-API im Browser
- Daten senden und empfangen
- Clientseitige Ereignisverarbeitung
- Automatische Wiederverbindung beim Client