Collegare client e server
Connettere il browser al server con gli eventi Socket.io
⏱ Stima ~7 min
01 · Leggi
Hai un server che gestisce il gioco e una pagina che mostra il tabellone. Al momento non comunicano. Il pezzo mancante è client.js — il JavaScript che gira nel browser e traduce tra ciò che il giocatore fa (cliccare su celle, premere pulsanti) e ciò che il server capisce (eventi Socket.io).
Pensa a client.js come all'interprete di una riunione diplomatica. Il giocatore parla la lingua dei "clic e pulsanti". Il server parla la lingua degli "eventi e dati". L'interprete ascolta entrambi, converte i messaggi e assicura che tutti si capiscano.
Punti chiave
- client.js gira nel browser, non sul server
- Traduce le azioni dell'utente (clic) in eventi Socket.io
- Traduce gli eventi del server in aggiornamenti UI (mosse visualizzate, messaggi di stato)
- La funzione io() si connette automaticamente al server
02 · Modello di prompt
Chiedi a Claude di costruire il JavaScript lato client. Sii preciso su ogni evento e aggiornamento dell'UI.
Aiutami a creare un public/client.js per il gioco di tic-tac-toe. Requisiti: (1) Usa io() per connetterti al server — Socket.io si connette automaticamente all'host che ha servito la pagina. (2) Quando si clicca 'Find Game', emetti 'find-game' e aggiorna lo stato con 'Searching for opponent...'. (3) Alla ricezione dell'evento 'waiting', aggiorna lo stato con 'Waiting for another player...'. (4) Alla ricezione di 'game-start' (che contiene symbol e roomId), salva il simbolo del giocatore, mostra di chi è il turno e abilita il tabellone. (5) Quando si clicca su una cella, emetti 'make-move' con l'indice della cella e il roomId — ma solo se è il tuo turno e la cella è vuota. (6) Alla ricezione di 'move-made', posiziona il simbolo corrispondente nella cella, aggiorna lo stato del turno e abilita o disabilita i clic in base a chi tocca. (7) Alla ricezione di 'game-over', mostra il risultato (vittoria/sconfitta/pareggio), evidenzia le tre celle vincenti se necessario e mostra il pulsante Play Again. (8) Alla ricezione di 'opponent-left', mostra 'Opponent disconnected' e il pulsante Play Again. (9) Quando si clicca Play Again, resetta il tabellone ed emetti di nuovo 'find-game'.
03 · Esempio di codice
Dopo che Claude ha prodotto client.js, cerca questo pattern fondamentale. È come funziona ogni client Socket.io.
Pattern del 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() crea la connessione al server. socket.emit() invia eventi. socket.on() li ascolta. I nomi degli eventi ('find-game', 'game-start', 'move-made') sono il contratto tra client e server — devono corrispondere esattamente. Sono gli stessi eventi del flusso che hai studiato nella lezione di pianificazione.
04 · Leggi
Il client non decide mai se una mossa è valida. Invia ogni clic al server e aspetta la risposta. Quando il server dice che la mossa è valida (emit 'move-made'), il client aggiorna il tabellone. Se il server ignora la mossa, non succede niente.
È lo stesso principio della lezione di pianificazione: il server è l'autorità. Il client si limita a visualizzare. Puoi aggiungere controlli lato client (come disabilitare i clic quando non è il tuo turno) per rendere l'UI più reattiva, ma il server valida comunque tutto in modo indipendente.
Punti chiave
- Il client invia la mossa al server e aspetta la conferma
- Il server valida ogni mossa — il client non decide mai la validità
- I controlli lato client servono solo per l'UX, non per la sicurezza
- I nomi degli eventi in client.js devono corrispondere esattamente a quelli attesi da server.js
05 · Pratica reale
Testa il flusso completo del gioco. Questo è il momento della verità — apri due schede del browser allo stesso URL e gioca contro te stesso.
06 · Completa
La funzione io() in client.js crea una connessione _____ con il server che rimane aperta per tutta la sessione di gioco.
07 · Quiz
Un giocatore clicca su una cella nel browser. Cosa succede dopo?
- Il client mette subito il simbolo sul tabellone e poi avvisa il server
- Il client invia una richiesta HTTP POST al server
- Il browser ricarica la pagina per ottenere il tabellone aggiornato
- Il client emette 'make-move' al server e aspetta che il server emetta 'move-made' prima di aggiornare il tabellone
Altre lezioni di questo capitolo
⚠ L'esperienza interattiva completa richiede JavaScript. Attivalo e ricarica la pagina.
※ Questo è un progetto educativo indipendente — non è un prodotto ufficiale di Anthropic. Claude™ è un marchio di Anthropic, PBC.