HTML5 Web Çalışanı (Workers)
Web çalışanı, sayfanın performansını etkilemeden arka planda çalışan bir JavaScript kodudur.
Web Çalışanı Nedir?
HTML sayfasında bir script çalıştırıldığında, script bitene kadar sayfa kullanıcıya cevap veremez hale gelir.
Web çalışanı, sayfanın performansını etkilemeden diğer script'lerden bağımsız olarak arka planda çalışan bir JavaScript kodudur.
İstediğiniz başka her türlü şeyi yapmaya devam edebilirsiniz: tıklama, nesneleri seçme vs...
Tarayıcı Desteği
Internet Explorer 10, Firefox, Chrome, Safari ve Opera destekler.
HTML5 Web Workers Örneği
Aşağıdaki örnek, arka planda sayı sayan basit bir web çalışanı oluşturur:
Tarayıcı Desteğini Kontrol Etme
Bir web worker oluşturmadan önce bu işlemi mutlaka yapın:
if(typeof(Worker) !== "undefined")
{
// Evet! Web Worker Destekleniyor!
// Kod satırları.....
}
else
{
// Tarayıcınız Web Worker özelliğini desteklemiyor.
}
Bir Web Worker Dosyası Oluşturma
Şimdi, kendi harici JavaScript web worker dosyamızı oluşturalım.
Burda, sayı sayan bir script oluşturuyoruz. Script, "demo_workers.js" dosyası içinde saklanacak:
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Yukarıdaki kodda önemli olan kısım, HTML dosyasına mesaj göndermek için kullanılan postMessage() metodudur.
Not: Normalde web çalışanları böyle basit scriptler için kullanılmaz.
Daha çok yoğun ve ağır CPU (işlemci) işlemleri için kullanılır.
Bir Web Worker Nesnesi Oluşturmak
Artık bir web worker dosyamız var, şimdi yapmamız gereken onu bir HTML dosyası ile çağırmak.
Aşağıdaki satırlar bir worker olup olmadığını kontrol eder, eğer yoksa yeni bir tane yaratır ve "demo_workers.js" içindeki kodları çalıştırır:
if(typeof(w) == "undefined")
{
w = new Worker("demo_workers.js");
}
Artık worker'dan mesaj alabilir ya da worker'a mesaj gönderebiliriz.
Web Çalışanına bir tane "onmessage" olay dinleyicisi (event listener) ekleyin.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Web çalışanı bir mesaj gönderdiğinde, event listener içindeki kod çalışır. Web çalışanından alınan veri, event.data içerisinde saklanır.
Web Çalışanını Bitirmek / Silmek
Bir Web Worker nesnesi oluşturulduğunda, silinene kadar mesajları dinlemeye (harici script sonradan kapatılsa bile) devam eder.
Bir web çalışanını silmek ve tarayıcının/bilgisayarın kaynaklarını serbest bırakmak için terminate() metodunu kullanın:
Web Çalışanı ve DOM (Document Object Model - Döküman Nesne Modeli)
Web Çalışanları harici dosyalar oldukları için, aşağıdaki JavaScript nesnelerine ulaşamazlar:
window object
document object
parent object