HTML API Ders_5 Web Workers (Web İşçileri)

HTML5 Web Workers (Web İşçileri)

Bir web worker; arkaplanda, sayfanın performansını etkilemeden çalışan bir JavaScript kodudur.

Html sayfalarındaki scriptler (javascript kodları) çalışmaya başladığında, script bitene kadar html sayfası tepkisiz kalır. Fakat bir web worker çalışırken böyle olmaz. Siz, sayfade gezinmeye devam edersiniz, bu arada da web worker işini yapmaya devam eder.

Tarayıcı Desteği

Aşağıdaki tabloda, web tarayıcılarının hangi versiyondan itibaren web worker özelliğini desteklediğini görüyorsunuz:

API
Web Workers	4.0	10.0	3.5	4.0	11.5

HTML Web Workers Örneği

Aşağıdaki örnek, arkaplanda, sayma yapan, basit bir web worker örneğidir:

<p>Say: <output id="sonuc"></output></p>

<button onclick="baslatWorker()">Worker'ı Baslat</button> 

<button onclick="durdurWorker()">Worker'ı Durdur</button>

<script>

var w;

function baslatWorker() {

    if(typeof(Worker) !== "undefined") {

        if(typeof(w) == "undefined") {

            w = new Worker("demo_workers.js");

        }

        w.onmessage = function(event) {

            document.getElementById("sonuc").innerHTML = event.data;

        };

    } else {

        document.getElementById("sonuc").innerHTML = "Üzgünüm tarayıcınız Web Workers API'sını desteklemiyor...";

    }

}

function durdurWorker() { 

    w.terminate();

    w = undefined;

}

</script>

Yukarıdaki kodları inceleyelim:

• Önce, tarayıcı desteği var mı diye kontrol ettik: 

if(typeof(Worker) !== "undefined") {
    // evet! Web worker destekleniyor!
    // kodarımız buraya.....
} else {
    // Hayır! Web Worker desteği yok..
}

• Web worker dosyası oluşturduk ve adını "demo_workers.js" koyduk. Bu dosya, basit bir sayma işlemi yapan bir javascript dosyasıdır. İçerdiği kodlar şöyledir:

var i = 0;

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

zamanSayar();

Yukarıdaki kodda, postMessage() metoduna dikkat çekmek istiyorum. Bu metot, html sayfasında bir mesaj göstermek için kullanılır.

NOT: Web workerlar, normalde bu kadar basit işlemler için değil, CPU (işlemci) odaklı görevler için kullanılır.

Bir Web Worker Objesi Oluşturmak

Artık bir worker olarak kullanabileceğimiz bir .js sayfamız var. Bu sayfayı bir worker sınıfı içinde çağırırsak, artık bir işçimiz olur. Aşağıdaki kodlar, bir kontrol yaptıktan sonra bir worker sınıfı oluşturup .js dosyasını worker yapıyor:

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

Bundan sonra, web workerdan mesaj alıp mesaj gönderebiliriz.

Bir event listener (olay dinleyici) olan onmessage ekleyerek worker dosyasındaki mesajı html dökümanımızda gösteriyoruz:

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

Web Worker Sonlandırma

Bir worker, kendi scriptinde bir sonlanma zamanı içermiyorsa, çalışmaya başladıktan sonra durmadan devem edecektir. Bu yüzden workerler için bir sonlandırma işlemine ihtiyaç duyarız.

Bu işlem için terminate() metodunu kullanıyoruz:

w.terminate();

Web Worker'ı Yeniden Kullanmak

Eğer sonlandırdıktan sonra, worker değişkenini "undefined" olarak ayarlarsak, workeri yeniden kullanabiliriz. 

w = undefined;

Web Workerlar ve DOM

Workerlar, harici dosyalarda ise aşağıdaki JavaScript objelerine geçişleri yoktur:

• Window objesi
• Document objesi
• Parent objesi

sonraki ders için tıklayınız