Frontend Academy · Lektion

WebSocket API: open, message, close und error

Erstellen Sie eine WebSocket-Verbindung, senden und empfangen Sie Nachrichten im message-Ereignishandler und behandeln Sie Verbindungsfehler sowie ein sauberes Schließen.

WebSocket API: open, message, close und error ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum WebSockets?

HTTP basiert auf Anfrage und Antwort. Für Echtzeitanwendungen wie Chats, Mehrspieler-Spiele und Live-Aktualisierungen benötigen Sie eine dauerhafte bidirektionale Kommunikation. WebSockets stellen eine einzelne TCP-Verbindung her, die offen bleibt und über die beide Seiten jederzeit Nachrichten senden können.

WebSocket erstellen

Erstellen Sie einen WebSocket mit einer ws://- oder wss://-URL. Der Browser übernimmt den Upgrade-Handshake.

const ws = new WebSocket('wss://api.example.com/realtime');

// Always use wss:// (secure) in production

Die vier Ereignisse

WebSocket hat vier Ereignistypen: open (verbunden), message (Daten empfangen), close (Verbindung beendet), error (Problem).

ws.addEventListener('open', () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});

ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
});

ws.addEventListener('close', (event) => {
  console.log('Closed:', event.code, event.reason);
});

ws.addEventListener('error', (event) => {
  console.error('Error:', event);
});

Nachrichten senden

Verwenden Sie ws.send(). Die Methode akzeptiert Strings, ArrayBuffers, Blobs oder ArrayBufferView. Für strukturierte Daten rufen Sie zuerst JSON.stringify auf.

ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));

// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);

Nachrichten empfangen

Untersuchen Sie event.data – der Typ entspricht dem, was der Server gesendet hat. Verwenden Sie JSON.parse für Objekt-Payloads.

ws.addEventListener('message', (event) => {
  // typeof event.data: string | ArrayBuffer | Blob
  if (typeof event.data === 'string') {
    const msg = JSON.parse(event.data);
    handleMessage(msg);
  }
});

Verbindungsstatus (readyState)

Prüfen Sie ws.readyState: CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3. Senden Sie nicht, bevor OPEN erreicht ist.

if (ws.readyState === WebSocket.OPEN) {
  ws.send(message);
} else {
  console.warn('Not connected yet');
}

Sauber schließen

Rufen Sie ws.close(code, reason) auf. Standardmäßige Schließungscodes: 1000 (normal), 1001 (wird beendet), 1008 (Verletzung der Richtlinien), 1011 (Serverfehler).

ws.close(1000, 'User logged out');

Strategie zur Wiederverbindung

WebSockets werden bei Netzwerkänderungen, Serverneustarts usw. getrennt. Implementieren Sie eine Wiederverbindung mit exponentiellem Backoff.

let reconnectDelay = 1000;

function connect() {
  const ws = new WebSocket('wss://api/realtime');
  ws.addEventListener('open', () => { reconnectDelay = 1000; });
  ws.addEventListener('close', () => {
    setTimeout(connect, reconnectDelay);
    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
  });
  return ws;
}

Heartbeats / Keepalive

Inaktive WebSockets werden von Proxys und Load-Balancern nach etwa 60 Sekunden beendet. Senden Sie alle 25–30 Sekunden einen Ping, damit die Verbindung aktiv bleibt.

let pingInterval;
ws.addEventListener('open', () => {
  pingInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));

Authentifizierung

WebSockets unterstützen keine benutzerdefinierten Header. Möglichkeiten: 1) Authentifizierung über ein Token im Query-String (?token=jwt) der WS-URL. 2) Nach open eine Authentifizierungsnachricht senden. 3) Ein Cookie verwenden (bei gleicher Origin automatisch).

// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);

// Auth message:
ws.addEventListener('open', () => {
  ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});

React-Hook für WebSockets

Kapseln Sie den Lebenszyklus des WS in einem benutzerdefinierten Hook, damit keine Verbindungen offen bleiben.

function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;
    ws.addEventListener('message', (e) => {
      setMessages(m => [...m, JSON.parse(e.data)]);
    });
    return () => ws.close();
  }, [url]);

  return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}

WebSocket vs. HTTP/2 vs. SSE

WebSocket: Vollduplex, beide Seiten können senden. HTTP/2 Server Push: veraltet. Server-Sent Events: nur vom Server zum Client, einfacher, automatische Wiederverbindung. Wählen Sie WS, wenn der Client ebenfalls senden muss (z. B. bei einem Chat); SSE für einseitige Benachrichtigungen.

Kurze Wissensprüfung

Welcher WebSocket-Schließungscode ist der Standard für ein normales, absichtliches Schließen, z. B. wenn sich ein Benutzer abmeldet?

Zusammenfassung: WebSocket-API

new WebSocket('wss://...') öffnet die Verbindung. Vier Ereignisse: open, message, close, error. send() akzeptiert String/ArrayBuffer/Blob; für Objekte verwenden Sie JSON.stringify. Prüfen Sie readyState vor dem Senden. close(1000) für ein sauberes Schließen. Stellen Sie die Verbindung mit exponentiellem Backoff wieder her. Ein Heartbeat alle 25 Sekunden hält sie aktiv. Authentifizierung über den Query-String oder eine Authentifizierungsnachricht. Kapseln Sie den Lebenszyklus in einem React-Hook.

Häufig gestellte Fragen

Ist die Lektion „WebSocket API: open, message, close und error“ kostenlos?

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

Was lerne ich in „WebSocket API: open, message, close und error“?

Erstellen Sie eine WebSocket-Verbindung, senden und empfangen Sie Nachrichten im message-Ereignishandler und behandeln Sie Verbindungsfehler sowie ein sauberes Schließen. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 1 von 4.

Wie lange dauert die Lektion „WebSocket API: open, message, close und error“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

WebSocket API: open, message, close und error
Socket.io-Client-Integration
Server-Sent Events für unidirektionales Streaming
Muster für Echtzeit-UIs

← Zurück zu Frontend Academy