WebSocket - Comunicazione in tempo reale (bidirezionale)

Pubblicato da


Nel 2025, i WebSocket continuano a essere una scelta popolare per la creazione di applicazioni in tempo reale come giochi online, app di chat e ticker azionari. 

I WebSocket sono un protocollo standard che consente una comunicazione efficiente tra client e server.

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!


Cosa sono i WebSocket

La comunicazione tra client e server è alla base di qualsiasi applicazione web moderna. Tradizionalmente, questa avviene tramite richieste HTTP, dove il client invia una richiesta e il server risponde con i dati richiesti. Tuttavia, questo approccio può risultare inefficiente per applicazioni che necessitano di aggiornamenti in tempo reale, poiché il client deve continuamente interrogare il server per ottenere nuove informazioni. Per risolvere questo problema, entra in gioco la tecnologia WebSocket.

I WebSocket sono un protocollo di comunicazione che permette la connessione bidirezionale tra un client e un server attraverso una singola connessione TCP. A differenza delle tradizionali richieste HTTP, i WebSocket consentono una comunicazione in tempo reale, riducendo la latenza e il sovraccarico della rete.


Perché usare i WebSocket?

L'uso dei WebSocket in JavaScript è particolarmente utile in scenari che richiedono aggiornamenti in tempo reale, come:

  • Chat e messaggistica istantanea (WhatsApp Web, Slack, Telegram Web)

  • Notifiche in tempo reale (sistemi di allerta, aggiornamenti di trading)

  • Applicazioni di collaborazione (Google Docs, strumenti di whiteboarding condivisi)

  • Giochi online multiplayer

  • Monitoraggio di dati live (pannelli di controllo, streaming di dati finanziari)


Come funzionano i WebSocket?

In JavaScript, la gestione dei WebSocket è semplificata grazie all'oggetto WebSocket, che permette di creare una connessione e inviare/ricevere messaggi in tempo reale.

Esempio di base di una connessione WebSocket:


// Creating WebSocket Connection
const socket = new WebSocket('wss://example.com/socket');

// Connection opening event
socket.addEventListener('open', (event) => {
    console.log('Connection open');
    socket.send('Hello Server!');
});

// Message reception event
socket.addEventListener('message', (event) => {
    console.log('Message received:', event.data);
});

//Connection closing event
socket.addEventListener('close', (event) => {
    console.log('Connection closed');
});

// Error event
socket.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
});

wss si riferisce a WebSocket Secure (WSS) ossia la versione sicura del protocollo WebSocket (WS), simile alla relazione tra HTTPS e HTTP. Utilizza la crittografia SSL/TLS per proteggere la comunicazione tra il client e il server, garantendo che i dati scambiati siano sicuri e non intercettabili da terze parti. È particolarmente utile per applicazioni che trattano informazioni sensibili, come servizi di messaggistica, transazioni finanziarie e autenticazione.


Creare un semplice server WebSocket con Node.js

Per comprendere appieno il funzionamento dei WebSocket, è utile sapere come creare un server che gestisca le connessioni WebSocket. Questo permette di stabilire una comunicazione bidirezionale tra il client e il server, essenziale per applicazioni che necessitano di aggiornamenti in tempo reale senza continue richieste HTTP.

Per creare un server WebSocket, possiamo usare la libreria ws in Node.js:


const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (ws) => {
    console.log('New connection');

    ws.on('message', (message) => {
        console.log('Message received:', message);
        ws.send('Message received: ' + message);
    });

    ws.on('close', () => {
        console.log('Connection closed');
    });
});


Evitare gli errori più comuni con i WebSocket

Lavorare con i WebSocket può essere molto vantaggioso, ma è importante evitare alcuni errori comuni per garantire una comunicazione stabile ed efficiente:

  • Non gestire correttamente le disconnessioni ❌

    • Assicurati di implementare la riconnessione automatica in caso di perdita della connessione. ✅

    • Usa eventi come close ed error per rilevare problemi e ripristinare la connessione se necessario. Ad esempio questo codice tenta di ristabilire la connessione dopo 3 secondi in caso di chiusura imprevista. ✅


socket.addEventListener('close', () => {
    console.log('Connection closed, trying to reconnect...');
    setTimeout(() => {
        reconnectWebSocket();
    }, 3000);
});

socket.addEventListener('error', (event) => {
    console.error('Errore WebSocket:', event);
    socket.close();
});

function reconnectWebSocket() {
    socket = new WebSocket('wss://example.com/socket');
}

  • Non gestire errori di rete o timeout ❌

    • Usa setTimeout o setInterval per monitorare la connessione e verificare la presenza del server. ✅

    • Implementa una logica per tentare nuove connessioni in caso di errore. ✅

  • Inviare troppi messaggi in poco tempo ❌

    • Evita il sovraccarico del server limitando la frequenza dei messaggi inviati. ✅

    • Implementa meccanismi di throttling o debounce per ridurre il numero di richieste. ✅

  • Non usare WebSocket Secure (WSS) in produzione ❌

    • Utilizza wss:// invece di ws:// per garantire una connessione crittografata e sicura, specialmente su reti pubbliche. ✅

  • Mancanza di autenticazione e autorizzazione ❌

    • Proteggi i WebSocket con meccanismi di autenticazione basati su token o sessioni. ✅

    • Assicurati che solo utenti autorizzati possano accedere a determinati canali o dati. ✅

  • Non chiudere correttamente le connessioni inattive ❌

    • Implementa un timeout per chiudere connessioni inattive e liberare risorse. ✅

    • Usa il metodo close() per terminare correttamente le connessioni non più necessarie. ✅

Seguire queste buone pratiche aiuterà a prevenire problemi e garantire che la tua applicazione WebSocket sia robusta, scalabile e sicura.


Applicazioni famose che usano WebSocket

Molte delle applicazioni più famose utilizzano WebSocket per offrire esperienze utente fluide e reattive:

  • WhatsApp Web e Telegram Web per la sincronizzazione istantanea dei messaggi

  • Google Docs per la modifica collaborativa dei documenti in tempo reale

  • TradingView per aggiornamenti dei prezzi di mercato in tempo reale

  • Twitch e YouTube Live per chat e notifiche in diretta

  • Giochi online multiplayer come Agar.io o Fortnite


Conclusione

I WebSocket sono una tecnologia essenziale per la comunicazione in tempo reale nelle applicazioni web moderne. Grazie alla loro efficienza e semplicità di utilizzo in JavaScript, consentono di creare esperienze interattive e reattive senza il bisogno di continue richieste HTTP. Con l'integrazione di WebSocket, è possibile migliorare la velocità e l'affidabilità delle applicazioni, rendendole più coinvolgenti per gli utenti.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment