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
Hosting di componenti WebAssembly in un'applicazione Blazor static
Cambiare la chiave di partizionamento di Azure Cosmos DB
Usare il colore CSS per migliorare lo stile della pagina
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Utilizzare la session affinity con Azure Container Apps
Creazione di componenti personalizzati in React.js con Tailwind CSS
Eseguire attività con Azure Container Jobs
Le novità di Angular: i miglioramenti alla CLI
Criptare la comunicazione con mTLS in Azure Container Apps
Disabilitare automaticamente un workflow di GitHub (parte 2)
Inizializzare i container in Azure Container Apps
Sfruttare lo streaming di una chiamata Http da Blazor
I più letti di oggi
- Microsoft annuncia Windows "TrustBridge"
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Estrarre dati randomici da una lista di oggetti in C#
- Usare il colore CSS per migliorare lo stile della pagina
- Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione