Pekerja Web dalam TypeScript

Articles

Artikel ini menerangkan Pekerja Web dalam TypeScript.

Anda boleh belajar tentang konsep Web Workers dan pelbagai tip penggunaan dengan contoh-contoh.

YouTube Video

Pekerja dalam TypeScript

Worker dalam TypeScript ialah satu mekanisme untuk menjalankan proses di latar belakang, berasingan daripada benang utama, menggunakan API Pekerja Web JavaScript. Ini membolehkan pengiraan tugas berat dan tugas asinkron dijalankan tanpa menjejaskan operasi antara muka pengguna.

Worker beroperasi selari dengan benang utama (UI thread) dan boleh bertukar data antara benang melalui mesej. Walaupun dalam TypeScript, anda boleh menggunakan Worker semasa menulis kod yang selamat jenis.

Penggunaan Asas Pekerja

Mencipta Pekerja

Cipta instance Worker dan jalankan skrip yang ditentukan. Biasanya, skrip ditakrifkan dalam fail berasingan.
Pertukaran Mesej

Hantar dan terima mesej antara benang utama dan benang Worker menggunakan postMessage dan onmessage.

Contoh: Pelaksanaan Pekerja Asas

worker.ts: Skrip untuk Pekerja

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: Skrip untuk menggunakan Pekerja dalam Benang Utama

 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

Dalam contoh ini, worker.ts berjalan dalam benang berasingan, mengira jumlah num1 dan num2, dan memulangkannya ke benang utama. Benang utama menerima hasil dan mengeluarkannya ke konsol.
Apabila anda menentukan type: 'module', skrip Worker akan ditafsirkan sebagai modul ES, membolehkan anda menggunakan import dan export. Ini membolehkan anda mengendalikan struktur modul tanpa menggunakan importScripts() yang tradisional.

Perkara Penting untuk Dipertimbangkan Semasa Menggunakan Pekerja dalam TypeScript

Menambah Definisi Jenis

Dalam TypeScript, tentukan jenis data untuk memastikan interaksi yang selamat jenis semasa penghantaran dan penerimaan mesej.

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

Dengan menentukan parameter jenis MessageEvent, anda boleh mentakrifkan jenis data yang akan diterima dengan jelas. Ini membolehkan data dipertukarkan dengan keselamatan jenis.

Menyediakan Webpack atau Vite

Apabila menggunakan Worker dalam TypeScript, pengikat seperti Webpack atau Vite mungkin diperlukan. Dengan menggunakan alat ini, anda boleh menggabungkan skrip Worker dengan betul dan menjadikannya boleh diakses dari utas utama.

Sebagai contoh, apabila menggunakan Vite, gunakan import.meta.url untuk mengimport Worker dengan betul.

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

Ini memastikan bahawa skrip Worker yang telah digabungkan dimuatkan dengan betul, membolehkan pemprosesan menggunakan Worker.

Pertimbangan untuk Pemesejan dan Kejadian Serentak

Penyalinan Data

Apabila menghantar dan menerima mesej antara utas utama dan utas Worker, data akan disalin. Apabila berurusan dengan data kompleks seperti objek, kecekapan perlu dipertimbangkan. Pertukaran data dalam kuantiti besar secara kerap boleh mengurangkan prestasi.
Objek Transferable

Beberapa objek, seperti ArrayBuffer, dipanggil objek Transferable. Objek Transferable boleh dipindahkan kepada Worker dan bukan disalin semasa penghantaran mesej. Ini membolehkan anda mengelakkan beban tambahan dari penyalinan 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)

Dengan menghantar [buffer] sebagai argumen kedua kepada worker.postMessage(), buffer akan dipindahkan kepada Worker dan bukan disalin.
Selepas itu, buffer pada thread utama akan menjadi kosong (dengan byteLength 0) dan hanya boleh digunakan oleh Worker.

Menghentikan Worker

Worker perlu dihentikan selepas digunakan untuk mengurangkan penggunaan memori. Anda boleh menghentikan Worker dengan menggunakan kaedah terminate.

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

Kod ini menamatkan Worker dengan menggunakan kaedah terminate.

Pengendalian Pengecualian dalam Worker

Jika ralat berlaku dalam Worker, anda boleh mengendalikan ralat tersebut menggunakan acara 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};

Kod ini menangkap dan mengendalikan ralat yang berlaku di dalam Worker dengan menggunakan acara onerror.

Ringkasan

Dengan menggunakan Worker dalam TypeScript, anda boleh melaksanakan tugas berat di latar belakang sambil mengekalkan kelancaran utas utama. Dengan menggunakan definisi jenis, pertukaran mesej juga boleh dilakukan secara selamat jenis. Dengan memberi perhatian kepada pertukaran data dan pengurusan utas, anda boleh mencapai peningkatan prestasi dan kejadian serentak yang cekap.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Fetch/XMLHttpRequest dalam TypeScript Service Worker dalam TypeScript