Schimbul de mesaje între web worker și firul principal
Firul principal și web workerii lansați în acesta pot interacționa prin intermediul mesajelor. Pentru a trimite un mesaj web workerului, se apelează metoda postMessage() a obiectului Worker:
postMessage(message)
postMessage(message, options)
postMessage(message, transfer)Ca prim și obligatoriu parametru message se transmite mesajul care urmează să fie trimis. Ca mesaj poate servi orice valoare, de exemplu, un șir de caractere sau un obiect. La transmitere, web workerul primește o copie a acestor date.
Parametrul suplimentar, opțional, options reprezintă un obiect de configurare care, prin proprietatea transfer, stabilește datele suplimentar transmise. Aceleași date sunt transmise în a treia versiune a funcției prin parametrul transfer. La transmitere, posesiunea acestor date trece la web worker, iar codul principal nu mai poate utiliza aceste date.
Pentru a primi mesajul pe partea de web worker, este necesar să se înregistreze o funcție-handler pentru evenimentul de primire a mesajului - evenimentul message. De exemplu, acest lucru se poate face prin proprietatea onmessage a web workerului.
// stabilirea handlerului de eveniment prin addEventListener
worker.addEventListener("message", (event) => { console.log(event.data);});
// stabilirea handlerului de eveniment prin proprietatea onmessage
worker.onmessage = (event) => {console.log(event.data);};În handlerul evenimentului este transmis un obiect MouseEvent, de la care prin proprietatea data se pot obține datele transmise.
Similar, pentru a trimite din web worker un mesaj în firul principal, se apelează metoda postMessage() a web workerului. În interiorul firului principal, se poate accesa mesajul în handlerul evenimentului message:
Să definim următorul script worker.js:
// ascultăm evenimentul message
self.addEventListener("message", (event) => {
// afișăm datele primite din firul principal
console.log(`[Worker] Message received: ${event.data}`);
// trimitem înapoi firului principal un anumit mesaj
self.postMessage("Hello main thread");
});Cu ajutorul cuvântului self obținem acces la obiectul web workerului și stabilim pentru el un handler pentru evenimentul "message". În acest handler primim datele transmise din firul principal și cu ajutorul apelului self.postMessage trimitem firului principal un anumit răspuns.
În procesul de lucru al web workerului poate să apară o eroare, în acest caz putem să procesăm evenimentul error al obiectului Worker.
Și să definim următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
const worker = new Worker("worker.js");
const message = "Hello web worker";
console.log(`[Main thread] Send message: ${message}`);
// trimitem web workerului un mesaj
worker.postMessage(message);
// primim mesaje de la web worker
worker.addEventListener("message", (e) => console.log(`[Main thread] Response from worker: ${e.data}`));
// în cazul unei erori
worker.addEventListener("error", (e) => console.log("Error occurred"));
</script>
</body>
</html>Aici, în mod similar, cu ajutorul apelului worker.postMessage() trimitem web workerului un mesaj și, de asemenea, cu ajutorul handlerului evenimentului "message" primim răspunsul.
Rezultatul lucrării:
