Client und Server verbinden
Browser und Server mit Socket.io-Events verkabeln
⏱ ca. ~7 Min
01 · Lesen
Du hast einen Server, der das Spiel verwaltet, und eine Seite, die das Brett anzeigt. Sie sprechen noch nicht miteinander. Das fehlende Stück ist client.js — das JavaScript, das im Browser läuft und zwischen dem, was die Spieler tun (Zellen klicken, Buttons drücken), und dem, was der Server versteht (Socket.io-Events), übersetzt.
Stell dir client.js wie einen Dolmetscher auf einer diplomatischen Konferenz vor. Die Spielerin spricht "Klicks und Buttons". Der Server spricht "Events und Daten". Der Dolmetscher hört beiden zu, übersetzt die Nachrichten und sorgt dafür, dass alle verstehen, was los ist.
Kernpunkte
- client.js läuft im Browser, nicht auf dem Server
- Übersetzt Nutzeraktionen (Klicks) in Socket.io-Events
- Übersetzt Server-Events in UI-Updates (Züge anzeigen, Statusmeldungen)
- Die Funktion io() verbindet sich automatisch mit dem Server
02 · Prompt-Vorlage
Bitte Claude, das clientseitige JavaScript zu bauen. Sei zu jedem Event und jedem UI-Update explizit.
Bau mir eine public/client.js für ein Tic-Tac-Toe-Spiel. Anforderungen: (1) Verbinde dich mit io() zum Server — Socket.io verbindet sich automatisch mit dem Host, der diese Seite ausliefert. (2) Klick auf 'Find Game' soll 'find-game' emittieren und den Status auf 'Searching for opponent...' setzen. (3) Beim Event 'waiting' den Status auf 'Waiting for another player...' setzen. (4) Beim Event 'game-start' (du bekommst symbol und roomId) das Symbol des Spielers merken, anzeigen, wer dran ist, und das Brett aktivieren. (5) Beim Klick auf eine Zelle 'make-move' mit dem Zell-Index und der roomId emittieren — aber nur, wenn der Spieler dran und die Zelle leer ist. (6) Beim Event 'move-made' das passende Symbol in die Zelle setzen, den Zug-Status aktualisieren und Klicks je nachdem, wer dran ist, aktivieren oder deaktivieren. (7) Beim Event 'game-over' das Ergebnis anzeigen (Sieg / Niederlage / Unentschieden), bei Sieg die drei Gewinnzellen hervorheben und den Play-Again-Button einblenden. (8) Beim Event 'opponent-left' 'Opponent disconnected' anzeigen und den Play-Again-Button einblenden. (9) Klick auf Play Again soll das Brett zurücksetzen und 'find-game' erneut emittieren.
03 · Code-Beispiel
Nachdem Claude client.js generiert hat, achte auf dieses Kernmuster. So funktioniert jeder Socket.io-Client.
Socket.io-Client-Muster
const socket = io();
// Sending events TO the server
socket.emit('find-game');
socket.emit('make-move', { index: 4, roomId: myRoom });
// Receiving events FROM the server
socket.on('game-start', (data) => {
// data.symbol is 'X' or 'O'
// data.roomId identifies this game
});
socket.on('move-made', (data) => {
// data.index, data.symbol
// Update the board cell
});
io() baut die Verbindung zum Server auf. socket.emit() sendet Events. socket.on() lauscht auf Events. Die Event-Namen ('find-game', 'game-start', 'move-made') sind der Vertrag zwischen Client und Server — sie müssen Zeichen für Zeichen übereinstimmen. Das ist derselbe Event-Fluss, den du in der Planungs-Lektion studiert hast.
04 · Lesen
Der Client entscheidet nie, ob ein Zug gültig ist. Er schickt jeden Klick an den Server und wartet auf dessen Antwort. Sagt der Server, der Zug ist gültig (emittet 'move-made'), aktualisiert der Client das Brett. Ignoriert der Server den Zug, passiert nichts.
Das ist dasselbe Prinzip wie in der Planungs-Lektion: der Server ist die Autorität. Der Client ist nur die Anzeige. Du kannst clientseitige Checks ergänzen (zum Beispiel Klicks deaktivieren, wenn du nicht dran bist), damit sich das UI flott anfühlt, aber der Server validiert trotzdem alles unabhängig.
Kernpunkte
- Der Client schickt Züge an den Server und wartet auf Bestätigung
- Der Server validiert jeden Zug — der Client entscheidet nie über Gültigkeit
- Clientseitige Checks sind nur für UX, nicht für Sicherheit
- Die Event-Namen in client.js müssen Zeichen für Zeichen den in server.js erwarteten entsprechen
05 · Echte Übung
Teste den kompletten Spielablauf. Das ist der Moment der Wahrheit — öffne zwei Browser-Tabs auf dieselbe URL und spiel gegen dich selbst.
06 · Ausfüllen
Die Funktion io() in client.js baut eine _____ -Verbindung zum Server auf, die für die gesamte Spielsitzung offen bleibt.
07 · Quiz
Ein Spieler klickt im Browser eine Zelle. Was passiert als Nächstes?
- Der Client setzt das Symbol sofort aufs Brett und informiert den Server später
- Der Client schickt einen HTTP-POST-Request an den Server
- Der Browser lädt die Seite neu, um das aktualisierte Brett zu holen
- Der Client emittet 'make-move' an den Server und wartet, bis der Server 'move-made' emittet, bevor er das Brett aktualisiert
Andere Lektionen aus diesem Kapitel
⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.
※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.