> For the complete documentation index, see [llms.txt](https://sponta.gitbook.io/battaglia-navale/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sponta.gitbook.io/battaglia-navale/readme.md).

# Introduzione: una partita, due schermi

Anna indica una casella e dice «B4». Bruno controlla il proprio foglio e risponde «Acqua». Anna annota il risultato e il turno passa a Bruno. Per giocare a battaglia navale sullo stesso tavolo bastano due fogli e un accordo sulle regole. Se i giocatori usano due computer diversi, come arriva la mossa da uno schermo all'altro? Chi controlla che sia il turno giusto? E dove si conserva la posizione delle navi senza mostrarla all'avversario?

Battaglia Navale è un'applicazione web che affronta questi problemi. Due persone entrano con un nickname, si incontrano in una sala d'attesa, si sfidano, schierano le navi e giocano dal proprio browser. Quando una persona compie una mossa, l'altra vede l'aggiornamento senza ricaricare la pagina. È disponibile anche una partita contro il computer, utile per capire che cosa cambia quando il gioco si svolge su un solo dispositivo.

## Il problema nascosto dietro un clic

Premere una casella modifica inizialmente soltanto ciò che accade nel browser di Anna. Bruno non può saperlo per magia: occorre inviare un messaggio attraverso la rete. Quel messaggio deve avere un significato concordato, per esempio «voglio sparare nella casella 13».

Il programma deve poi decidere se la richiesta è valida. Anna potrebbe fare doppio clic, avere una pagina rimasta indietro o modificare il JavaScript del proprio browser. Per questo una terza parte, il server, conserva la partita e applica le regole. I browser sono i client: chiedono di agire e mostrano le informazioni ricevute.

Il server risponde alla richiesta di Anna e informa anche Bruno. Le due schermate non devono essere identiche: Anna vede la propria flotta e i risultati dei propri colpi; Bruno vede la sua flotta e i colpi ricevuti. Devono però raccontare la stessa partita, senza contraddirsi su turno, risultato e vincitore.

## Un canale che rimane disponibile

Un WebSocket permette al browser e al server di scambiarsi messaggi attraverso un collegamento persistente: una volta aperto, ciascuno può inviare dati senza attendere una nuova richiesta dell'altro. Nel progetto questo lavoro è affidato a Socket.IO, una libreria che usa anche WebSocket e offre strumenti per nominare gli eventi, ricevere conferme e ristabilire il collegamento.

La rete trasporta i messaggi; il significato di «sfida», «colpo» e «partita finita» viene stabilito dal nostro programma. Questa distinzione accompagna tutta la guida: avere un collegamento funzionante è soltanto il primo passo per costruire un gioco corretto.

## Dal gioco allo sviluppo di applicazioni in rete

Questa dispensa usa Battaglia Navale per studiare come si costruisce un'applicazione basata sullo scambio di messaggi in rete. Il gioco ci permette di rendere concrete le domande: una casella premuta diventa una richiesta, una regola diventa un controllo e il risultato deve comparire su due dispositivi. Lo stesso ragionamento si può applicare a una chat o a un'attività condivisa.

Procederemo dal [problema della comunicazione](/battaglia-navale/http-e-websocket.md) alla [divisione delle responsabilità](/battaglia-navale/architettura.md). Prima di leggere il codice che invia gli eventi, costruiremo le [strutture dati](/battaglia-navale/strutture-dati.md): perché serve un array per le caselle, che cosa deve ricordare una nave e come si ritrova la partita di un giocatore. Confronteremo poi la [memoria del programma con un database](/battaglia-navale/memoria-e-database.md) e chiariremo il ruolo di [linguaggi e librerie](/battaglia-navale/linguaggi-e-esecuzione.md).

Con questi elementi potremo seguire un colpo attraverso il codice senza incontrare oggetti dei quali non conosciamo lo scopo. Infine studieremo le attese, le disconnessioni e gli errori: situazioni normali di un'applicazione in rete, da prevedere durante il progetto.

Gli esempi usano le regole effettive del progetto: un mare di 10 × 10 caselle, cinque navi di lunghezza 5, 4, 3, 3 e 2, nessun contatto tra navi nemmeno in diagonale. Chi colpisce può sparare ancora; chi trova acqua cede il turno. Le procedure per avviare il programma e osservare i messaggi sono raccolte nel [laboratorio](/battaglia-navale/laboratorio.md).

Non occorre conoscere in anticipo tutti i nomi delle tecnologie. Ogni nome verrà collegato al problema che risolve; il [glossario](/battaglia-navale/glossario.md) permette di ritrovarlo durante la lettura.

Negli esempi distingueremo tre cose: il comportamento già realizzato, una versione semplificata usata per spiegarlo e una possibile alternativa. Questo ci consentirà di capire le scelte senza attribuire al programma funzioni che non possiede. Le tabelle raccolgono informazioni da confrontare; il ragionamento che le precede spiega perché ci servono.