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
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Potenziare Azure AI Search con la ricerca vettoriale
Load test di ASP.NET Core con k6
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Implementare il throttling in ASP.NET Core
Miglioramenti agli screen reader e al contrasto in Angular
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Routing statico e PreRendering in una Blazor Web App
Utilizzare la libreria Benchmark.NET per misurare le performance
Eseguire query verso tipi non mappati in Entity Framework Core
Gestire il colore CSS con HWB