HTML - WebSockets: Ein Anfängerguide

Hallo da draußen, zukünftige Web-Entwickler! Heute tauchen wir in die aufregende Welt der WebSockets ein. Keine Sorge, wenn du noch nie von ihnen gehört hast – bis zum Ende dieses Tutorials wirst du ein WebSocket-Zauberer sein! Also hol dir dein liebstes Getränk, setze dich bequem hin und lasst uns unsere Reise beginnen.

Was sind WebSockets?

Bevor wir ins Detail gehen, lassen wir uns erstmal anschauen, was WebSockets sind und warum sie so cool sind. Stell dir vor, du hast ein Gespräch mit einem Freund. Bei einem normalen Telefonanruf musst du wählen, warten, bis er abhebt, deine Botschaft übermitteln und dann auflegen. Wenn du wieder sprechen möchtest, wiederholst du den ganzen Prozess. Klingt mühsam, oder?

Genau so funktioniert die traditionelle Web-Kommunikation. Dein Browser sendet eine Anfrage, wartet auf eine Antwort und schließt dann die Verbindung. WebSockets hingegen sind wie eine offene Telefonleitung, bei der du und dein Freund jederzeit sprechen könnt, ohne ständig neu zu wählen und aufzulegen. Cool, oder?

Syntax

Nun schauen wir uns an, wie wir WebSockets in unserem HTML actually verwenden. Die Syntax ist erstaunlich einfach:

<script>
var socket = new WebSocket('ws://example.com/socket');
</script>

Hier erstellen wir ein neues WebSocket-Objekt und verbinden es mit einem Server unter 'ws://example.com/socket'. Der 'ws://' Teil ist wie 'http://' aber speziell für WebSockets. Es gibt auch eine sichere Version, 'wss://', genau wie 'https://'.

WebSocket-Attribute

WebSockets haben einige praktische Attribute, die uns über den aktuellen Zustand unserer Verbindung informieren. Sehen wir uns diese in einer Tabelle an:

Attribut	Beschreibung
readyState	Der aktuelle Zustand der Verbindung
bufferedAmount	Die Anzahl der Bytes, die mit der send()-Methode in der Warteschlange stehen
extensions	Die vom Server ausgewählten Erweiterungen
protocol	Der Name des vom Server ausgewählten Subprotokolls

Das readyState-Attribut ist besonders nützlich. Es kann vier Werte annehmen:

1. 0 (CONNECTING): Die Verbindung ist noch nicht offen.
2. 1 (OPEN): Die Verbindung ist offen und bereit zur Kommunikation.
3. 2 (CLOSING): Die Verbindung wird geschlossen.
4. 3 (CLOSED): Die Verbindung ist geschlossen oder konnte nicht geöffnet werden.

WebSocket-Ereignisse

WebSockets sind nicht nur zum Senden von Daten da – sie können auch auf verschiedene Ereignisse reagieren. Es ist wie das Aufstellen von Partystreifen, die knallen, wenn etwas Bestimmtes passiert! Hier sind die wichtigsten Ereignisse:

1. onopen: Wird ausgelöst, wenn die Verbindung hergestellt ist.
2. onmessage: Wird ausgelöst, wenn Daten vom Server empfangen werden.
3. onerror: Wird ausgelöst, wenn ein Fehler auftritt.
4. onclose: Wird ausgelöst, wenn die Verbindung geschlossen wird.

Sehen wir uns an, wie wir diese im Code verwenden:

<script>
var socket = new WebSocket('ws://example.com/socket');

socket.onopen = function(event) {
console.log('Verbindung hergestellt!');
};

socket.onmessage = function(event) {
console.log('Nachricht vom Server:', event.data);
};

socket.onerror = function(error) {
console.log('WebSocket-Fehler:', error);
};

socket.onclose = function(event) {
console.log('Verbindung geschlossen.');
};
</script>

In diesem Beispiel richten wir Funktionen ein, um jedes dieser Ereignisse zu behandeln. Wenn die Verbindung geöffnet wird, protokollieren wir eine Nachricht. Wenn wir eine Nachricht empfangen, protokollieren wir sie. Wenn ein Fehler auftritt, protokollieren wir das auch. Und wenn die Verbindung geschlossen wird, verabschieden wir uns!

WebSocket-Methoden

Nun, da wir wissen, wie wir auf Ereignisse hören, schauen wir uns an, wie wir tatsächlich etwas mit unserem WebSocket anstellen können. Hier sind die Hauptmethoden:

Methode	Beschreibung
send()	Sendet Daten an den Server
close()	Schließt die WebSocket-Verbindung

So verwenden wir diese Methoden:

<script>
var socket = new WebSocket('ws://example.com/socket');

// Eine Nachricht an den Server senden
socket.send('Hallo, Server!');

// Die Verbindung schließen
socket.close();
</script>

So einfach ist das! Mit send() können wir beliebige Daten an den Server senden. Und wenn wir fertig sind, können wir die Verbindung mit close() höflich schließen.

Einrichtung des WebSocket-Servers mit Python

Ich weiß, wir konzentrieren uns hier auf HTML, aber ich denke, es ist wichtig, beide Seiten der Kommunikation zu verstehen. Also schauen wir uns schnell an, wie wir einen einfachen WebSocket-Server mit Python einrichten könnten. Keine Sorge, wenn du nicht mit Python vertraut bist – die Idee ist hier was wichtiges.

import asyncio
import websockets

async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Echo: {message}")

start_server = websockets.serve(echo, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

Dieser Server gibt einfach jede empfangene Nachricht mit dem Präfix "Echo: " zurück. Er läuft auf localhost (deinem eigenen Computer) auf Port 8765.

Einrichtung des HTML-Clients für den Server

Nun, da wir unseren Server haben, erstellen wir eine HTML-Seite, die sich mit ihm verbindet:

<!DOCTYPE html>
<html>
<head>
<title>WebSocket-Test</title>
</head>
<body>
<h1>WebSocket-Test</h1>
<input type="text" id="messageInput" placeholder="Eine Nachricht eingeben">
<button onclick="sendMessage()">Senden</button>
<div id="messages"></div>

<script>
var socket = new WebSocket('ws://localhost:8765');

socket.onopen = function(event) {
console.log('Verbindung hergestellt!');
};

socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};

function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>

Diese HTML-Seite erstellt eine einfache Benutzeroberfläche, in der du eine Nachricht eingeben, sie an den Server senden und die reflektierte Antwort sehen kannst.

Und das war's! Wir haben die Grundlagen der WebSockets abgedeckt, von der Verständigung, was sie sind, bis hin zur Einrichtung eines Servers und der Erstellung eines Clients. Denke daran, WebSockets handeln von Echtzeit-, bidirektionaler Kommunikation. Sie sind perfekt für Anwendungen wie Chatrooms, Live-Sportaktualisierungen oder jede Situation, in der du einen sofortigen Datenaustausch benötigst.

Während du deine Reise im Web-Entwickeln fortsetzt, wirst du feststellen, dass WebSockets eine neue Welt der Möglichkeiten eröffnen. Also weiter üben, weiter experimentieren und vor allem: weiter Spaß haben! Frohes Coden!

Credits: Image by storyset