TypeScript'te Web Worker

Bu makale, TypeScript'te Web Worker'ları açıklamaktadır.

Web Worker kavramı ve çeşitli kullanım ipuçlarını örneklerle öğrenebilirsiniz.

YouTube Video

TypeScript'te Worker

TypeScript'te bir Worker, JavaScript Web Worker API'sinden yararlanarak, ana iş parçacığından ayrı olarak arka planda işlem gerçekleştirme mekanizmasıdır. Bu, yoğun hesaplamaların ve asenkron görevlerin kullanıcı arayüzünün işleyişini etkilemeden gerçekleştirilebilmesini sağlar.

Bir Worker, ana iş parçacığı (UI iş parçacığı) ile paralel çalışır ve iş parçacıkları arasında mesajlar yoluyla veri alışverişi yapabilir. TypeScript'te bile, tür güvenli bir kod yazarken Worker kullanabilirsiniz.

Worker'ın Temel Kullanımı

1. Worker Oluşturma

   Worker örneği oluşturun ve belirtilen betiği çalıştırın. Normalde, betik ayrı bir dosyada tanımlanır.

2. Mesaj Alışverişi

   postMessage ve onmessage kullanarak ana iş parçacığı ile Worker iş parçacığı arasında mesaj gönderip alabilirsiniz.

Örnek: Temel Worker Uygulaması

1. worker.ts: Worker için Betik

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: Ana İş Parçacığında Worker Kullanımı için Betik

 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

• Bu örnekte, worker.ts ayrı bir iş parçacığında çalışır, num1 ve num2'nin toplamını hesaplar ve bunu ana iş parçacığına geri döndürür. Ana iş parçacığı sonucu alır ve konsola çıktısını verir.
• type: 'module' olarak belirttiğinizde, Worker betiği bir ES modülü olarak yorumlanır ve import ile export kullanmanıza olanak tanır. Bu, geleneksel importScripts() kullanmadan modül yapılarını yönetmenizi sağlar.

TypeScript'te Worker Kullanırken Dikkat Edilmesi Gereken Noktalar

Tür Tanımlamalarını Eklemek

TypeScript'te, mesaj gönderme ve alma sırasında tür güvenli etkileşimi sağlamak için veri türlerini tanımlayın.

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

• MessageEvent tür parametresini belirleyerek alınacak verinin türünü açıkça tanımlayabilirsiniz. Bu, verilerin tür güvenliği ile değişimini sağlar.

Webpack veya Vite Kurulumu

TypeScript'te Worker kullanırken, Webpack veya Vite gibi paketleyicilere ihtiyaç duyulabilir. Bu araçları kullanarak, Worker betiğini doğru bir şekilde paketleyebilir ve ana iş parçacığından erişilebilir hale getirebilirsiniz.

Örneğin, Vite kullanırken, Worker'ı doğru şekilde içe aktarmak için import.meta.url kullanın.

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

• Bu, paketlenmiş Worker betiğinin doğru şekilde yüklenmesini ve Worker'dan yararlanılarak işlem yapılmasını sağlar.

Mesajlaşma ve Paralellik Konusunda Dikkat Edilmesi Gerekenler

1. Veri Kopyalama

   Ana iş parçacığı ile Worker iş parçacığı arasında mesaj gönderip alırken, veriler kopyalanır. Nesneler gibi karmaşık verilerle çalışırken verimlilik göz önünde bulundurulmalıdır. Büyük miktarda verilerin sık sık değiştirilmesi performansı düşürebilir.

2. Transferable Nesneleri

   ArrayBuffer gibi bazı nesnelere Transferable (Aktarılabilir) nesneler denir. Transferable (Aktarılabilir) nesneler, mesajlaşma sırasında kopyalanmak yerine İşçi'ye aktarılabilir. Bu, veri kopyalama yükünden kaçınmanızı sağlar.

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)

• worker.postMessage() fonksiyonuna ikinci argüman olarak [buffer] geçirildiğinde, buffer kopyalanmak yerine İşçi'ye aktarılır.

• Bundan sonra, ana iş parçacığındaki buffer boş hale gelir (byteLength 0 olur) ve yalnızca İşçi tarafından kullanılabilir.

Bir Worker'ı Sonlandırma

Worker kullanılma sonrası bellek tüketimini en aza indirmek için sonlandırılmalıdır. Worker'ı terminate metodu ile sonlandırabilirsiniz.

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

• Bu kod, terminate yöntemi kullanarak İşçi'yi sonlandırır.

Worker'da Hata Yönetimi

Worker içinde bir hata meydana gelirse, hatayı onerror olayı ile ele alabilirsiniz.

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

• Bu kod, İşçi içinde oluşan hataları onerror olayı ile yakalar ve yönetir.

Özet

TypeScript'te Worker kullanarak, ana iş parçacığını sorunsuz tutarken ağır görevleri arka planda çalıştırabilirsiniz. Tip tanımları kullanarak, mesaj alışverişleri de tip güvenli bir şekilde yapılabilir. Veri alışverişi ve iş parçacığı yönetimine dikkat ederek performans iyileştirmeleri ve verimli paralellik sağlayabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video