Nello scorso script (https://www.aspitalia.com/script/1458/Effettuare-Stream-Risposta-ASP.NET-Core-Tramite-IAsyncEnumerable.aspx) abbiamo visto come, tramite IAsyncEnumerable, possiamo creare un endpoint con supporto allo streaming in ASP.NET Core.
Ma come sfruttare una simile funzionalità dal client, per esempio in Blazor, per rendere più veloce e "responsive" il caricamento dei dati?
Diamo un'occhiata alla classica pagina FetchData.razor, che invoca una chiamata in Get e visualizza il risultato in una tabella. Se provassimo a chiamare l'endpoint che abbiamo creato nello script precedente, vedremmo Blazor attendere il completamento dell'intera risposta prima di mostrare il risultato sullo schermo.
Per poter sfruttare lo streaming, possiamo però creare un extension method di HttpClient che effettui una richiesta in maniera leggermente differente:
public static class HttpExtensions { public async static IAsyncEnumerable<T> GetAsyncEnumerable<T>(this HttpClient http, string url) { using var request = new HttpRequestMessage(HttpMethod.Get, url); // abilitiamo lo streaming request.SetBrowserResponseStreamingEnabled(true); // configuriamo il completamento della risposta alla ricezione // dell'header using var response = await http.SendAsync(request, HttpCompletionOption.ResponseHeadersRead); response.EnsureSuccessStatusCode(); using var responseStream = await response.Content.ReadAsStreamAsync(); IAsyncEnumerable<T> items = JsonSerializer.DeserializeAsyncEnumerable<T>(responseStream, new JsonSerializerOptions { PropertyNameCaseInsensitive = true, DefaultBufferSize = 128 }); await foreach (T item in items) { yield return item; } } }
Il nostro metodo generico GetAsyncEnumerable<T> restituisce un IAsyncEnumerable del tipo specificato. Al suo interno, come prima cosa, dobbiamo configurare HttpClient per attivare lo streaming del browser. A questo punto possiamo inviare la richiesta, indicando che vogliamo ottenere la risposta immediatamente dopo aver letto l'header (per default il metodo aspetta la ricezione dell'intero content, che invece è proprio ciò che vogliamo evitare).
Una volta che abbiamo creato il ResponseStream, possiamo sfruttare una nuova funzionalità di JsonSerializer che permette di deserializzare "al volo" uno stream ancora incompleto in un IAsyncEnumerable.
In questo modo, non dobbiamo far altro che iterare su quest'ultimo, e restituire gli elementi man mano che diventano disponibili.
Grazie a questo metodo, possiamo modificare il codice in FetchData.razor in questo modo:
private List<WeatherForecast>? forecasts; protected override async Task OnInitializedAsync() { var results = Http.GetAsyncEnumerable<WeatherForecast>("https://localhost:7127/weatherforecast"); forecasts = new List<WeatherForecast>(); await foreach (WeatherForecast item in results) { forecasts.Add(item); this.StateHasChanged(); } }
Qui, come possiamo notare, non dobbiamo far altro che aggiornare la lista di WeatherForecast aggiungendo i nuovi elementi quando vengono letti, e invocare StateHasChanged per ognuno di essi così da rigenerare l'HTML della pagina, e vedere quindi la tabella popolarsi gradualmente man mano che il server ci invia i dati.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Limitare le richieste lato server con l'interactive routing di Blazor 8
Generare un hash con SHA-3 in .NET
Effettuare il refresh dei dati di una QuickGrid di Blazor
Eseguire attività pianificate con Azure Container Jobs
Utilizzare Model as a Service su Microsoft Azure
Short-circuiting della Pipeline in ASP.NET Core
Eseguire i worklow di GitHub su runner potenziati
Usare le navigation property in QuickGrid di Blazor
.NET Conference Italia 2024
Eseguire le GitHub Actions offline
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Migliorare la sicurezza dei prompt con Azure AI Studio