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)

[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.010.0 3.54.011.5
3.7/5 - (3 votes)

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et