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
Gestire i null nelle reactive form tipizzate di Angular
Criptare la comunicazione con mTLS in Azure Container Apps
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare database e servizi con gli add-on di Container App
Utilizzare gli snapshot con Azure File shares
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Generare file per il download da Blazor WebAssembly
Utilizzare la libreria Benchmark.NET per misurare le performance
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub