Sobes.tech
Middle

Kaip sukurti Web Worker srautą JavaScript?

sobes.tech AI

Atsakymas iš AI

JavaScript-те Web Worker srautą galima sukurti naudojant Worker konstruktorių.

// Sukuriame naują Web Worker, perduodant kelią į JS failą,
// kuris bus vykdomas atskirame sraute.
const worker = new Worker('worker.js'); 

worker.js faile (arba bet kuriame kitame faile, nurodytame kuriant workerį) bus vykdomas kodas atskirame sraute.

// worker.js

// Apdorojimas žinučių, siunčiamų iš pagrindinio srauto
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Gauta žinutė iš pagrindinio srauto:', receivedData);

  // Atsakymo siuntimas atgal į pagrindinį srautą
  const responseData = { message: 'Sveiki iš Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Pageidautina, galima pridėti klaidų apdorojimą
self.onerror = function(error) {
  console.error('Klaida Worker:', error);
};

Pagrindiniame sraute (kur buvo sukurtas workeris) galima sąveikauti su workeriu:

// main.js

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

// Siųsti žinutę Web Worker
worker.postMessage({ command: 'start', payload: 'kai kurie duomenys' });

// Apdoroti žinutes, gaunamas iš Web Worker
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Gauta žinutė iš Worker:', receivedData);
};

// Klaidų apdorojimas Web Worker
worker.onerror = function(error) {
  console.error('Klaida pagrindiniame sraute:', error);
};

// Baigti Web Worker (pasirinktinai)
// worker.terminate(); 

Pagrindiniai punktai:

  • Ryšys: Duomenų mainai tarp pagrindinio srauto ir worker vyksta per postMessage() ir onmessage.
  • Apribojimai: Workeriai neturi prieigos prie DOM, window objekto ir kitų naršyklės globalių objektų. Jie turi ribotą prieigą prie navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets ir kitų.
  • Izoliacija: Workerio kodas vyksta atskirame sraute, kas neleidžia blokuoti pagrindinio srauto ir pagerina našumą, ypač atliekant išteklius reikalaujančius skaičiavimus.