HTML5 Web Workers(işçiler) adındaki özellik ile sayfaya sonradan dahil edebileceğimiz javascript dosyaları içerisindeki workers(işçiler) sayesinde parçaladığımız ayrı javascript dosyalarını birer işçi gibi görevlendirebilmekteyiz.

İçerik göster

HTML5 Web Workers

Makalenin devamında worker’dan işçi diye bahsedilecektir.

Şimdi örneğimizde kullandığımız kodları açıklamaya başlayalım.

Öncelikle index.js içerisinde ilk if bloğunda typeof(Worker) kodu ile tarayıcının Web İşçileri özelliğini destekleyip desteklemediği kontrol ediliyor. Eğer destekliyorsa if bloğuna girip İşçi oluşturacağız worker.js dosyasından ve oluşturduğumuz bu işçinin yaptığı işleri alabilmek için İşçiden türetilen nesnenin onmessage fonksiyonunu kullanacağız işcinin yaptığı çıktıları dışarı sunabilmesi yani onmessage fonksiyonuna aktarabilmesi için postMessage fonksiyonunu kullanacağız.

Web Works Örneği

Html Sayfamız

<html>
    <head>
        <title>Web Workers</title>
    </head>
    <body>
        <p>
            Count: <output id="res"></output>
        </p>
        <button onclick="startWorker()">Start Worker</button> 
        <button onclick="stopWorker()">Stop Worker</button>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

<html>

<head>

<title>Web Workers</title>

</head>

<body>

<p>

Count: <output id="res"></output>

</p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

</body>

</html>

Web Worker Desteği Kontrolü

İşlemleri yapmadan önce tarayıcının desteğinin olup olmadığını alttaki kod ile kontrol ediyoruz.

if (typeof(Worker) !== "undefined") {
    // Evet! Web worker destekleniyor!
    // Kodlarınız.....
} else {
    // Üzgünüz! Web worker desteklenmiyor..
}

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

// Evet! Web worker destekleniyor!

// Kodlarınız.....

} else {

// Üzgünüz! Web worker desteklenmiyor..

}

Not: Tarayıcının HTML5, CSS3 özelliklerinin tarayıcı tarafından desteğinin olup olmadığını kontrol etmek için Modernizr javascript kütüphanesinide kullanabilirsiniz.

İşçi Örneği Alma

Gördüğünüz gibi Worker(İşçi) sınıfından bir nesne örneği alıyoruz ve işçiye ait iş tanımı worker.js içerisinde yer alıyor. Daha öncede bahsettiğimiz gibi işçinin yaptığı işleri dışarı sunabilmesi onmessage fonksiyonunu kullanacağız ve böylelikle sürekli işçiyi dinliyor yani yaptığı işi takip ediyor olacağız ve çıktı sunuldukça tetiklenecek bu fonksiyon.

var w = new Worker("worker.js");
w.onmessage = function (event){
    document.querySelector("#res").innerText = event.data;
}

var w = new Worker("worker.js");

w.onmessage = function (event){

document.querySelector("#res").innerText = event.data;

}

Yeni İşçi Tanımı

İşçinin yaptığı işi sunabilmesi için postMessage fonksiyonunu kullanacağız suınacağımız işi ilk parametreye giriyoruz.

var i=0;

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

timedCount();

var i=0;

function timedCount() {

i=i+1;

postMessage(i);

setTimeout("timedCount()", 500);

}

timedCount();

İşçiyi Yok Etme

Biraz canice başlık gibi 🙂 Şimdi işçi ile çalışma sözleşmemizi bitirelim bunun için yapmamız gereken terminate adlı fonksiyonu kullanmak hemen örnek üzerinden görelim.

function stopWorker() {
    w.terminate();
    w = undefined;
}

function stopWorker() {

w.terminate();

w = undefined;

}

Buraya kadar anlattığımız tüm kodları tek bir sayfa halinde gözatalım(worker ayrı bir dosyada olacak onun adıda worker.js). İsterseniz kopyala yapıştır yöntemi ile deneyebilirisin

Not: kodu denemek için bir sunucuya ihtiyacınız var direk html dosyasına tıklayıp tarayıcıda açtığınızda “cannot be accessed from origin” şeklinde bir hata almanız olası bir durumdur. Çalıştırabilmek için herhangi bir sunucuya ihtiyacınız var editörlerden bazıları sayfada göster deyince local sunucu oluşturuyor örneğin Brackets editörünü bunun için kullanabilirsiniz buradan gözatabilirsiniz.

HTML(index.html)

<html>
    <head>
        <title>Web Workers</title>
    </head>
    <body>
        <p>
            Count: <output id="res"></output>
        </p>
        <button onclick="startWorker()">Start Worker</button> 
        <button onclick="stopWorker()">Stop Worker</button>
        <script>
            var w;

            function startWorker() {
                if (typeof (Worker) !== "undefined") {
                    // Evet! Web worker destekleniyor!
                    // Kodlarınız.....
                    w = new Worker("worker.js");
                    w.onmessage = function (event) {
                        document.querySelector("#res").innerText = event.data;
                    }
                } else {
                    // Üzgünüz! Web worker desteklenmiyor..
                }
            }

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

<html>

<head>

<title>Web Workers</title>

</head>

<body>

<p>

Count: <output id="res"></output>

</p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

var w;

function startWorker() {

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

// Evet! Web worker destekleniyor!

// Kodlarınız.....

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

w.onmessage = function (event) {

document.querySelector("#res").innerText = event.data;

}

} else {

// Üzgünüz! Web worker desteklenmiyor..

}

function stopWorker() {

w.terminate();

w = undefined;

}

</script>

</body>

</html>

JAVASCRIPT(worker.js)

var i=0;

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

timedCount();

var i=0;

function timedCount() {

i=i+1;

postMessage(i);

setTimeout("timedCount()", 500);

}

timedCount();

[fa class=”fa-github fa-lg”] Projenin detayına ulaşmak için buraya tıklayıp github’a erişebilirsiniz.

Tarayıcı Desteği

API	[fa class=”fa-chrome fa-2x”]	[fa class=”fa-edge fa-2x”]	[fa class=”fa-firefox fa-2x”]	[fa class=”fa-safari fa-2x”]	[fa class=”fa-opera fa-2x”]
Web Workers	4.0	10.0	3.5	4.0	11.5

3.7/5 - (3 votes)

Noavard dedi ki:
9 Aralık 2016, 21:07
Gerçekten yararlı makale için teşekkürler. Bir sorum var: Tüm tarayıcılar bu özelliği destekliyor mu yoksa tarayıcıdan bağımsız mı?
Yanıtla
- Murat ÖNER dedi ki:
  9 Aralık 2016, 21:12
  Teşekkür ederim makalenin sonunda hangi tarayıcı sürümlerinden itibaren desteğe başladığı belirtilmiştir ve tüm tarayıcılar tarafından desteklenmektedir.
  Yanıtla

Kategoriler

Bloga e-posta ile abone ol

HTML5 Web Workers

HTML5 Web Workers

Web Works Örneği

Html Sayfamız

Web Worker Desteği Kontrolü

İşçi Örneği Alma

Yeni İşçi Tanımı

İşçiyi Yok Etme

HTML(index.html)

JAVASCRIPT(worker.js)

Tarayıcı Desteği

You may also like...

3 Responses

Bir yanıt yazın Yanıtı iptal et

HTML5 Web Workers

Web Works Örneği

Html Sayfamız

Web Worker Desteği Kontrolü

İşçi Örneği Alma

Yeni İşçi Tanımı

İşçiyi Yok Etme

HTML(index.html)

JAVASCRIPT(worker.js)

Tarayıcı Desteği

You may also like...

Web Tasarımcılar İçin Masaüstü Editörleri

3 Responses

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin