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
Dimensionare dinamicamente una TextArea in Blazor
Creare template HTML con Slim
Cercare del testo con Azure Cosmos DB SQL
Conteggiare le connessioni SignalR aperte in Blazor Server
Uso dei design-time data nelle applicazioni della Universal Windows Platform
Eseguire più query in un solo comando usando la libreria Entity Framework Plus
Abilitare il drag&drop delle righe di una tabella in Angular
Scrivere HTML con Emmet
A quick tour around Azure Dev Spaces
Le novità di Entity Framework Core 5
Tracciare il body delle richieste fallite con Application Insights in .NET Core
Caricare le immagini di una pagina in lazy loading con Angular