Nelle applicazioni web abbiamo spesso la necessità di effettuare elaborazioni complesse. Il primo pensiero è delegare al server lo svolgimento di questi calcoli, utilizzando invece i web workers sarà possibile eseguire operazioni che richiedano un alto numero di risorse direttamente sul client, senza intaccare la fluidità della nostra applicazione.
Per poter creare un web worker, all'interno di applicazione Angular, che possa essere utilizzato dal componente app.component.ts, possiamo ricorrere alla CLI con il seguente comando.
ng generate web-worker app
Verranno effettuate delle modifiche per includere i web workers nella build, modificato il file app.component.ts e verrà inoltre creato il web worker app/app.worker.ts, nel quale potremo scrivere le operazioni da eseguire e restituire il risultato invocando il metodo postMessage.
postMessage(response);
All'interno di AppComponent, alla fine del file, troveremo le righe che ci consentiranno di creare e utilizzare il web worker; queste dovranno essere spostate dove necessario, all'interno del componente.
La comunicazione tra le parti è basata sugli eventi, per avere accesso al risultato della funzione è necessario implementare una callback che intercetti la risposta del metodo postMessage.
worker.onmessage = ({ data }) => { console.log(`page got message: ${data}`); };
Successivamente possiamo eseguire le operazioni.
worker.postMessage('hello');
I web workers possono essere utili per eseguire calcoli su vaste liste, cache di dati, operazioni su testo come formattazione o controllo grammaticale, compressione/decompressione file o elaborazione di immagini. All'interno di una applicazione Angular la creazione dall'infrastruttura è facilitata dalla CLI che ci consente di implementarli con poche righe di codice.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
.NET Conference Italia 2023
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Gestire i null nelle reactive form tipizzate di Angular
Miglioramenti agli screen reader e al contrasto in Angular
Reactive form tipizzati con FormBuilder in Angular
Ottimizzazione dei block template in Angular 17
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Limitare le richieste lato server con l'interactive routing di Blazor 8
Disabilitare automaticamente un workflow di GitHub
Utilizzare Tailwind CSS all'interno di React: primi componenti
Gestire liste di tipi semplici con Entity Framework Core
I più letti di oggi
- Nuova versione per jQuery e prima alpha per jQuery Mobile
- Paginare i risultati con QuickGrid in Blazor
- Utilizzare il trigger SQL con le Azure Function
- Eliminare una determinata proprietà da un oggetto JavaScript
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Modern web apps with Blazor