Was sind WebSockets?

Websockets (Websockets) sind ein Protokoll für bidirektionale Kommunikation über eine einzelne TCP-Verbindung, das den Echtzeit-Austausch von Daten zwischen Browser und Server ermöglicht.

Wesentliche Unterschiede zu herkömmlichen HTTP-Anfragen:

• Bidirektionale Kommunikation: Der Server kann Daten an den Client senden, ohne dass eine vorherige Anfrage des Clients erforderlich ist.
• Eine Verbindung: Es wird eine langlebige Verbindung hergestellt, wodurch die Kosten für das Einrichten einer neuen Verbindung für jeden Datenaustausch entfallen (wie bei HTTP).
• Verzögerungsreduzierung: Weniger Zeit wird für das Verbindungsaufbau, das Austauschen von Headern und die Verarbeitung kurzer Anfragen/Antworten aufgewendet.

Funktionsprinzip:

1. Handshake: Der Browser sendet eine spezielle HTTP-Anfrage an den Server (mit den Headern Upgrade: websocket und Connection: Upgrade).
2. Verbindungserstellung: Wenn der Server Websockets unterstützt, antwortet er mit dem Code 101 Switching Protocols, woraufhin die Verbindung auf das Websocket-Protokoll umgestellt wird.
3. Datenübertragung: Nach dem Verbindungsaufbau können beide Seiten jederzeit frei Nachrichten austauschen.

Anwendungsbeispiele:

• Online-Spiele
• Chats und Messenger
• Echtzeit-Datenaktualisierungen (Kurse, Nachrichten)
• Kollaborative Werkzeuge

Vorteile:

• Geringe Latenz
• Effiziente Ressourcennutzung (weniger Overhead)
• Bidirektionale Kommunikation in Echtzeit

Nachteile:

• Erfordert Unterstützung sowohl auf Client- (Browser) als auch auf Serverseite.
• Komplexere Implementierung im Vergleich zu einfachen HTTP-Anfragen.

Beispiel für Client-Code in JavaScript:

// Websocket erstellen
const socket = new WebSocket('wss://example.com/websocket');

// Verbindungsöffnung-Handler
socket.onopen = function(event) {
  console.log('Verbindung hergestellt');
  socket.send('Hallo, Server!'); // Nachricht an den Server senden
};

// Nachrichtenempfang-Handler
socket.onmessage = function(event) {
  console.log('Nachricht vom Server empfangen: ' + event.data);
};

// Verbindungsabschluss-Handler
socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`Verbindung sauber geschlossen, Code=${event.code} Grund=${event.reason}`);
  } else {
    console.log('Verbindung unterbrochen'); // z.B. wegen Netzwerkfehler
  }
};

// Fehler-Handler
socket.onerror = function(error) {
  console.error(`Websocket-Fehler: ${error}`);
};

// Verbindung schließen (falls notwendig)
// socket.close();