HTML5 Web Worker

  Web worker lar  HTML5 le gelen yeni özelliklerden birisidir. Bildiğiniz gibi  tüm javascript kodları   browser da ki  kullanıcı  arayüzle beraber aynı thread de çalışmaktadır. Eger  uzun süreli çalışan  bir javascript kodumuz varsa  ,  bu kodu tamamlanana kadar , browser kullanıcı inputlarına  cevapsız kalmakta.  Bundan dolayı da bir işlem tamamlana kadar kullanıcı hiçbir şey yapamamaktadır.

      Web worker lar  bu aşamada  bizi bu sıkıntıdan kurtarmaktadır. Web worker lar  javascript kodunun  browser kullanıcı arayüzünün  çalıştığı thread dan farklı bir thread’a çalıştırmayı sağlarlar.  Bu sayede uzun süreli scriptler   kullanıcı ile browser etkileşimini etkilemeden ( örnek olarak butona tıklayabilme , scrollu aşagı yukarı haraket ettirme )  çalıştırılabilirler.

 Ayrıca  , web worker’ lar  ayrı thread de çalıştığından  , onlar   DOM yada diğer UI  foksiyonlarına erişemez.

     Dedicated Worker  ve Shared Worker olmak üzere  iki tip mevcuttur. Dedicated worker   hangi parent ile yaratıldıysa  sadece o parent’a bağlıdır , ve sadece bu parent’le haberleşebilir. Shared Worker ise  aynı domaindeki  bir çok parent veya worker’ lar ile haberleşebilir.

      Bir shared worker yaratıltıkdan sonra ve birkaç parent (window da diyebiliriz ) ile bağlantı kurduktan sonra en az 1 tane parent aktifse  , bu worker da aktif kalacaktır. Yani Window1  bir shared worker yaratır.  Window2  bu worker ‘ a bağlanır.  Window1 kapatıldıktan sonra , hala window2  worker’ a bağlı olduğundan  , worker  thread aktif kalacaktır.

Worker’ ların Yaratılışı

     Worker’ ları yaratmadan önce ilk olarak browserın bu özelliği  destekleyip desteklemediğini kontrol etmemiz gerekiyor. Aşağıdaki kod örneğindeki gibi bu kontrolü yapabiliriz.

     
      if (window.Worker) { /* Dedicated Workers are supported */ } 
     if (window.SharedWorker) { /* Shared Workers are supported */ }

   Worker yaratmak için , biz ilk olarak bir tane worker nesnesi yaratırız. Worker nesnesi yaratılırken parametre olarak worker çalıştıracağı kodu içeren javascript dosyasının dizini/yeri verilir. Dedicated ve Shared Workerlar’ ın yaratılışı aşağıdaki koddaki gibidir.

   var aDedicatedWorker = new Worker(“location of javascript file ”);  
   var aSharedWorker = new SharedWorker(“location of javascript file”);

  Bir asal sayıları görüntüleme scriptini aşağıdaki örnekteki gibi worker kullanarak yapabiliriz. İlk olarak görüntülenecek ve worker ‘ı yaratacak kod kısmı:


Worker’ın çalıştıracağı script kodu (number_crunching_worker.js):

    var n = 1;
     search: while (true) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1) {
	if (n % i == 0)
	    continue search;
    }
    postMessage(n);  // worker  client/parent’ a  mesaj gonderir  
  }

   Workerları durdurmak için client tarafında worker.terminate() , worker tarafında ise self.close() metotları çağrılır. Workerların çalışması bittikten , bu meteodlar çağrılmalıdır. Bu sayede boş yere kaynak kullanmamış oluruz. Hem dedicated hem shared workerlar için durum aynıdır.

             
   aDedicatedWorker.terminate();
   aSharedWorker.terminate();

Workerlarda  Veri Alışverişi

Worker ile onun parent’i arasındaki haberleşme mesajlaşma yoluyla olmaktadır. Mesaj yani veri string ‘den birkaç formatta olabilir (JSON object,javascript objects Date gibi ve Transfrable Objects File ,Blob,ArrayBuffer gibi).

1- Client bakımından

Worker’ı yaratan client/parent  bu worker mesaj gönderdiği zaman aşagıdaki gibi mesajı alabilir. Mesajı almak için yaratılan worker nesnesinin “onmessage”   event handler’ ına bir foksiyon set edilir(yukardaki kod örneğinde de görebiliriz)

   
  function OnWorkerMessage(evt){ 
    alert(“Message received from the worker: ” + evt.data)
  };   
  aDedicatedWorker.onmessage = OnWorkerMessage;

Client dan worker’a message gödermek için  worker nesnesinin “postMessage()” methodu çağrılır.

      
  var objData = { "employeeId": 103, 
                   "name": "Sam Smith", 
                   "dateHired": new Date(2006,11,15)};            
  aDedicatedWorker.postMessage(objData);
   2- Worker bakımından

Worker client’ dan gelen mesajı  kendi “onmessage” event handleri aşağıdaki kod gibi  bir foksiyon set edilir.

       
    self.onmessage = function(evt) {
      //gönderilen mesaja evt.data ile ulaşabiliriz
   }

Aynı  şekilde  workerdan client’a message gondermek için  workerin çalıştırdıgı javascript kodunun içerisinde “postMessage()” yada “self.postMessage()”  metodları çağrılır.

  Not: Veriler gönderilirken   , verinin aynısı kopyalanıp  gönderilir. Yani veri referans ile değil , copy ile taşınır. Çoğu browser lar kopyalama işini yaparken structured cloning algorithm kullanmaktadır .

Workerların diğer extra özellikleri

– Workerlar çalıştırdıkları kod başka javascript dosyalarına ihtiyaç duyabilir. Bu durumda aşağıdaki kod kullanılır.

               
   importScripts(“file1.js”,”file2.js”);

Eğer birden fazla file import ediyorsa , bunları paralel/asekron olarak download eder , ama sırasıyla çalıştırır.
– Workerların çalıştıracagı kod (Worker thread de diyebiliriz) setTimeout, clearTimeOut, setInterval , clearInterval metotlarını kullanabilir.
– Workerlar XMLHttpRequest nesnesine erişebilirler. Bu sayede kullanıcının browserin performansını etkilemeden sekron ve asekron requestler yapılabilir. Worker daki XMLHttpRequest objesi datayı “responseText” ile döner. “responseXML” değeri her zaman null dönmektedir.
– Worker thread’ler “location” ve “navigator nesnelerine erişebilirler , ama DOM, window , document, parent nesnelerine erişemez.

 


 window.onload = function () {
          dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
          dp.SyntaxHighlighter.HighlightAll('code')};

No Comments

Post a Comment

Comment
Name
Email
Website