HTML5 Web Workers

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.

HTML5 Web Workers

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

Web Worker Desteği Kontrolü

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

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.

Yeni İşçi Tanımı

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

İşç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.

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)

JAVASCRIPT(worker.js)

Projenin detayına ulaşmak için buraya tıklayıp github’a erişebilirsiniz.

Tarayıcı Desteği

 API  
 Web Workers 4.010.0 3.54.011.5
HTML5 Web Workers
3.67 (73.33%) 3 oy

Murat ÖNER

1989 yılında Kocaelinin Dilovası ilçesinde doğdum ilkokul ve lise eğitimimi Kocaeli’de aldım, önlisans üniversite eğitimimi Mehmet Akif Ersoy Üniversitesi Gölhisar Meslek Yüksekokulu’nda bilgisayar programcılığı bölümünde yaptım. Üniversite dönemi boyunca Microsoft'un student partner projesinde yer aldım ve diğer student partner öğrencileri ile birçok farklı projede yer aldım. Üniversite eğitimi tamamlandıktan sonra staj yapmış olduğum Ries Technologies şirketinde yazılım geliştirici ve web designer olarak görev aldım ardından Gen Yazılım firmasında ERP ve HBYS sistemleri ile ilgili yazılım geliştirmeye devam ettim. Şuan aktif olarak mobil, web ve masaüstü uygulamalar geliştirmeye devam etmekteyim.

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Noavard dedi ki:

    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ı?

    • Murat ÖNER dedi ki:

      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.

Bir Cevap Yazın

%d blogcu bunu beğendi: