Connecter le client et le serveur
Brancher le navigateur et le serveur avec des événements Socket.io
⏱ Estim. ~7 min
01 · Lire
Tu as un serveur qui gère le jeu et une page qui affiche le plateau. Ils ne se parlent pas encore. Le morceau manquant, c'est client.js — le JavaScript qui tourne dans le navigateur, qui traduit ce que le joueur fait (cliquer des cases, presser des boutons) en ce que le serveur comprend (des événements Socket.io).
Pense à client.js comme à un interprète dans une réunion diplomatique. Le joueur parle « clics et boutons ». Le serveur parle « événements et données ». L'interprète écoute les deux côtés, traduit les messages, s'assure que tout le monde se comprend.
Points clés
- client.js tourne dans le navigateur, pas sur le serveur
- Il traduit les actions utilisateur (clics) en événements Socket.io
- Il traduit les événements serveur en mises à jour d'UI (affichage des coups, messages de statut)
- La fonction io() se connecte automatiquement au serveur
02 · Modèle de prompt
Demande à Claude de construire le JavaScript côté client. Sois explicite sur chaque événement et chaque mise à jour d'UI.
Aide-moi à créer un public/client.js pour le tic-tac-toe. Exigences : (1) Connecte-toi au serveur avec io() — Socket.io se connecte automatiquement à l'host qui sert la page. (2) Au clic sur 'Find Game', emit 'find-game' et mets le statut à 'Searching for opponent...'. (3) À la réception de 'waiting', mets le statut à 'Waiting for another player...'. (4) À la réception de 'game-start' (qui contient symbol et roomId), mémorise le symbole du joueur, affiche à qui c'est le tour, et active le plateau. (5) Au clic sur une case, emit 'make-move' avec l'index de la case et le roomId — mais seulement si c'est ton tour et que la case est vide. (6) À la réception de 'move-made', pose le symbole correspondant dans la case, mets à jour le statut de tour, et active ou désactive les clics selon à qui c'est le tour. (7) À la réception de 'game-over', affiche le résultat (gagné / perdu / nul), highlight les trois cases gagnantes si besoin, et affiche le bouton Play Again. (8) À la réception de 'opponent-left', affiche 'Opponent disconnected' et affiche le bouton Play Again. (9) Au clic sur Play Again, réinitialise le plateau et emit 'find-game' à nouveau.
03 · Exemple de code
Une fois que Claude a produit client.js, repère ce pattern central. C'est comme ça que fonctionne tout client Socket.io.
Pattern client Socket.io
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() établit la connexion avec le serveur. socket.emit() envoie des événements. socket.on() écoute des événements. Les noms d'événements ('find-game', 'game-start', 'move-made') sont le contrat entre client et serveur — ils doivent correspondre au caractère près. C'est le même flux d'événements que tu as étudié dans la leçon de planification.
04 · Lire
Le client ne décide jamais qu'un coup est valide. Il envoie chaque clic au serveur et attend que le serveur réponde. Si le serveur dit que le coup est valide (emit 'move-made'), le client met à jour le plateau. Si le serveur ignore le coup, il ne se passe rien.
C'est le même principe que dans la leçon de planification : le serveur fait autorité. Le client n'est qu'un affichage. Tu peux ajouter des vérifications côté client (comme désactiver les clics quand ce n'est pas ton tour) pour que l'UI réponde mieux, mais le serveur valide toujours tout indépendamment.
Points clés
- Le client envoie les coups au serveur et attend confirmation
- Le serveur valide chaque coup — le client ne décide jamais de la validité
- Les vérifications côté client sont là pour l'UX, pas pour la sécurité
- Les noms d'événements dans client.js doivent correspondre au caractère près à ce qu'attend server.js
05 · Pratique réelle
Teste le flux complet de la partie. C'est le moment de vérité — ouvre deux onglets de navigateur sur la même URL et joue contre toi-même.
06 · Compléter
La fonction io() dans client.js établit une connexion _____ avec le serveur, qui reste ouverte toute la durée de la session de jeu.
07 · Quiz
Un joueur clique une case dans son navigateur. Que se passe-t-il ensuite ?
- Le client pose immédiatement le symbole sur le plateau, puis prévient le serveur
- Le client envoie une requête HTTP POST au serveur
- Le navigateur recharge la page pour récupérer un plateau à jour
- Le client emit 'make-move' au serveur et attend que le serveur emit 'move-made' avant de mettre à jour le plateau
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.