Configurer le projet
Initialiser le projet avec Claude Code et installer Socket.io
⏱ Estim. ~8 min
01 · Lire
C'est le moment de construire. On commence comme pour tout projet Node.js : créer un dossier, initialiser npm, installer les dépendances. Tu l'as déjà fait au Level 7.
La nouveauté, c'est Socket.io — une librairie qui rend WebSocket facile à utiliser. Elle gère l'upgrade de la connexion, la reconnexion, la sérialisation des messages, et te laisse te concentrer sur la logique du jeu sans avoir à toucher au réseau bas niveau.
Tu vas aussi utiliser Express pour servir les fichiers HTML du jeu. Express et Socket.io travaillent ensemble : Express sert les pages, Socket.io gère la communication temps réel.
Points clés
- Socket.io est une librairie qui simplifie la communication WebSocket
- Express sert les fichiers HTML/CSS/JS au navigateur
- Socket.io gère les événements temps réel entre client et serveur
- Les deux tournent sur le même serveur — Express sert les fichiers, Socket.io sert les événements
02 · Pratique réelle
Crée le dossier du projet et installe les dépendances. Lance ces commandes dans ton terminal.
03 · Modèle de prompt
Demande à Claude Code de construire le serveur. Décris-lui précisément ce que tu veux — pas juste « fais un serveur », mais ce qu'il doit faire exactement.
Aide-moi à créer un fichier server.js qui sert de serveur pour le tic-tac-toe. Utilise Express pour servir les fichiers statiques depuis le dossier public/, et intègre Socket.io pour gérer la communication temps réel. Quand un client se connecte, affiche 'Player connected' avec son socket ID ; quand il se déconnecte, affiche 'Player disconnected' avec son socket ID. Écoute la variable d'environnement PORT, et fallback sur le port 3000 si elle n'est pas définie.
04 · Exemple de code
Une fois que Claude a produit server.js, repère ce motif clé. Socket.io ne peut pas s'attacher directement à l'app Express — il lui faut l'objet HTTP server brut.
Pattern d'intégration 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);
Repère les trois couches : Express (app) gère les requêtes HTTP et sert les fichiers. Le HTTP server (httpServer) enveloppe Express. Socket.io (io) enveloppe le HTTP server pour intercepter les requêtes d'upgrade WebSocket. Voilà pourquoi Socket.io a besoin du HTTP server brut — il doit attraper le header 'Upgrade: websocket' avant qu'Express ne le voie.
05 · Pratique réelle
Crée une page de test minimale pour vérifier que la connexion marche.
06 · Compléter
Socket.io a besoin de l'objet HTTP _____ brut, pas juste de l'app Express, parce qu'il doit gérer le handshake d'upgrade WebSocket.
07 · Quiz
Qu'est-ce que npm install express socket.io ajoute à ton projet ?
- Deux langages de programmation pour construire le jeu
- Une base de données et une couche de cache
- Un framework front-end et une librairie CSS
- Un framework web (Express) et une librairie de communication temps réel (Socket.io)
Autres leçons de ce chapitre
⚠ L'expérience interactive complète nécessite JavaScript. Active-le et recharge la page.
※ Ce site est un projet éducatif indépendant — pas un produit officiel d'Anthropic. Claude™ est une marque déposée d'Anthropic, PBC.