Web Worker e un obiect JavaScript care ruleaza in fundal, fara sa afecteze performantele paginii. Codul din worker poate efectua diferite sarcini fara sa interfereze cu pagina din browser.
In pagina, un script JS poate face diferite instructiuni: click-uri, selectare, afisare date, etc., in timp ce codul din worker efectueaza alte instructiuni.
In general, un web worker se creaza intr-un fisier JS separat pe server, de exemplu worker.js. Acest fisier contine codul care ruleaza in fundal.
Se poate executa orice cod JS in fisierul worker, cu unele exceptii.
Nu se poate manipula DOM direct din worker, nuci nu se pot folosi proprietati si metode implicite din obiectele window
, document
, si parent
. Dar se pot folosi multe obiecte din window, incluzand: XMLHttpRequest
(Ajax), WebSockets
, Navigator
si IndexedDB
.
In pagina in care vreti sa utilizati codul dintr-un web worker, creati o instanta de obiect Worker
cu aceasta sintxa.
if(window.Worker){ var wrk = new Worker('worker.js'); }- Dupa ce e creat un cod JavaScript in fisierul worker.js (sau orice alt nume vreti), poate sa trimita date la obiectul
Worker
.postMessage()
, si pot receptiona datele prin evenimentul onmessage
. Datele sunt stocate in proprietatea event.data
.Urmatorul exemplu afiseaza un contoar care ruleaza continuu intr-un fisier worker. Scriptul e salvat intr-un fisier "workers_ex.js" si folosit intr-o pagina wen.
var ic =0; function timedCount(){ ic++; postMessage(ic); setTimeout('timedCount()', 500); } timedCount();
<h4>Exemplu JavaScript Worker</h4> <blockquote>Contor: <b id='resp'></b></blockquote> <button id='bt_startw'>Start Worker</button> - <button id='bt_stopw'>Stop Worker</button> - <script> var wrk; //pt. obiectul Worker var resp = document.getElementById('resp'); function startWorker(){ if(window.Worker){ //daca wrk e undefined sau false, il defineste if(!wrk) wrk = new Worker('javascript/worker_ex.js'); //addauga in #resp datele primite de la worker wrk.addEventListener('message', (ev)=>{ resp.innerHTML = ev.data; }); } } function stopWorker(){ wrk.terminate(); wrk = false; } //click-ul la butoanele Start /Stop Worker document.getElementById('bt_startw').addEventListener('click', startWorker); document.getElementById('bt_stopw').addEventListener('click', stopWorker); </script>
Scriptul din pagina poate sa trimita date la worker cu metoda postMessage()
.
onmessage
, in proprietatea event.data
.
addEventListener('message', (ev)=>{ var data = ev.data; }
Se pot trimite orice tip de date cu postMessage()
: string, number, array, object, boolean.
//la receptionare date din pagina addEventListener('message', (ev)=>{ var str = ev.data; //obiect cu datele care sa fie trimise cu postMessage() var re ={s:str.split('').reverse().join(''), n:str.length}; postMessage(re); }
<h4>Exemplu date catre worker</h4> <p>Tastati orice text in caseta urmatoare:</p> Text: <input type='text' id='inp1'/> <blockquote id='resp'>Aici afiseaza textul inversat si numarul de caractere.</blockquote> <script> var resp = document.getElementById('resp'); //defineste obiect Worker, daca e valabil in browser var wrk = (window.Worker) ? new Worker('javascript/worker_ex.js') :false; //daca wrk defint if(wrk){ //la tastare text in input document.getElementById('inp1').addEventListener('keyup', (ev)=>{ wrk.postMessage(ev.target.value); //trimite date la worker }); //preia date de la worker wrk.addEventListener('message', (ew)=>{ if(ew.data.n) resp.innerHTML ='Text inversat: '+ ew.data.s +'<br>Nr. caractere: '+ ew.data.n; }); } </script>
In mod normal, web-worker nu se foloseste pentru astfel de scripturi simple, ci mai mult pentru sarcini intensive ale procesorului, in aplicatii precum jocuri, WebSockets si solicitari ajax repetitive.
Pentru depanarea codului din fisierul worker, se poate folosi metoda console.log()
in acel fisier.
Cand se creeaza un obiect Worker, acesta va continua sa detecteze mesajele chiar si dupa terminarea scriptului extern, pana cand acesta va fi terminat /inchis.
Pentru terminarea unui worker (eliberand astfel resursele), se foloseste metoda terminate()
.
close()
.
//fisier worker // codul.. if(conditie) close();
Cu functia importScripts()
se pot include unul sau mai multe scripturi externe in fisierul worker.
importScripts('foo.js'); //include foo.js importScripts('foo.js', 'bar.js'); //include doua scripturi importScripts('//example.com/hello.js'); //include script din alt domeniuBrowserul incarca si executa fiecare script inclus. Obiectele globale din fiecare script pot fi apoi folosite de worker.
<input type="number" name="points" min="5" max="80" />
#id { filter:alpha(opacity=40); /* for IE */ opacity:0.4; }
var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.