Web Worker sa TypeScript

Articles

Ipinaliliwanag ng artikulong ito ang Web Workers sa TypeScript.

Maaari kang matuto tungkol sa konsepto ng Web Workers at iba't ibang mga tip sa paggamit gamit ang mga halimbawa.

YouTube Video

Worker sa TypeScript

Sa TypeScript, ang Worker ay isang mekanismo para magsagawa ng pagpoproseso sa background, hiwalay sa pangunahing thread, gamit ang JavaScript Web Workers API. Pinapayagan nitong maisagawa ang mabibigat na kalkulasyon at asynchronous na gawain nang hindi naaapektuhan ang operasyon ng user interface.

Ang Worker ay gumagana nang sabay sa pangunahing thread (UI thread) at maaaring magpalitan ng data sa pagitan ng mga thread sa pamamagitan ng mga mensahe. Kahit sa TypeScript, maaari mong gamitin ang Worker habang sumusulat ng type-safe na code.

Pangunahing Paggamit ng Worker

Paggawa ng Worker

Gumawa ng isang Worker na instance at isagawa ang tinukoy na script. Karaniwan, ang script ay tinutukoy sa isang hiwalay na file.
Pagpapalitan ng Mensahe

Magpadala at tumanggap ng mga mensahe sa pagitan ng pangunahing thread at ng Worker thread gamit ang postMessage at onmessage.

Halimbawa: Pangunahing Implemantasyon ng Worker

worker.ts: Script para sa 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};

main.ts: Script para gamitin ang Worker sa Pangunahing Thread

 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

Sa halimbawang ito, ang worker.ts ay tumatakbo sa isang hiwalay na thread, kinakalkula ang kabuuan ng num1 at num2, at ibinabalik ito sa pangunahing thread. Tinatanggap ng pangunahing thread ang resulta at inilalabas ito sa console.
Kapag tinukoy mo ang type: 'module', ang Worker script ay itinuturing bilang isang ES module, kaya maaari mong gamitin ang import at export. Pinapayagan ka nitong pamahalaan ang mga estruktura ng module nang hindi gumagamit ng tradisyonal na importScripts().

Mga Dapat Isaalang-alang Kapag Gumagamit ng Workers sa TypeScript

Pagdaragdag ng Mga Depinisyon ng Uri

Sa TypeScript, tukuyin ang mga uri ng data upang matiyak ang ligtas na pakikihalubilo sa aspeto ng uri sa panahon ng pagpapadala at pagtanggap ng mga mensahe.

 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);

Sa pamamagitan ng pagtukoy sa uri ng parameter ng MessageEvent, malinaw mong maitatakda ang uri ng data na tatanggapin. Pinapayagan nitong magpalitan ng data nang may type safety.

Pagse-set Up ng Webpack o Vite

Kapag gumagamit ng Worker sa TypeScript, maaaring kailanganin ang mga bundler tulad ng Webpack o Vite. Sa pamamagitan ng paggamit ng mga tool na ito, maaari mong maayos na i-bundle ang Worker script at gawing magagamit ito mula sa pangunahing thread.

Halimbawa, kapag gumagamit ng Vite, gamitin ang import.meta.url upang maayos na ma-import ang Worker.

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

Tinitiyak nito na ang naka-bundle na Worker script ay maayos na na-load, kaya maaaring magamit ang Worker para sa pagproseso.

Mga Pagsasaalang-alang sa Messaging at Concurrency

Pagkopia ng Data

Kapag nagpapadala at tumatanggap ng mga mensahe sa pagitan ng pangunahing thread at Worker thread, ang data ay kinokopya. Kapag humahawak ng mga masalimuot na data gaya ng mga object, kailangang isaalang-alang ang kahusayan. Ang madalas na pagpapalitan ng malalaking dami ng data ay maaaring magpahina sa performance.
Transferable na Mga Bagay

Ang ilang mga object, katulad ng ArrayBuffer, ay tinatawag na mga Transferable na object. Ang mga Transferable na object ay maaaring ilipat sa Worker sa halip na kopyahin kapag nagpapadala ng mensahe. Pinapayagan ka nitong maiwasan ang dagdag na proseso ng pagkokopya ng data.

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)

Kapag ipinasa ang [buffer] bilang pangalawang argument sa worker.postMessage(), ang buffer ay ililipat sa Worker imbes na kopyahin.
Pagkatapos nito, ang buffer sa main thread ay magiging walang laman (may byteLength na 0) at tanging Worker na lang ang maaaring gumamit nito.

Pagtigil ng isang Worker

Ang Worker ay dapat itigil pagkatapos gamitin upang mabawasan ang paggamit ng memorya. Maaari mong itigil ang isang Worker gamit ang terminate method.

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

Ang code na ito ay nagtatapos sa Worker gamit ang terminate na method.

Paghawak ng Exception sa Worker

Kung may naganap na error sa loob ng isang Worker, maaari mong hawakan ang error gamit ang onerror na event.

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};

Ang code na ito ay sumasalo at humahawak ng mga error na nangyayari sa loob ng Worker gamit ang onerror na event.

Buod

Sa pamamagitan ng paggamit ng Worker sa TypeScript, maaari mong isagawa ang mabibigat na gawain sa background habang nananatiling maayos ang pangunahing thread. Sa paggamit ng type definitions, ang pagpapalitan ng mensahe ay maaari ring gawin nang may ligtas sa uri. Sa pagsasaalang-alang sa pagpapalitan ng data at pamamahala ng mga thread, maaari kang makamit ang mga pagpapabuti sa performance at mahusay na concurrency.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Fetch/XMLHttpRequest sa TypeScript Service Worker sa TypeScript