WebSocket-Grundlagen im Browser
Öffnen Sie WebSocket-Verbindungen, senden Sie Nachrichten und verarbeiten Sie Events mit der nativen WebSocket-API.
WebSocket-Grundlagen im Browser ist eine kostenlose React 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist WebSocket?
WebSocket ist ein Protokoll, das Vollduplex-Kommunikation über eine einzelne TCP-Verbindung ermöglicht. Anders als bei HTTP bleibt die Verbindung geöffnet, sodass der Server jederzeit Daten an den Client senden kann.
Eine Verbindung öffnen
Erstellen Sie mit einer ws://- oder wss://-URL ein WebSocket-Objekt. Die Verbindung wird asynchron geöffnet.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Nachrichten senden
Verwenden Sie ws.send(), um Daten zu senden. Sie können Zeichenfolgen oder Binärdaten (ArrayBuffer, Blob) senden. Kodieren Sie Objekte vor dem Senden als JSON.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Nachrichten empfangen
Das Ereignis onmessage wird ausgelöst, sobald der Server Daten sendet. Die Daten befinden sich als Zeichenfolge oder Binärtyp in event.data.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Fehler behandeln und Verbindung schließen
Behandeln Sie die Ereignisse onerror und onclose. Das Close-Ereignis enthält einen Code und einen Grund, die erklären, warum die Verbindung beendet wurde.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Close-Codes
Standardmäßige WebSocket-Close-Codes: 1000 = normal, 1001 = wird beendet, 1006 = abnormal (kein Close-Frame), 1008 = Richtlinienverstoß.
readyState
ws.readyState gibt den aktuellen Verbindungsstatus an: CONNECTING (0), OPEN (1), CLOSING (2) oder CLOSED (3). Prüfen Sie den Status immer vor dem Senden.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Die Verbindung schließen
Rufen Sie ws.close(code, reason) auf, um ein ordnungsgemäßes Schließen einzuleiten. Der Server empfängt den Close-Frame und kann mit einem eigenen antworten.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Binärdaten
Setzen Sie ws.binaryType = 'arraybuffer' (oder 'blob'), um Binärnachrichten zu empfangen. Das ist nützlich für Audio, Bilder oder benutzerdefinierte Protokolle.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Heartbeat / Ping-Pong
Die WebSocket-API des Browsers stellt keine Ping-Frames bereit. Sie können jedoch einen Heartbeat auf Anwendungsebene implementieren: Senden Sie alle N Sekunden eine Ping-Nachricht und erwarten Sie eine Pong-Antwort.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket im Vergleich zu Server-Sent Events
Verwenden Sie WebSocket für bidirektionale Kommunikation (Chat, Spiele). Verwenden Sie Server-Sent Events (SSE) für Streams ausschließlich vom Server zum Client (Benachrichtigungen, Live-Feeds) – SSE funktioniert über einfaches HTTP und stellt die Verbindung automatisch wieder her.
Kurztest
Welcher Wert von WebSocket readyState zeigt an, dass die Verbindung geöffnet und zum Senden bereit ist?
Zusammenfassung
Erstellen Sie Verbindungen mit new WebSocket(url), senden Sie JSON-serialisierte Objekte über ws.send() und behandeln Sie die Ereignisse onmessage, onerror und onclose. Prüfen Sie readyState vor dem Senden und schließen Sie die Verbindung mit ws.close(1000) ordnungsgemäß.
Häufig gestellte Fragen
Ist die Lektion „WebSocket-Grundlagen im Browser“ kostenlos?
Ja — der vollständige Text von „WebSocket-Grundlagen im Browser“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „WebSocket-Grundlagen im Browser“?
Öffnen Sie WebSocket-Verbindungen, senden Sie Nachrichten und verarbeiten Sie Events mit der nativen WebSocket-API. Du übst React 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 React Academy zu starten?
Keine Vorkenntnisse erforderlich. React 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-Grundlagen im Browser“?
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 React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React 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-Grundlagen im Browser
- Socket.IO mit React verwenden
- Eine Echtzeit-Chat-Component erstellen
- Wiederverbindung, Fehlerbehandlung und Cleanup