JavaScript Academy · Pelajaran

Perpesanan dengan postMessage

Berkomunikasi antara thread utama dan worker.

Perpesanan dengan postMessage adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Berkomunikasi dengan Pesan

Karena utas utama dan worker memiliki memori terpisah, keduanya berkomunikasi dengan mengirimkan pesan. Metode postMessage mengirim data; peristiwa message menerimanya.

Mengirim ke Worker

Dari utas utama, panggil worker.postMessage(data). Data tersebut dapat berupa hampir semua nilai: angka, string, objek, atau larik.

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

Penerimaan di dalam worker

Di dalam worker, tangani peristiwa message. Nilai yang dikirim tiba melalui event.data.

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

Mengirim Balasan

worker menghitung hasil dan mengirimkannya kembali dengan postMessage miliknya sendiri (menggunakan self atau global implisit).

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

Menerima Balasan

Di utas utama, dengarkan message pada objek worker untuk mendapatkan hasilnya.

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

Gaya addEventListener

Anda dapat menggunakan addEventListener('message', ...) sebagai pengganti properti onmessage. Ini memungkinkan beberapa pendengar.

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

Kloning Terstruktur

Pesan disalin menggunakan algoritme kloning terstruktur, bukan dibagikan. Algoritme ini menangani objek, larik, Peta, Himpunan, Tanggal, dan larik bertipe, tetapi tidak menangani fungsi, simpul DOM, atau metode kelas.

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

Protokol Pesan

Untuk beberapa operasi, kirim bidang type agar worker mengetahui tindakan yang harus dilakukan. Ini membuat satu worker tetap fleksibel.

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

Mencocokkan Permintaan

Saat mengirim banyak pesan, sertakan id agar balasan dapat dicocokkan dengan permintaannya. worker mengirimkan kembali pengidentifikasi tersebut.

// 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.

Percakapan Dua Arah

Pesan bersifat dua arah dan asinkron. Halaman dapat terus mengirim tugas sementara worker mengirimkan kembali hasil sementara secara bertahap, semuanya tanpa memblokir antarmuka pengguna.

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

Membersihkan Pendengar

Saat worker tidak lagi diperlukan, hapus pendengar dan terminate worker tersebut untuk menghindari kebocoran memori, terutama dalam aplikasi satu halaman yang berulang kali membuat worker.

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

Pemeriksaan Singkat

Uji pemahaman Anda tentang pengiriman pesan pada worker.

Rangkuman

Anda telah mempelajari pengiriman pesan pada worker:

postMessage(data) digunakan untuk mengirim; peristiwa message digunakan untuk menerima.
Data tiba melalui event.data.
Kedua pihak dapat mengirim pesan, sehingga komunikasi berlangsung dua arah.
Data disalin melalui kloning terstruktur, bukan dibagikan.
Gunakan protokol type/id untuk banyak tugas.

Berikutnya, objek yang dapat ditransfer untuk data tanpa penyalinan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Perpesanan dengan postMessage” gratis?

Ya — teks lengkap “Perpesanan dengan postMessage” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Perpesanan dengan postMessage”?

Berkomunikasi antara thread utama dan worker. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Perpesanan dengan postMessage” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy