In un mondo digitale che si muove alla velocità della luce, le applicazioni in tempo reale sono più importanti che mai. Una chat in tempo reale è un esempio perfetto di come possiamo usare la tecnologia per comunicare istantaneamente, indipendentemente dalla distanza.
In questo articolo, esploreremo come creare una semplice chat in tempo reale utilizzando Node.js, Express e Socket.io, tre potenti strumenti che rendono lo sviluppo di applicazioni real-time semplici ed efficienti.
Nota importante: è necessaria l'installazione di Node.js nell'ambiente di sviluppo.
Cosa rende possibile la magia in tempo reale? Socket.io
Il cuore pulsante di qualsiasi applicazione in tempo reale è la sua capacità di gestire comunicazioni bidirezionali e non bloccanti tra client e server. Qui entra in gioco Socket.io, una libreria JavaScript per applicazioni web real-time. Socket.io è composta da due parti: la prima lato server che gira su Node.js, la seconda invece è una libreria client che viene eseguita nel browser. Questa struttura consente una comunicazione fluida e in tempo reale.
Costruiamo una chat in tempo reale
Impostazione del progetto: Crea una nuova cartella e utilizza il comando npm init -y per inizializzare il tuo nuovo progetto. All'interno della tua cartella, comparirà il file package.json con le impostazioni predefinite. Successivamente, installa express e socket.io:
npm init -y
npm install express socket.ioServer Setup: All'interno della tua cartella, crea un file server.js e imposta un server HTTP basico con Express, avviando Socket.io in ascolto sullo stesso server.
// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
let userCount = 0; // Contatore per assegnare un numero ad ogni utente
io.on('connection', (socket) => {
userCount++;
let userName = `Utente ${userCount}`;
console.log(`${userName} si è connesso`);
// Invia al nuovo utente il suo identificativo unico
socket.emit('userId', userName);
socket.broadcast.emit('message', `${userName} si è connesso`);
socket.on('message', (msg) => {
io.emit('message', `${userName}: ${msg}`);
});
socket.on('disconnect', () => {
console.log(`${userName} disconnesso`);
io.emit('message', `${userName} si è disconnesso`);
});
});
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server in ascolto sulla porta ${PORT}`);
});
Il codice appena visualizzato, imposta un server HTTP semplice che serve una pagina HTML all'URL principale. Utilizza Socket.io per aprire una connessione WebSocket, ascoltando gli eventi di connessione, ricezione dei messaggi della chat, e disconnessione degli utenti.
Quando un utente si connette al server, viene incrementato un contatore che assegna un numero univoco a ogni utente, e viene generato un nome utente corrispondente.
Il server, quindi, invia l'identificativo unico dell'utente appena connesso al client. Inoltre, il server, invia un messaggio broadcast agli altri utenti per notificarli della nuova connessione.
Gli utenti possono inviare messaggi attraverso la chat, i quali vengono trasmessi a tutti gli altri utenti connessi. Quando un utente si disconnette, il server invia un messaggio di notifica agli altri utenti.
Creazione dell'Interfaccia utente: Successivamente, crea un file index.html, con un'interfaccia semplice per la tua chat. Utilizza JavaScript per connetterti a Socket.io sul server e per inviare/ricevere messaggi.
// index.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>artCode - Chat in tempo reale</title>
<style>
body { font-family: Arial, sans-serif; }
ul { list-style-type: none; margin: 0; padding: 0; }
li { padding: 8px; margin-bottom: 2px; background-color: #f3f3f3; }
</style>
</head>
<body>
<ul id="messages"></ul>
<p id="user-id"></p> <!-- Elemento per visualizzare l'ID dell'utente -->
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Invia</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('userId', function(id) {
document.getElementById('user-id').textContent = 'Il tuo ID: ' + id;
});
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('message', input.value);
input.value = '';
}
});
socket.on('message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>All'interno della nostra index.html, oltre all'inclusione dei vari tags HTML che serviranno per il rendering dei nostri messaggi e del nostro field di input con cui gestiremo l'invio dei nostri messaggi, troviamo la logica Javascript per la gestione degli eventi.
Possiamo notare come viene creato l'oggetto socket che rappresenta la connessione WebSocket con il server. Quando il server emette un evento "userId", il client si aggiorna automaticamente, assegnando l'userId corretto ricevuto dal server.
Inoltre, quando il server invierà un messaggio tramite l'evento con id "message", il client creerà un nuovo elemento HTML in lista (tag li in questo caso) contente il messaggio inviato/ricevuto.
Il codice, prevende anche l'effetto di scorrimento attraverso la funzione Javascript relativa alla window "scrollTo", tenendo il focus sull'ancoraggio al bottom della pagina e quindi ai messaggi più recenti.
Importante notare come il server sia in ascolto sulla porta 3000.
Una volta terminata la creazione dei due file di test, inizializzato il progetto e installate le dipendenze, non dimentichiamoci di lanciare il comando:
node server.js
Creare una chat in tempo reale con Node.js e Socket.io dimostra la potenza della comunicazione bidirezionale in applicazioni web moderne. L'uso di Socket.io direttamente dal tuo server, semplifica l'integrazione e assicura che client e server siano sempre compatibili, permettendoti di concentrarti sulla logica applicativa, piuttosto che sulla gestione delle dipendenze. Con queste basi, il mondo delle applicazioni in tempo reale è alla portata di tutti.
