WebSocket è un protocollo, parte delle specifiche HTML5, che offre la possibilità di instaurare una comunicazione bidirezionale Full-Duplex su una porta TCP/IP tra un Client ed un Server, partendo da una normale richiesta HTTP che viene processata e scalata verso WebSocket (processo di upgrade).
La peculiarità di una comunicazione di tipo Full-Duplex è di trasmettere e ricevere dati simultaneamente tra gli "interlocutori", tipicamente un servizio server-side ed uno script client-side. Il numero degli interlocutori è tuttavia "illimitato", ma dipende anche dalla capacità del sistema di contattare tutti i client potenzialmente connessi.
Nell'ambito dello sviluppo di applicazioni web, che devono disporre di funzionalità real-time, websockets è la tecnologia HTML5 di riferimeno cui le applicazioni web dovrebbero tendere in futuro.
Implementare una comunicazione client-server prevede lo sviluppo di una controparte server in grado di conttattare collettivamente (broadcast) o puntualmente (unicast) tutti i client attualmente connessi.
Esistono diverse alternative, in diversi linguaggi, per implementare il servizio server-side, ma in questo script ci concentreremo solo sulla controparte client che, aderendo al protocollo ws (o wss in caso di websocket secure) sarà in grado di comunicare con il server indipendentemente dalla tecnologia con cui quest'ultimo è stato sviluppato.
var serverUrl = "ws://myserverurl.com/"; //use wss: for secure websockets var output; function initialize() { websocket = new WebSocket(serverUrl); //setting up event handlers websocket.onopen = function(event) { onOpen(event); }; websocket.onclose = function(event) { onClose(event); }; websocket.onmessage = function(event) { onMessage(event); }; websocket.onerror = function(event) { onError(event); }; } function onOpen(event) { writeLog("Successfully connected to: " + serverUrl); var message = { senderName: "Andrea", messageText: "Hi!", position: getPosition()}; var rawData = JSON.stringify(message); sendMessage(rawData); } function onClose(event) { writeLog("Disconnected"); } function onMessage(event) { var message = JSON.parse(event.data); writeLog('Message received from' + message.senderName + ': ' + message.messageText); } function onError(event) { writeLog('Error:' + event.data); } function sendMessage(message) { writeLog("sending message: " + message); websocket.send(message); } function writeLog(message) { console.log(message); }
Come dimostrato nello script, è sufficiente istanziare un oggetto WebSocket e sottoscrivere gli eventi significativi che questo espone. In questo esempio abbiamo utilizzato un oggetto serializzato in formato JSON e trasmesso come testo.
Trattandosi di una comunicazione di tipo streamed, non si presentano limiti di dimensioni dei messaggi, leggendo le specifiche si apprende anche che il limite della lunghezza di un frame è di 2^63 byte, ma un messaggio può essere composto da un numero illimitato di frame. Tuttavia il browser metterà a disposizione l'intero messaggio, tramite script, solo alla fine della ricezione effettuando implicitamente il buffering.
Le applicazioni che possono beneficiare di questa tecnologia sono molteplici, pensiamo ad esempio a tutti gli scenari in cui occorra inviare una notifica ad un client, magari al completamento di una elaborazione, alla disponibilità di un prodotto o magari l'invio di un mesaggio/comunicazione mirata sulla base delle interazioni degli altri utenti (es. consultazione dello stesso annuncio, invio di un offerta etc.).
Le specifiche delle WebSocket API sono disponibili qui:
http://www.w3.org/TR/websockets/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Implementare il throttling in ASP.NET Core
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Eseguire una GroupBy per entity in Entity Framework
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare Tailwind CSS all'interno di React: installazione
Limitare le richieste lato server con l'interactive routing di Blazor 8
Verificare la provenienza di un commit tramite le GitHub Actions
Potenziare Azure AI Search con la ricerca vettoriale
Elencare le container images installate in un cluster di Kubernetes
Eseguire attività pianificate con Azure Container Jobs
Utilizzare politiche di resiliency con Azure Container App
Creare gruppi di client per Event Grid MQTT
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)