JavaScript Academy · Ders

postMessage ile Mesajlaşma

Ana iş parçacığı ile worker arasında iletişim kurun.

2. ders / 413 adım

postMessage ile Mesajlaşma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

İletilerle İletişim Kurma

Ana iş parçacığı ile worker ayrı belleklere sahip olduğundan, iletiler göndererek iletişim kurarlar. postMessage yöntemi veri gönderir; message olayı ise bu veriyi alır.

Worker'a Gönderme

Ana iş parçacığından worker.postMessage(data) çağrısını yapın. Veri; sayılar, dizeler, nesneler ve diziler gibi neredeyse her değer olabilir.

const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });

Çalışanın İçinde Alma

Çalışanın içinde message olayını işleyin. Gönderilen değer event.data üzerinde gelir.

// worker.js
self.onmessage = (event) => {
  const { task, numbers } = event.data;
  console.log('worker received task:', task);
};

Yanıt Gönderme

Çalışan bir sonuç hesaplar ve kendi postMessage yöntemiyle (self veya örtük global kullanarak) geri gönderir.

// worker.js
self.onmessage = (event) => {
  const { numbers } = event.data;
  const total = numbers.reduce((a, b) => a + b, 0);
  self.postMessage(total); // send result back
};

Yanıtı Alma

Ana iş parçacığına döndüğünüzde sonucu almak için çalışan nesnesindeki message olayını dinleyin.

worker.onmessage = (event) => {
  console.log('result from worker:', event.data);
};

addEventListener Biçimi

onmessage özelliği yerine addEventListener('message', ...) kullanabilirsiniz. Bu, birden çok dinleyiciye olanak tanır.

worker.addEventListener('message', (event) => {
  console.log('got:', event.data);
});

Yapılandırılmış Kopyalama

Mesajlar paylaşılmak yerine yapılandırılmış kopyalama algoritması kullanılarak kopyalanır. Bu algoritma nesneleri, dizileri, Haritaları, Kümeleri, Tarihleri ve türlendirilmiş dizileri işler; ancak işlevleri, DOM düğümlerini veya sınıf yöntemlerini işlemez.

// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.

Mesaj Protokolü

Birden çok işlem için çalışanın ne yapacağını bilmesi amacıyla bir type alanı gönderin. Bu, tek bir çalışanın esnek kalmasını sağlar.

// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });

// worker.js:
self.onmessage = (e) => {
  if (e.data.type === 'multiply') {
    self.postMessage(e.data.a * e.data.b);
  }
};

İstekleri Eşleştirme

Çok sayıda mesaj gönderirken yanıtların ilgili isteklerle eşleştirilebilmesi için bir id ekleyin. Çalışan, kimliği geri gönderir.

// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.

İki Yönlü İletişim

Mesajlaşma çift yönlü ve eşzamansızdır. Sayfa, çalışan kullanıcı arayüzünü engellemeden kısmi sonuçları geri gönderirken görev göndermeyi sürdürebilir.

// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });

Dinleyicileri Temizleme

Bir çalışana artık ihtiyaç kalmadığında, özellikle tekrar tekrar çalışan oluşturan tek sayfalı uygulamalarda sızıntıları önlemek için dinleyicileri kaldırın ve çalışanı sonlandırın.

worker.onmessage = null;
worker.terminate();

Hızlı Kontrol

Çalışanlar arası mesajlaşma konusundaki anlayışınızı sınayın.

İnteraktif derste cevapla

Özet

Çalışanlar arası mesajlaşmayı öğrendiniz:

postMessage(data) gönderir; message olayı alır.
Veriler event.data üzerinde gelir.
Her iki taraf da gönderim yapabilir; böylece iletişim çift yönlü olur.
Veriler paylaşılmak yerine yapılandırılmış kopyalama yoluyla kopyalanır.
Birden çok görev için type/id protokolü kullanın.

Sırada, sıfır kopyalamayla veri aktarımı için aktarılabilir nesneler var.

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 59
Dersler: 200

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“postMessage ile Mesajlaşma” dersi ücretsiz mi?

Evet — “postMessage ile Mesajlaşma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“postMessage ile Mesajlaşma” dersinde ne öğreneceğim?

Ana iş parçacığı ile worker arasında iletişim kurun. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“postMessage ile Mesajlaşma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön