Labkom99.com – Web Workers HTML5 dapat mengaktifkan aplikasi WEB untuk memiliki kemampuan pemrosesan pada background. Dukungannya untuk multi-threading sangat bagus, sehingga aplikasi javascript yang menggunakan HTML5 dapat memanfaatkan sepenuhnya keunggulan CPU multi-core.
API Web workers dapat memproses file javascript secara asinkron dan otonom. Web workers adalah utas yang memproses file JavaScript. Kita dapat menetapkan tugas yang memakan waktu ke HTML5 Web Workers API untuk ditangani, untuk menghindari kotak dialog pop-up dari layar yang menjalankan skrip dan lain-lain.
Meskipun Web Worker sangat power full namun bukanlah obat mujarab, dan tidak berdaya untuk beberapa hal. Misalnya, skrip yang dijalankan di Web Workers tidak dapat mengakses objek window ( window.document) halaman ini . Dengan kata lain, Web Workers tidak dapat langsung mengakses halaman Web dan API DOM. Meskipun Web Workers tidak akan menyebabkan UI browser berhenti merespons, masih menggunakan siklus CPU dan menyebabkan respons sistem yang lambat.
Membuat Web Workers
Sebelum menggunakan API Web Workers, periksa apakah browser Anda mendukungnya.
function isSupportWebWorkers() {
if(typeof(worker) != 'undefined') {
document.geElementById('support').innerHTML = " Your browser supported HTML5 Web Workers!";
}
} Anda dapat membuat Web Workers dengan kode berikut:
var worker = new Worker("assets/worker.js"); Worker()Parameter yang diteruskan dalam metode ini adalah alamat URL dari file JavaScript yang akan dijalankan.
Baca Juga : Belajar HTML5 Element Drag And Drop HTML5
Berkomunikasi Dengan Web Workers HTML5
Anda dapat menggunakan API Perpesanan HTML5 untuk berkomunikasi dengan Web Worker. Data dapat dikirim dan diterima melalui API postMessage. API postMessage juga dapat berkomunikasi lintas frame dan jendela. Sebagian besar objek JavaScript dapat dikirim melalui postMessage, kecuali objek dengan referensi melingkar. Berikut ini contoh kodenya:
var worker = new Worker("assets/worker.js");
worker.onmessage = function(event) {
alert("Reply: " + event.data);
}
worker.postMessage("Hello worker!"); Pada kode di atas, objek Workers pertama kali dibuat. Kemudian fungsi pemantauan peristiwa onmessage ditambahkan ke Web Workers ini, yang akan dipanggil ketika halaman yang membuatnya mengirimkan informasi. Terakhir, worker.postMessage() informasi dikirim ke Web Workers melalui metode ini. Pesan respons dari Web Workers harus serupa dengan berikut ini:
this.onmessage = function(event) {
postMessage("Reply from web worker");
} Kode ini adalah bagian dari kode JavaScript yang dijalankan oleh Web Workers. This Kata kunci mengacu pada Web Worker itu sendiri. Onmessage Pemroses event telah ditambahkan ke Web Workers. Berbeda dengan membuat Web Workers di halaman dan menambahkan onmessageevent listener, meskipun keduanya menambahkan event listener pada instance objek Web Workers. Web Workers menanggapi informasi melalui postMessage().
Baca Juga : Belajar HTML5 Dan Messaging HTML5
Data JSON Interaktif
Dalam contoh Web Workers sebelumnya, browser menggunakan string saat mengkomunikasikan informasi. Jika Anda ingin mengirimkan objek JSON, Anda dapat menggunakan metode JSON.stringify() untuk mengenkode objek JSON, kemudian menggunakan metode JSON.parse() untuk mendekode.
Metode baru disediakan di Mozilla MDN untuk bertukar nilai atau objek JSON.
Implementasi Web Workers
Berikut ini adalah kode implementasi web workers lengkap:
this.onmessage = function(event) {
postMessage("Reply from web worker");
}
//Implementation of web worker thread code
setInterval(function() { runEveryXSeconds() }, 5000);
function runEveryXSeconds() {
postMessage("Calling back at : " + new Date().getTime());
} Web Workers ini menerapkan pemantauan pesan dan mengirim pesan ke halaman setiap 5 detik setelah memulainya.
Aplikasi Dan Batasan Web Workers
Seperti yang disebutkan sebelumnya, Web Workers bukanlah obat mujarab. Ada beberapa batasan dalam penggunaan Pekerja Web. Seorang Web Workers tidak dapat mengakses elemen DOM dari halaman yang membuatnya. Berikut beberapa tindakan yang dapat dilakukan di skrip Web Workers:
1. Gunakan waktu onmessage untuk mendengarkan pesan.
2. Gunakan fungsi postMessage() untuk mengirim pesan.
3. Gunakan XMLHttpRequest untuk mengirim permintaan AJAX.
4. Gunakan setTimeout() dan setInterval() untuk membuat timer.
5. Soket Web。
6. Database SQL Web
7. Web Workers
8. Gunakan importScripts() untuk mengimpor lebih banyak skrip js.
Baca Juga : Belajar HTML5 Dan Penyimpanan Data HTML5
Impor Skrip Javascript Di Web Workers
Anda dapat menggunakan fungsi importScripts() untuk mengimpor skrip javascript di Web Workerz untuk digunakan. importScripts() Ini adalah fungsi Web Workers yang sangat spesial. Berikut ini contohnya:
importScripts("myscript.js");
importScripts("script1.js", "script2.js"); importScripts() Anda dapat mengimpor satu atau lebih skrip js melalui fungsi. Pemuatan skrip bersifat sinkron dan akan dijalankan secara bersamaan.
Seorang Web Workers hanya dapat digunakan oleh halaman yang membuatnya. Jika Anda ingin berbagi Web Workers di antara beberapa halaman, Anda dapat menggunakannya Shared Workers. Satu SharedWorkers dapat diakses oleh semua halaman dari asal yang sama (nama domain yang sama).
Baca Juga : Belajar HTML5 Berbagai Bidang Form Dengan HTML5
Anda dapat membuatnya seperti ini SharedWorkers:
var worker = new SharedWorker("shared-worker.js"); Parameter SharedWorkers yang dilewatkan dalam objek adalah string jalur dari file js yang akan dieksekusi.
Buat parameter dengan URL yang sama di semua halaman SharedWorkers, yang akan membuat semuanya terhubung ke halaman yang sama SharedWorkers.
Di SharedWorkers ada konsep yang disebut pelabuhan, berbagai SharedWorkers halaman referensi dapat dihubungkan melaluinya.
Berikut adalah contoh cara SharedWorker listener pesan di port:
var worker = new SharedWorker("/html5/web-worker-shared.jsp");
worker.port.addEventListener("message",
function(event) {
alert(event.data);
}
, false
);
worker.port.start(); Kode di atas pertama-tama membuatnya SharedWorkers, lalu SharedWorker menambahkan listener event di port tersebut dan akhirnya memulai port itu juga. Jika Anda tidak memulainya, Anda tidak dapat mengirim pesan SharedWorkers ke sana.
Saat port diaktifkan, halaman Anda akan mendengarkan pesan di port tersebut. Anda dapat mengirim pesan port.postMessage() ke melalui fungsi SharedWorkers. Berikut ini contoh kodenya:
worker.port.postMessage("First Message"); Baca Juga : Belajar HTML5 Dan Geolocation HTML5
Seorang SharedWorkers Web Workers biasa sesuai kebutuhan untuk mencapai fungsinya dalam file JavaScript. Berikut ini adalah kode implementasi yang relatif lengkap:
var ports = [] ;
onconnect = function(event) {
var port = event.ports[0];
ports.push(port);
port.start();
port.addEventListener("message",
function(event) { listenForMessage(event, port); } );
}
listenForMessage = function (event, port) {
port.postMessage("Reply from SharedWorker to: " + event.data);
}
//Implementation of shared worker thread code
setInterval(function() { runEveryXSeconds() }, 5000);
function runEveryXSeconds() {
for(i = 0; i < ports.length; i++) {
ports[i].postMessage("Calling back at : "
+ new Date().getTime());
}
} Kode di atas pertama kali membuat array untuk menyimpan SharedWorkers port dari semua halaman yang terhubung.
Kemudian sebuah fungsi onconnect ditentukan, yang akan dipanggil SharedWorker ketika sebuah halaman terhubung.
Fungsi onconnect tersebut pertama-tama memperoleh port dari halaman koneksi, menyimpannya dalam larik port dan kemudian memulai port tersebut. Terakhir, fungsi onconnectmenambahkan listener pesan di portal. Perlu dicatat di sini bahwa dia membuat fungsi anonim untuk setiap halaman koneksi. Fungsi anonim ini akan menangkap port dari halaman yang terhubung dan meneruskannya sebagai parameter ke fungsi listenForMessage() tersebut.
Selanjutnya, sebuah fungsi listenForMessage() didefinisikan, fungsi ini menggunakan string sederhana untuk merespon port tempat pesan diterima.
Akhirnya, SharedWorkers pengatur waktu diatur, dan runEveryXSeconds() fungsinya dijalankan setiap 5 detik .
Fungsi runEveryXSeconds() ini hanya mengulang semua port yang terhubung dan mengirim pesan ke port tersebut.
Kode di atas hanyalah implementasi paling sederhana. Implementasi lanjutan dapat memperoleh data dari server dan mendistribusikan data ke semua halaman SharedWorkers yang terhubung.
