Le applicazioni moderne sono sempre più dinamiche e reattive. Pensiamo a chat, dashboard live, giochi multiplayer o sistemi di notifica in tempo reale. In tutti questi casi, serve una tecnologia che permetta la comunicazione immediata tra client e server senza dover ricaricare la pagina web.
Per questo scopo, Node.js, Express e Socket.IO formano una combinazione perfetta. Sono semplici da usare, altamente performanti e basate su JavaScript, il linguaggio del web. In questa guida ti mostrerò come realizzare una chat in tempo reale, partendo da zero e spiegandoti ogni passaggio con il codice commentato.
Cosa useremo per creare la nostra app in tempo reale
- Node.js
- Express.js: framework leggero per la creazione di API e server HTTP.
- Socket.IO: libreria che permette la comunicazione bidirezionale in tempo reale tramite WebSocket
Creazione del progetto
Per prima cosa, installa Node.js se non lo hai già. Ora apri il terminale e crea una nuova cartella:
mkdir chat-app
cd chat-app
npm init -yInstalliamo poiExpress e Socket.IO:
npm install express socket.ioStruttura del progetto
Creiamo la seguente struttura:
chat-app/
├── public/
│ └── index.html
├── server.js
├── package.jsonIl server con Node.js, Express e Socket.IO
Nel file server.js, scriviamo il seguente codice:
// server.js
const express = require("express");
const app = express();
const http = require("http").createServer(app); // Server HTTP
const io = require("socket.io")(http); // Socket.IO legato al server HTTP
// Serviamo i file statici dalla cartella "public"
app.use(express.static("public"));
// Route principale
app.get("/", (req, res) => {
res.sendFile(__dirname + "/public/index.html");
});
// Quando un client si connette
io.on("connection", (socket) => {
console.log("Un utente si è connesso");
// Ricezione del messaggio dal client
socket.on("chat message", (msg) => {
io.emit("chat message", msg); // Invia a tutti i client
});
// Quando un client si disconnette
socket.on("disconnect", () => {
console.log("Utente disconnesso");
});
});
// Avvio del server sulla porta 3000
http.listen(3000, () => {
console.log("Server avviato su http://localhost:3000");
});In esso:
- Express serve la nostra pagina web.
- Socket.IO crea una connessione WebSocket tra client e server.
- Quando un utente invia un messaggio (
chat message - Quando un utente si collega o si disconnette, il server lo registra nella console.
La parte client: HTML + JavaScript
Ora creiamo public/index.html, la nostra semplice interfaccia di chat.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat Realtime</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #eee;
}
form {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
display: flex;
}
input {
flex: 1;
padding: 10px;
border: none;
border-top: 1px solid #eee;
}
button {
padding: 10px;
border: none;
background: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" placeholder="Scrivi un messaggio..." />
<button>Invia</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value); // Invio al server
input.value = '';
}
});
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>- Quando premi "Invia", il messaggio viene inviato al server con
socket.emit('chat message', ...) - Il server lo riceve e lo trasmette a tutti i client.
- Ogni client, ricevendo l'evento
chat message
Esecuzione e test
Avvia il server con:
node server.jsApri il browser su http://localhost:3000, magari in due finestre diverse. Scrivi un messaggio e vedrai apparire il testo su entrambi gli schermi in tempo reale.
Come funziona la comunicazione in tempo reale
Il cuore del sistema è WebSocket, un protocollo che consente la connessione persistente tra client e server. A differenza delle richieste HTTP classiche, che sono "una tantum", WebSocket mantiene aperta una comunicazione bidirezionale costante. Socket.IO semplifica l'utilizzo di WebSocket e offre funzionalità aggiuntive, come:
- Fallback automatico se WebSocket non è supportato.
- Eventi personalizzati.
- Autenticazione.
- Broadcast e stanze.
Sicurezza e produzione
Questa è una demo base, ma per andare in produzione è importante sanitizzare i messaggi. Evita quindiscript malevoli nel testo:
function sanitize(input) {
return input.replace(//g, ">");
}In produzione, usa HTTPS per proteggere la connessione. Aggiungi sistemi di throttling o CAPTCHA per limitare invii ripetuti e ricordati che puoi associare ogni socket.id ad un utente con nome e autenticazione.
Possibili estensioni dell'app in tempo reale
Hai una base solida per costruire qualcosa di molto più grande. Ecco qualche idea:
- Aggiunta del nome utente.
- Chat di gruppo con stanze.
- Notifiche visive o sonore.
- Cronologia dei messaggi con database.
- Emoji e allegati.
- Strutturare il progetto.
- Configurare il server.
- Collegare client e server tramite eventi personalizzati.
- Come visualizzare i messaggi in tempo reale.
Conclusione
In questa guida hai visto quanto sia semplice realizzare un'app in tempo reale con Node.js, Express e Socket.IO. Con poche righe di codice e la potenza di WebSocket, puoi creare un'app moderna, reattiva e funzionale. Hai imparato a:
Questa chat è un punto di partenza. Da qui puoi esplorare infinite direzioni: aggiungere funzionalità complesse, integrare un database, rendere l'app mobile-friendly o trasformarla in un sistema collaborativo completo. L'aspetto più interessante? Hai usato JavaScript da cima a fondo, client e server parlano la stessa lingua. Questo rende lo sviluppo fluido, coerente e veloce.
Buon hacking!
