/home/Śpiechu->Blog

This post is a kind of expe­ri­ment. It’s not a strict trans­la­tion of my pre­vious post writ­ten in polish. I’m just curious how “uncle Google” will behave and if he send me some visi­tors Notice that english is my second lan­gu­age, so you will have to bear some my lan­gu­age mista­kes. In case this pro­ject suc­ce­edes, I will write some more english stuff.

I’m going to write about one of HTML5 new featu­res — Web Wor­kers. These are inten­ded to pro­vide some heavy com­pu­ta­tions in the back­gro­und and — what is most impor­tant — web brow­ser rema­ins respon­sive. It means that you won’t expe­rience any slo­we­ness. When Web Wor­ker ends its job, it noti­ces brow­ser about the out­come. The point is to use user’s CPU which is rarely full used in oppo­site to server’s.

By the way, mul­ti­th­re­ading in brow­ser is not a big deal, Face­book uses it to pro­vide you instant mes­sa­ging or wall refre­shing without relo­ading the whole page.

Offi­cial draft of Web Wor­kers API informs that wor­kers have many restric­tions, such as no access to DOM or (in our case) jQu­ery object. You may think of it as a clo­sed envi­ron­ment. Howe­ver you are able to com­mu­ni­cate in both ways via JSON and post­Mes­sage() function.

Take a look at our goal. We can con­trol spaw­ning of new Wor­kers, it state update inte­rvals and the moment of ter­mi­na­tion. To ensure that our brow­ser sup­ports Web Wor­kers, we’ll use nice library spe­cia­li­zed in chec­king a lot of modern HTML featu­res — Moder­nizr. In both cases user reads alert mes­sage if he can use wor­kers or not.

Basicly we need two files: wor­ker and main html file. Below is Java­Script code of timeworker.js:

var workerNo;

onmessage = function(e) {
    workerNo = e.data.workerNo;
    changeInterval(e.data.timer);
}

function changeInterval(interval) {
    setInterval("gimmeTime()",interval);
}

function gimmeTime() {
    postMessage({
        time:new Date().toUTCString(),
        workerNo:workerNo
    });
}

1. Field wor­kerNo con­ta­ins wor­ker id — inte­ger 1 or greater.
2. onmes­sage is mes­sage recie­ved from the brow­ser. Notice that we can han­dle recie­ved data via e.data, not e alone!
3. chan­ge­In­te­rval is func­tion which self calls gim­me­Time() func­tion with given para­me­ter inte­rval (in microsecs).
4. gim­me­Time sends brow­ser JSON mes­sage with its id and cur­rent time via post­Mes­sage() function.

Now it’s time for workersdemoeng.html (I’m listing only JS code):

var workers = new Array();
var counter = 0;
var bindedWorkers = '';

if (Modernizr.webworkers) {
    alert("Your browser supports Web Workers technology, you're free to test it!");
}
else {
    alert('Your browser does NOT support Web Workers technology. Install yourself a decent browser (FF, Chrome, Opera[?])!');
}

function addNotification(workerno) {
    var msg = $('<p>').appendTo('#notif');
    msg.text('Worker '+workerno+' updated state');
    msg.fadeOut(1500);
}

function fireUpWorker() {
    ++counter;
    var workerDiv = $('<div>').attr('id','workerdiv-'+counter).appendTo('#counters');
    var par = $('<p>').attr('id','worker-'+counter).appendTo(workerDiv);
    $('<input />').attr({
        type:'submit',
        value:'terminate',
        onClick:'terminateWorker('+counter+');return false;'
    }).appendTo(workerDiv);
    workers[counter] = new Worker('timeworker.js');
    var timer = $('#intrv').val();
    workers[counter].postMessage({timer:timer,workerNo:counter});
    bindWorkers();
}

function terminateWorker(workerNo) {
    workers[workerNo].terminate();
    $('#worker-'+workerNo).text('terminated!');
    $('#workerdiv-'+workerNo).fadeOut(5000);
}

function bindWorkers() {
    bindedWorkers += "workers["+counter+"].onmessage = function(event) {";
    bindedWorkers += "$('#worker-"+counter+"').text('Worker '+event.data.workerNo+' date : '+event.data.time);";
    bindedWorkers += "addNotification(event.data.workerNo);";
    bindedWorkers += "};";
    eval(bindedWorkers);
}

1. We have 3 glo­bal fields: array wor­kers which holds all active wor­kers, wor­kers coun­ter and bin­de­dWor­kers which con­ta­ins ugly JS code to be exe­cu­ted by eval() — the only way I know to force brow­ser to listen all wor­kers, not only the last one created.
2. add­No­ti­fi­ca­tion shows short 1,5 sec. noti­fi­ca­tion about wor­ker state update.
3. fireU­pWor­ker is the main func­tion. Fir­stly it cre­ates a new div, and then para­graph and ter­mi­nate but­ton. Newly cre­ated wor­ker rece­ives JSON mes­sage about its num­ber and state update inte­rval. At the end, bin­dWor­kers() is executed.
4. ter­mi­na­te­Wor­ker fir­stly kills cer­tain wor­ker by worker.terminate(), and then hides div rela­ted to it.
5. Finally the func­tion I’m least satis­fied of: bin­dWor­kers(). It han­dles what brow­ser sho­uld do with the rece­ived mes­sage from a wor­ker. It works ana­lo­gi­cally like the worker’s one: thro­ugh onmes­sage and e.data. To bin­de­dWor­kers string we’re appen­ding the code and exe­cu­ting by eval(). The worst part is when we ter­mi­nate some wor­kers, this string con­ta­ins use­less data (we could cut this out by some rege­xps, but I’m lazy ).

I have a big requ­est for the JS geeks: how to run onmes­sage code in a loop and without eval?

P.S.: It seems that I have found a bug in Chrome brow­ser: an attempt to add onc­lick attri­bute by jQu­ery didn’t wor­ked. You sho­uld use onC­lick instead

Przed nami cie­kawe czasy w tech­no­lo­gii WWW. Powoli wcho­dzi HTML5 wpro­wa­dza­jąc cał­ko­wi­cie nową jakość. Póki co strony w HTML5 mają cha­rak­ter bar­dziej poka­zowy niż uży­teczny. Ja jako maniak tech­no­lo­gii musia­łem zacząć się z tym wszyst­kim bawić. Na pierw­szy ogień idzie tech­no­lo­gia Web Wor­kers [dalej WW].

WW to próba wpro­wa­dze­nia wie­lo­wąt­ko­wo­ści w prze­glą­darce WWW. W zało­że­niu zada­nia, które wyma­gają dużej mocy obli­cze­nio­wej wrzu­cane są do takiego wor­kera. Gdy sobie skoń­czy liczyć, powia­da­mia prze­glą­darkę, a ta wyświe­tla wynik. Cho­dzi o to, że użyt­kow­nik strony nie­ko­niecz­nie ma ochotę cier­pieć zwol­nie­nie pracy prze­glą­darki w cza­sie kiedy pro­ce­sor jest obcią­żony (ładnie się to nazywa respon­syw­ność przeglądarki).

Zresztą to nie jest jakaś super nowość. Z wąt­kami w tle spo­ty­ka­cie się na co dzień prze­glą­da­jąc Face­bo­oka (powia­do­mie­nia kto jest na cza­cie, nowe posty na tablicy bez prze­ła­do­wy­wa­nia itd.) Ofi­cjalne API WW ma spore obostrze­nia. Wor­ker to jakby zamknięte środo­wi­sko. Nie mamy dostępu do np. obiek­tów strony macie­rzy­stej (DOM, jQu­ery). Wię­cej pole­cam poczy­tać u Mar­co­osa.

Dzi­siaj zro­bimy coś, czego nie widzia­łem nigdzie w Inter­ne­cie póki co. Spró­bu­jemy dyna­micz­nie gene­ro­wać nowe wątki, kaso­wać je, a nawet regu­lo­wać czę­sto­tli­wość ich odpo­wie­dzi. Wszystko to będzie oczy­wi­ście ładnie okra­szone biblio­teką jQu­ery. Sie­dzia­łem nad tym pół nie­dzieli, więc uważajcie!

Naj­pierw rzuć­cie okiem na efekt finalny, a poni­żej wyja­śnie­nia co cie­kaw­szych rzeczy.

Pierw­sze co robimy to spraw­dzamy czy prze­glą­darka użyt­kow­nika w ogóle obsłu­guje WW. Korzy­stamy z biblio­teki Moder­nizr i wyświe­tlamy alert informujący.

Druga sprawa to kod samego wor­kera (timeworker.js):

var workerNo;

onmessage = function(e) {
    workerNo = e.data.workerNo;
    changeInterval(e.data.timer);
}

function changeInterval(interval) {
    setInterval("gimmeTime()",interval);
}

function gimmeTime() {
    postMessage({
        time:new Date().toUTCString(),
        workerNo:workerNo
    });
}

1. Pole wor­kerNo zawiera iden­ty­fi­ka­tor wor­kera — liczbę od 1 w górę.
2. onmes­sage to komu­ni­kat ode­brany od prze­glą­darki. Zwra­camy uwagę na to, że do ode­bra­nych danych dobie­ramy się poprzez e.data, a nie samo e!
3. chan­ge­In­te­rval to funk­cja usta­wia­jąca samo­wy­wo­ła­nie okre­ślo­nej funk­cji cyklicz­nie co podany czas w ms.
4. gim­me­Time to funk­cja wysy­ła­jące prze­glą­darce JSON z aktu­al­nym cza­sem i swoim iden­ty­fi­ka­to­rem za pomocą funk­cji post­Mes­sage().

Teraz czas na kod workersdemo.html (podaję sam kod Java­Script bo szkoda miejsca).

var workers = new Array();
var licznik = 0;
var bindedWorkers = '';

if (Modernizr.webworkers) {
    alert('Twoja przeglądarka wspiera Web Workers, możesz śmiało testować!');
}
else {
    alert('Twoja przeglądarka NIE wspiera Web Workers, demo nie będzie działało. Zainstaluj sobie prawdziwą przeglądarkę (FF, Chrome, Opera[?])!');
}

function addNotification(workerno) {
    var msg = $('<p>').appendTo('#notif');
    msg.text('Worker '+workerno+' updated state');
    msg.fadeOut(1500);
}

function fireUpWorker() {
    ++licznik;
    var workerDiv = $('<div>').attr('id','workerdiv-'+licznik).appendTo('#liczniki');
    var par = $('<p>').attr('id','worker-'+licznik).appendTo(workerDiv);
    $('<input />').attr({
        type:'submit',
        value:'terminate',
        onClick:'terminateWorker('+licznik+');return false;'
    }).appendTo(workerDiv);
    workers[licznik] = new Worker('timeworker.js');
    var timer = $('#intrv').val();
    workers[licznik].postMessage({timer:timer,workerNo:licznik});
    bindWorkers();
}

function terminateWorker(workerNo) {
    workers[workerNo].terminate();
    $('#worker-'+workerNo).text('terminated!');
    $('#workerdiv-'+workerNo).fadeOut(5000);
}

function bindWorkers() {
    bindedWorkers += "workers["+licznik+"].onmessage = function(event) {";
    bindedWorkers += "$('#worker-"+licznik+"').text('Worker '+event.data.workerNo+' date : '+event.data.time);";
    bindedWorkers += "addNotification(event.data.workerNo);";
    bindedWorkers += "};";
    eval(bindedWorkers);
}

1. Mamy 3 pola glo­balne: tablicę wor­kers trzy­ma­jącą wszyst­kich aktyw­nych wor­ke­rów, licz­nik wor­ke­rów i bin­de­dWor­kers zawie­ra­jący brzydki kod Java­Script do wyko­na­nia poprzez eval() — jedyny znany mi spo­sób na zmu­sze­nie prze­glą­darki żeby słu­chała wszyst­kich aktyw­nych wor­ke­rów, a nie tylko ostat­niego dodanego.
2. add­No­ti­fi­ca­tion wyrzuca użyt­kow­ni­kowi komu­ni­kat o ode­bra­niu wia­do­mo­ści od wor­kera, znika po 1,5 sek.
3. fireU­pWor­ker (nie chciało mi się wysi­lać na lep­szą nazwę ) to główna funk­cja. Naj­pierw two­rzy nowe ele­menty HTML: div, w nim para­graf na komu­ni­kat z wor­kera i przy­cisk zabi­ja­jący. Nowo stwo­rzo­nemu wor­ke­rowi wysy­łam komu­ni­kat w JSON co jaki czas ma się odświe­żać i jaki ma numer. Na koniec wywo­łuję funk­cję bin­dWor­kers().
4. ter­mi­na­te­Wor­ker naj­pierw zabija okre­ślo­nego wor­kera poprzez worker.terminate(), a następ­nie ukrywa zwią­za­nego z nim diva.
5. Na koniec funk­cja, z któ­rej jestem naj­mniej zado­wo­lony: bin­dWor­kers(). Zaj­muje się usta­wia­niem co prze­glą­darka ma robić w przy­padku otrzy­ma­nia komu­ni­katu od wor­kera. Działa to ana­lo­gicz­nie jak poprzed­nio. Poprzez onmes­sage i e.data. Do pola bin­de­dWor­kers doda­jemy kod w postaci ciągu i uru­cha­miamy evalem.

Tutaj mam prośbę dla znaw­ców. Doda­wa­nie onmes­sage w pętli dla poszcze­gól­nych wor­ke­rów osobno nie dzia­łało. Jak zała­twić pro­blem bez uży­wa­nia evala?

P.S.: Zna­la­złem chyba buga w Chrome: Próby doda­nia atry­butu onc­lick poprzez jQu­ery nic nie dają. Należy uży­wać onC­lick