Ako vytvoriť vlákno Web Worker v JavaScripte…

Vytvorenie vlákna Web Worker v JavaScripte je možné pomocou konštruktora Worker.

// Vytvoríme nový Web Worker, odovzdaním cesty k JS súboru,
// ktorý bude spustený v samostatnom vlákne.
const worker = new Worker('worker.js');

V súbore worker.js (alebo inom, ktorý je pri vytváraní worker-a uvedený) bude kód spustený v samostatnom vlákne.

// worker.js

// Spracovanie správ odoslaných z hlavného vlákna
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Správa prijatá z hlavného vlákna:', receivedData);

  // Odoslanie správy späť do hlavného vlákna
  const responseData = { message: 'Ahoj od Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Voliteľne, možno pridať spracovanie chýb
self.onerror = function(error) {
  console.error('Chyba v Worker:', error);
};

V hlavnom vlákne (kde bol worker vytvorený) je možné s ním komunikovať:

// main.js

const worker = new Worker('worker.js'); 

// Odoslanie správy Web Worker-u
worker.postMessage({ command: 'start', payload: 'some data' });

// Spracovanie správ prijatých od Web Worker-u
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Správa od Workera:', receivedData);
};

// Spracovanie chýb v Web Worker-i
worker.onerror = function(error) {
  console.error('Chyba v Web Worker-i:', error);
};

// Ukončenie Web Worker-u (voliteľné)
// worker.terminate();

Kľúčové body:

Komunikácia: Výmena dát medzi hlavným vláknom a workerom prebieha prostredníctvom správ pomocou metód postMessage() a handleru onmessage.
Obmedzenia: Worker nemá prístup k DOM, objektu window a ďalším globálnym objektom prehliadača. Majú obmedzený prístup k navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets a ďalším.
Izolácia: Kód vo workerovi sa vykonáva v samostatnom vlákne, čo zabraňuje blokovaniu hlavného vlákna a zlepšuje výkon, najmä pri výpočtoch náročných na zdroje.

Ako vytvoriť vlákno Web Worker v JavaScripte?