Negli script precedenti abbiamo visto come implementare tecniche basate su WebSocket, Server-sent Events e long polling, per poter avere comunicazioni in real time tra client e server.
E' utile sottolineare, ancora una volta, che a parte WebSocket, che apre un canale full duplex tra client e server, le altre tecniche sono dei workaround più o meno complessi, che comunque raggiungono l'obiettivo, dato che supportano browser dove le API di WebSocket non sono presenti.
In scenari del genere, non tutti i browser supportano in maniera simile le specifiche, per cui è necessario implementare un meccanismo di fallback, che sfrutti quello che ogni browser è in grado di offrire.
Fermo restando che nel caso di WebSocket è necessario un approccio differente, perché la comunicazione è full-duplex, ci sono diverse library in giro che offrono questa opportunità, come ad esempio l'EventSource Polyfill di Remy Sharp, disponibile su:
https://github.com/remy/polyfills/blob/master/EventSource.js
Questa library consente di sfruttare Server-sent Events, long polling e polling, con una sola API:
<script src="EventSource.js"></script> <script type="text/javascript">var es = new EventSource('myserver.api'); es.onopen = function() { // canale aperto } es.onerror = function() { // errore } es.onmessage = function (e) { // messaggio ricevuto dal server var msg = e.data; }; </script>
Questa tecnica raggiungere una buona compatibilità, dato che è in grado di supportare IE 7 e versioni molto vecchie di tutti gli altri browser.
Oltre alla parte lato client, è poi necessario che il server sia in grado di supportare lo switch automatico, sfruttando le differenti header che vengono inviate, in base al tipo di richiesta effettuata. In tal senso, l'implementazione varia in maniera significativa a seconda del framework che viene utilizzato lato server.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la session affinity con Azure Container Apps
Le novità di Angular: i miglioramenti alla CLI
Verificare la provenienza di un commit tramite le GitHub Actions
Sfruttare lo streaming di una chiamata Http da Blazor
Reactive form tipizzati con modellazione del FormBuilder in Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Usare un KeyedService di default in ASP.NET Core 8
Configurare policy CORS in Azure Container Apps
Reactive form tipizzati con FormBuilder in Angular
Usare una container image come runner di GitHub Actions
Copiare automaticamente le secret tra più repository di GitHub