Das Projekt aufsetzen
Mit Claude Code das Projekt initialisieren und Socket.io installieren
⏱ ca. ~8 Min
01 · Lesen
Zeit zu bauen. Wir starten wie bei jedem Node.js-Projekt: Ordner anlegen, npm initialisieren, Abhängigkeiten installieren. Das hast du in Level 7 gemacht.
Neu ist Socket.io — eine Bibliothek, die WebSocket einfach macht. Sie kümmert sich um Verbindungs-Upgrades, Reconnects und Nachrichten-Serialisierung, damit du dich auf die Spiellogik konzentrieren kannst statt auf Low-Level-Netzwerk.
Du nutzt auch Express, um die HTML-Dateien deines Spiels auszuliefern. Express und Socket.io arbeiten zusammen: Express liefert Seiten, Socket.io übernimmt die Echtzeit-Kommunikation.
Kernpunkte
- Socket.io ist eine Bibliothek, die WebSocket-Kommunikation vereinfacht
- Express liefert HTML-/CSS-/JS-Dateien an den Browser aus
- Socket.io übernimmt Echtzeit-Events zwischen Client und Server
- Beide laufen auf demselben Server — Express für Dateien, Socket.io für Events
02 · Echte Übung
Lege den Projektordner an und installiere die Abhängigkeiten. Führ diese Befehle in deinem Terminal aus.
03 · Prompt-Vorlage
Bitte Claude Code, den Server zu bauen. Beschreib ihm konkret, was du willst — nicht nur "bau einen Server", sondern was er genau machen soll.
Hilf mir, eine Datei server.js für das Tic-Tac-Toe-Spiel als Server zu bauen. Nutze Express, um statische Dateien aus public/ auszuliefern, und integriere Socket.io für die Echtzeit-Kommunikation. Wenn ein Client verbindet, gib 'Player connected' mit der Socket-ID aus; wenn er sich trennt, gib 'Player disconnected' mit der Socket-ID aus. Lausche auf die Umgebungsvariable PORT und falle ansonsten auf Port 3000 zurück.
04 · Code-Beispiel
Nachdem Claude server.js generiert hat, achte auf dieses zentrale Muster. Socket.io lässt sich nicht direkt an die Express-App anhängen — sie braucht das rohe HTTP-Server-Objekt.
Integrationsmuster für Express + Socket.io
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('Player connected:', socket.id);
socket.on('disconnect', () => {
console.log('Player disconnected:', socket.id);
});
});
httpServer.listen(process.env.PORT || 3000);
Beachte die drei Schichten: Express (app) behandelt HTTP-Requests und liefert Dateien. Der HTTP-Server (httpServer) umschließt Express. Socket.io (io) umschließt den HTTP-Server, um WebSocket-Upgrade-Anfragen abzufangen. Deshalb braucht Socket.io den rohen HTTP-Server — er muss den 'Upgrade: websocket'-Header sehen, bevor Express ihn sieht.
05 · Echte Übung
Bau eine minimale Testseite, um zu prüfen, ob die Verbindung funktioniert.
06 · Ausfüllen
Socket.io braucht das rohe HTTP-_____ -Objekt, nicht nur die Express-App, weil es den WebSocket-Upgrade-Handshake übernehmen muss.
07 · Quiz
Was fügt npm install express socket.io deinem Projekt hinzu?
- Zwei Programmiersprachen, um das Spiel zu bauen
- Eine Datenbank und eine Caching-Schicht
- Ein Frontend-Framework und eine CSS-Bibliothek
- Ein Web-Framework (Express) und eine Bibliothek für Echtzeit-Kommunikation (Socket.io)
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.