Vue Academy · Lektion

WebSocket-Grundlagen im Browser

new WebSocket(url), onopen/onmessage/onerror/onclose, send() und readyState

WebSocket-Grundlagen im Browser ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Echtzeit im Browser

HTTP folgt dem Anfrage-Antwort-Prinzip: Der Client stellt eine Anfrage, der Server antwortet und die Verbindung wird geschlossen. Für Chats, Live-Dashboards oder Multiplayer-Spiele muss der Server Daten pushen, ohne dass er dazu aufgefordert wird.

Das WebSocket-Protokoll stellt eine einzige, langlebige Verbindung in beide Richtungen zwischen Browser und Server bereit.

Verbindung öffnen

Der Browser stellt einen globalen Konstruktor WebSocket bereit. Übergeben Sie eine URL mit dem Schema ws:// (unverschlüsselt) oder wss:// (TLS).

Beim Erstellen des Objekts beginnt der Verbindungs-Handshake sofort.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

Der onopen-Handler

Die Verbindung ist nicht sofort bereit, wenn Sie sie erstellen. Das onopen-Ereignis wird ausgelöst, sobald der Handshake abgeschlossen und der Socket bereit ist, Daten zu übertragen.

Senden Sie Ihre erste Nachricht innerhalb von onopen, niemals vorher.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Nachrichten empfangen

Eingehende Daten treffen über onmessage ein. Die Nutzlast befindet sich in event.data und ist standardmäßig ein String.

Die meisten Apps senden JSON, daher parsen Sie es wieder in ein Objekt.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Nachrichten senden

Verwenden Sie ws.send() zum Übertragen. WebSockets übertragen rohe Strings oder Binärdaten; kodieren Sie Objekte daher zuerst mit JSON.stringify.

Beide Seiten einigen sich auf eine Struktur — hier aus type und payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Ein vollständiger Roundtrip

Wenn Sie Öffnen, Senden und Empfangen kombinieren, erhalten Sie einen vollständigen Echo-Client. Öffnen Sie den Socket, senden Sie nach dem Öffnen und protokollieren Sie alles, was zurückkommt.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Verbindung schließen

Das onclose-Ereignis wird ausgelöst, wenn die Verbindung endet — unabhängig davon, ob Sie ws.close() aufgerufen haben oder das Netzwerk ausgefallen ist. Das Ereignis enthält einen numerischen code und einen reason-String.

Der Code 1000 steht für ein normales Schließen.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Fehler behandeln

Das onerror-Ereignis wird bei Fehlern beim Transport ausgelöst. Das Fehlerereignis selbst enthält aus Sicherheitsgründen absichtlich nur wenige Details. Betrachten Sie es als Signal dafür, dass etwas schiefgelaufen ist und die Verbindung wahrscheinlich gleich geschlossen wird.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

Die readyState-Eigenschaft

ws.readyState ist eine Zahl, die angibt, an welcher Stelle im Lebenszyklus sich der Socket befindet. Überprüfen Sie den Wert immer vor dem Senden, damit Sie bei einem noch nicht geöffneten Socket keinen Fehler auslösen.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Benannte readyState-Konstanten

Verwenden Sie statt magischer Zahlen die Konstanten der Klasse WebSocket. Sie sind deutlich verständlicher als 0, 1 oder 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

In Vue zusammenführen

In einer Vue-Komponente erstellen Sie den Socket normalerweise in onMounted und bauen ihn in onUnmounted wieder ab. Die Handler aktualisieren reaktive Refs, die Ihr Template rendert.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Schnelltest

Prüfen Sie Ihr Verständnis der WebSocket-readyState-Werte.

Zusammenfassung

In dieser Lektion haben Sie gelernt:

new WebSocket(url) startet eine bidirektionale Verbindung mit ws:// oder wss://.
onopen wird ausgelöst, wenn der Socket bereit ist; senden Sie erst danach.
onmessage stellt Daten über event.data bereit — parsen Sie JSON, um ein Objekt zu erhalten.
ws.send(JSON.stringify(msg)) überträgt Daten.
onclose und onerror behandeln das Beenden und Fehler.
readyState ist 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED.

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 Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „WebSocket-Grundlagen im Browser“?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() und readyState Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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-Client mit Vue
Eine Echtzeit-Chatkomponente erstellen
useWebSocket-Composable mit Wiederverbindung

← Zurück zu Vue Academy