JavaScript Academy · Lektion

Verbindungslebenszyklus und Fehler

Behandeln Sie open-, close- und error-Ereignisse.

Verbindungslebenszyklus und Fehler ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Der vollständige Lebenszyklus

Ein Socket durchläuft die Zustände CONNECTING → OPEN → CLOSING → CLOSED. Vier Ereignisse entsprechen diesen Übergängen: open, message, error und close.

Das onclose-Ereignis

onclose wird ausgelöst, wenn die Verbindung endet, unabhängig davon, ob sie ordnungsgemäß beendet wurde. Das Ereignis enthält code, reason und wasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

Schließungscodes

Zu den Standardcodes gehören 1000 (normal), 1001 (Verbindung wird beendet), 1006 (anormal, ohne Close-Frame) und 1011 (Serverfehler). Die Codes 4000–4999 werden von der Anwendung definiert.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

Gezielt schließen

socket.close(code, reason) leitet ein ordnungsgemäßes Beenden ein. Verwenden Sie 1000 für eine normale Schließung. Die Begründungszeichenfolge muss weniger als 123 Bytes umfassen.

socket.close(1000, "user logged out");

Das onerror-Ereignis

onerror wird bei Fehlern ausgelöst. Aus Sicherheitsgründen enthält das Fehlerereignis absichtlich nur wenige Informationen und keine ausführliche Begründung. Fast immer folgt ein close-Ereignis.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

Ordnungsgemäße und anormale Schließung unterscheiden

event.wasClean ist nur dann true, wenn beide Seiten Close-Frames ausgetauscht haben. Bei einem Abbruch der Netzwerkverbindung erhalten Sie wasClean: false und den Code 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

Ressourcen bereinigen

Löschen Sie beim Schließen Timer (für Heartbeats), weisen Sie ausstehende Anfragen zurück und aktualisieren Sie den UI-Status, damit die App die Trennung widerspiegelt.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

Listener entfernen

Wenn Sie Handler mit addEventListener registriert haben, entfernen Sie sie beim Schließen, um Speicherlecks zu vermeiden, insbesondere beim Erstellen neuer Sockets.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

readyState beim Herunterfahren

Zwischen dem Aufruf von close() und dem onclose-Ereignis ist readyState gleich CLOSING (2). Senden in diesem Zeitraum wird ignoriert.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

Inaktivitäts-Timeouts von Servern

Server und Proxys schließen inaktive Verbindungen häufig nach 30–60 Sekunden. Heartbeats halten die Verbindung aktiv und ermöglichen es Ihnen, Abbrüche schnell zu erkennen.

Eine nicht mehr aktive Verbindung erkennen

Kombinieren Sie Heartbeats mit einem Watchdog: Wenn innerhalb eines bestimmten Zeitfensters kein Pong eintrifft, behandeln Sie den Socket als nicht mehr aktiv und schließen Sie ihn, um eine erneute Verbindung auszulösen.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

Kurztest

Testen Sie die Verarbeitung des Verbindungslebenszyklus.

Rückblick: Lebenszyklus und Fehler

Sie haben onclose mit code/reason/wasClean verarbeitet, Standard-Schließungscodes kennengelernt, Verbindungen gezielt geschlossen, das informationsarme onerror behandelt, Timer und Listener bereinigt und einen Heartbeat-Watchdog erstellt. Als Nächstes: Strategien für die erneute Verbindung.

Häufig gestellte Fragen

Ist die Lektion „Verbindungslebenszyklus und Fehler“ kostenlos?

Ja — der vollständige Text von „Verbindungslebenszyklus und Fehler“ 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 „Verbindungslebenszyklus und Fehler“?

Behandeln Sie open-, close- und error-Ereignisse. 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 3 von 4.

Wie lange dauert die Lektion „Verbindungslebenszyklus und Fehler“?

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