JavaScript Academy · Lektion

Eine WebSocket-Verbindung öffnen

Verbinden Sie sich mit einem WebSocket-Server.

Eine WebSocket-Verbindung öffnen ist eine kostenlose JavaScript 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind WebSockets?

WebSockets stellen über eine einzige TCP-Verbindung eine dauerhafte Vollduplex-Verbindung zwischen Browser und Server bereit. Anders als bei der HTTP-Anfrage-Antwort-Kommunikation kann jede Seite jederzeit Nachrichten senden – ideal für Chats, Live-Feeds und Spiele.

Die Schemata ws und wss

WebSocket-URLs verwenden ws:// (unverschlüsselt) oder wss:// (TLS-verschlüsselt). Bevorzugen Sie in der Produktion immer wss://, genau wie https.

const url = "wss://example.com/socket";

Eine Verbindung erstellen

Erstellen Sie einen Socket mit new WebSocket(url). Der Handshake beginnt sofort. Die Verbindung ist erst bereit, wenn sie geöffnet wurde.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

Das onopen-Ereignis

onopen wird ausgelöst, sobald der Handshake abgeschlossen ist. Erst dann können Sie sicher Daten senden.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

Alternative mit addEventListener

Sie können anstelle der on*-Eigenschaften auch addEventListener verwenden, um mehrere Handler zu registrieren.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

Der Verbindungsstatus mit readyState

readyState gibt den Lebenszyklus an: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

Subprotokolle

Über ein zweites Argument wird ein Subprotokoll ausgehandelt. Der Server wählt eines aus, und nach dem Öffnen können Sie socket.protocol auslesen.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

Same-Origin und Mixed Content

Eine über https geladene Seite darf nur wss://-Verbindungen öffnen. Das Öffnen von ws:// wird als Mixed Content blockiert. Planen Sie Ihre URLs entsprechend.

Binärtyp

Setzen Sie binaryType auf "blob" (Standard) oder "arraybuffer", um festzulegen, wie binäre Frames empfangen werden.

socket.binaryType = "arraybuffer";

Ein minimaler Client

Alles zusammenführen: Öffnen Sie die Verbindung, protokollieren Sie den Status und bereinigen Sie anschließend die Ressourcen.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

Zeitüberschreitungen beim Verbindungsaufbau

WebSockets verfügen über keine integrierte Zeitüberschreitung für den Verbindungsaufbau. Verwenden Sie einen Timer, der den Socket schließt, wenn onopen nicht rechtzeitig ausgelöst wurde.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

Kurztest

Testen Sie die Grundlagen von Verbindungen.

Rückblick: Eine Verbindung öffnen

Sie haben die Schemata ws/wss kennengelernt, einen Socket mit new WebSocket erstellt, onopen verarbeitet, readyState geprüft, Subprotokolle ausgehandelt und eine Zeitüberschreitung für den Verbindungsaufbau hinzugefügt. Als Nächstes: Nachrichten senden und empfangen.

Häufig gestellte Fragen

Ist die Lektion „Eine WebSocket-Verbindung öffnen“ kostenlos?

Ja — der vollständige Text von „Eine WebSocket-Verbindung öffnen“ 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 „Eine WebSocket-Verbindung öffnen“?

Verbinden Sie sich mit einem WebSocket-Server. 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 1 von 4.

Wie lange dauert die Lektion „Eine WebSocket-Verbindung öffnen“?

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