Web Worker in TypeScript

Questo articolo spiega i Web Worker in TypeScript.

Puoi imparare il concetto di Web Workers e vari consigli d'uso con esempi.

YouTube Video

Worker in TypeScript

In TypeScript, un Worker è un meccanismo per eseguire processi in background, separatamente dal thread principale, sfruttando l'API JavaScript dei Web Worker. Questo consente di eseguire calcoli complessi e attività asincrone senza influenzare il funzionamento dell'interfaccia utente.

Un Worker opera in parallelo con il thread principale (thread UI) e può scambiare dati tra thread tramite messaggi. Anche in TypeScript, puoi utilizzare il Worker scrivendo codice con sicurezza sui tipi.

Uso di base del Worker

1. Creazione di un Worker

   Crea un'istanza di Worker ed esegui lo script specificato. Normalmente, lo script è definito in un file separato.

2. Scambio di messaggi

   Invia e ricevi messaggi tra il thread principale e il thread del Worker utilizzando postMessage e onmessage.

Esempio: Implementazione di base di un Worker

1. worker.ts: Script per il Worker

1// worker.ts
2self.onmessage = (event) => {
3    const data = event.data;
4    const result = data.num1 + data.num2;
5    self.postMessage(result); // Return the result to the main thread
6};

2. main.ts: Script per utilizzare il Worker nel thread principale

 1// main.ts
 2const worker = new Worker(
 3    new URL('./worker.ts', import.meta.url),
 4    { type: 'module' }
 5);
 6
 7worker.onmessage = (event) => {
 8    console.log("Result from worker:", event.data); // Receive message from the worker
 9};
10
11worker.postMessage({ num1: 10, num2: 20 }); // Send message to the worker

• In questo esempio, worker.ts viene eseguito in un thread separato, calcola la somma di num1 e num2, e la restituisce al thread principale. Il thread principale riceve il risultato e lo stampa sulla console.
• Quando specifichi type: 'module', lo script Worker viene interpretato come un modulo ES, permettendoti di usare import ed export. Questo ti permette di gestire le strutture dei moduli senza utilizzare il tradizionale importScripts().

Punti da considerare quando si utilizzano i Worker in TypeScript

Aggiunta di definizioni di tipo

In TypeScript, definisci i tipi di dati per garantire un'interazione sicura durante l'invio e la ricezione dei messaggi.

 1// Define data types
 2interface WorkerData {
 3    num1: number;
 4    num2: number;
 5}
 6
 7interface WorkerResult {
 8    result: number;
 9}
10
11// worker.ts
12self.onmessage = (event: MessageEvent<WorkerData>) => {
13    const data = event.data;
14    const result = data.num1 + data.num2;
15    const message: WorkerResult = { result };
16    self.postMessage(message); // Send the result in a type-safe manner
17};
18
19// main.ts
20const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
21
22// Type the event from the worker
23worker.onmessage = (event: MessageEvent<WorkerResult>) => {
24  console.log("Result from worker:", event.data); // event.data is number
25};
26
27// Send typed data to the worker
28const message: WorkerData = { num1: 10, num2: 20 };
29worker.postMessage(message);

• Specificando il parametro di tipo di MessageEvent, puoi definire chiaramente il tipo di dati da ricevere. Questo consente di scambiare dati garantendo la sicurezza sui tipi.

Configurazione di Webpack o Vite

Quando si utilizza Worker in TypeScript, potrebbero essere necessari bundler come Webpack o Vite. Utilizzando questi strumenti, è possibile concatenare correttamente lo script Worker e renderlo disponibile dal thread principale.

Ad esempio, quando si utilizza Vite, utilizzare import.meta.url per importare correttamente il Worker.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });

• Questo assicura che lo script Worker concatenato venga caricato correttamente, consentendo l'elaborazione che sfrutta Worker.

Considerazioni per la messaggistica e la concorrenza

1. Copia dei dati

   Quando si inviano e ricevono messaggi tra il thread principale e il thread Worker, i dati vengono copiati. Quando si gestiscono dati complessi come oggetti, è necessario considerare l'efficienza. Lo scambio frequente di grandi quantità di dati può degradare le prestazioni.

2. Oggetti Transferable

   Alcuni oggetti, come ArrayBuffer, sono chiamati oggetti Transferable. Gli oggetti Transferable possono essere trasferiti al Worker invece di essere copiati durante la messaggistica. Questo consente di evitare il sovraccarico della copia dei dati.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3const buffer = new ArrayBuffer(1024);
4worker.postMessage(buffer, [buffer]); // Transfer ownership to the Worker
5
6console.log(buffer.byteLength); // 0 (ownership moved)

• Passando [buffer] come secondo argomento a worker.postMessage(), il buffer viene trasferito al Worker invece di essere copiato.

• Dopo di ciò, il buffer nel thread principale diventa vuoto (con byteLength 0) e può essere utilizzato solo dal Worker.

Terminare un Worker

Il Worker dovrebbe essere terminato dopo l'uso per minimizzare il consumo di memoria. È possibile terminare un Worker utilizzando il metodo terminate.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2// ...
3
4worker.terminate(); // Terminate the Worker

• Questo codice termina il Worker utilizzando il metodo terminate.

Gestione delle eccezioni in Worker

Se si verifica un errore all'interno di un Worker, è possibile gestire l'errore utilizzando l'evento onerror.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3worker.onerror = (error) => {
4    console.error("Error in Worker:", error.message);
5};

• Questo codice intercetta e gestisce gli errori che si verificano all'interno del Worker utilizzando l'evento onerror.

Riepilogo

Utilizzando Worker in TypeScript, è possibile eseguire attività pesanti in background mantenendo il thread principale fluido. Utilizzando le definizioni di tipo, anche lo scambio di messaggi può essere effettuato in modo type-safe. Prestando attenzione allo scambio di dati e alla gestione dei thread, è possibile ottenere miglioramenti delle prestazioni e una concorrenza efficiente.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video