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
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Utilizzare Copilot con Azure Cosmos DB
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Applicare un filtro per recuperare alcune issue di GitHub
Creare gruppi di client per Event Grid MQTT
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Effettuare il binding di date in Blazor
Disabilitare automaticamente un workflow di GitHub (parte 2)
Estrarre dati randomici da una lista di oggetti in C#
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Cambiare la chiave di partizionamento di Azure Cosmos DB