HTML

Web Workers API di HTML: Cara Membuat dan Sintak Codenya

Web worker adalah JavaScript yang berjalan pada background namun tidak memengaruhi kinerja laman web.

Apa itu Web Worker?

Saat menjalankan script pada halaman HTML, halaman web menjadi tidak responsif sampai script selesai dirunning.

Web worker adalah JavaScript yang berjalan dibackground, terlepas dari script lain, dan tidak akan memengaruhi kinerja laman. Kita dapat terus melakukan apapun yang diinginkan: mengklik, memilih sesuatu, dll. Saat web worker berjalan di background.

Browser Support

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh Web Workers.

APIChromeEdgeFirefoxSafariOpera
Web Workers4.010.03.54.011.5

Contoh Web Workers HTML

Contoh di bawah ini menunjukan cara membuat web worker sederhana yaitu menghitung angka pada background:

<!DOCTYPE html>
<html>
<body>

<p>Menghitung Angka: <output id="result"></output></p>
<button >var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Maaf, browser Anda tidak mendukung Pekerja Web...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Periksa Dukungan Web Worker pada Browser

Sebelum membuat web worker, periksa apakah browser pengguna mendukungnya, gunakan :

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

Membuat File Web Worker

Sekarang, coba membuat buat web worker pada JavaScript eksternal.

Di sini, kita membuat script yang dapat menghitung. Script disimpan di file “demo_workers.js”:

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

Bagian yang terpenting dari kode di atas adalah method postMessage() – yang digunakan untuk mengirim pesan kembali ke halaman HTML.

Catatan: Biasanya web worker tidak digunakan untuk script sederhana seperti itu, tetapi untuk tugas CPU yang lebih intensif.

Membuat Objek Web Worker

Setelah sebelumnya membuat file web worker, selanjutnya file web worker perlu dipanggil dari halaman HTML.

Baris kode berikut berfungsi untuk memeriksa apakah worker sudah tersedia, jika tidak ada – maka akan dibuat objek web worker baru dan menjalankan kode pada “demo_workers.js”:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Kemudian baru dapat mengirim dan menerima pesan dari web worker.

Tambahkan pemroses event “onmessage” ke web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Saat web worker memposting pesan, kode dalam event listener akan dijalankan. Data dari web worker disimpan di event.data.

Menghentikan Web Worker

Saat objek web worker dibuat, ia akan terus menjalankan pesan (bahkan setelah script eksternal selesai running) hingga diakhiri.

Untuk menghentikan web worker gunakan metode terminate ():

w.terminate();

Reuse Web Worker

Jika variabel worker diatur menjadi undefined setelah worker dihentikan, maka kita dapat menggunakan kembali kode:

w = undefined;

Contoh Code Web Worker Lengkap

Setelah melihat kode worker pada file .js., maka di bawah ini adalah kode untuk halaman HTML:

<!DOCTYPE html>
<html>
<body>

<p>Menghitung jumlah: <output id="result"></output></p>
<button >

Web Workers dan DOM

Karena web worker berada pada file eksternal, maka web worker tidak memiliki akses ke objek JavaScript berikut:

  • Objek window
  • Objek document
  • Objek parent

Catur Kurnia Sari

Share
Tags: APIhtml