Jak vytvořit vlákno Web Worker v JavaScriptu…

Vytvoření vlákna Web Worker v JavaScriptu lze provést pomocí konstruktoru Worker.

// Vytvoříme nový Web Worker, předáním cesty k JS souboru,
// který bude spuštěn v samostatném vlákně.
const worker = new Worker('worker.js');

V souboru worker.js (nebo jakémkoli jiném, který je při vytváření workeru uveden) bude kód spuštěn v samostatném vlákně.

// worker.js

// Zpracování zpráv odeslaných z hlavního vlákna
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Zpráva přijata z hlavního vlákna:', receivedData);

  // Odeslání zprávy zpět do hlavního vlákna
  const responseData = { message: 'Ahoj od Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Volitelně lze přidat zpracování chyb
self.onerror = function(error) {
  console.error('Chyba ve Workeru:', error);
};

V hlavním vlákně (kde byl worker vytvořen) je možné s ním komunikovat:

// main.js

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

// Odeslání zprávy Web Workeru
worker.postMessage({ command: 'start', payload: 'some data' });

// Zpracování zpráv přijatých od Web Workeru
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Zpráva od Workeru:', receivedData);
};

// Zpracování chyb ve Web Workeru
worker.onerror = function(error) {
  console.error('Chyba ve Web Workeru:', error);
};

// Ukončení Web Workeru (volitelné)
// worker.terminate();

Klíčové body:

Komunikace: Výmena dat mezi hlavním vláknem a workerem probíhá prostřednictvím zpráv pomocí metod postMessage() a handleru onmessage.
Omezení: Worker nemá přístup k DOM, objektu window a dalším globálním objektům prohlížeče. Má omezený přístup k objektům navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets a dalším.
Izolace: Kód ve workeru se vykonává v samostatném vlákně, což zabraňuje blokování hlavního vlákna a zlepšuje výkon, zejména při výpočetně náročných operacích.

Jak vytvořit vlákno Web Worker v JavaScriptu?