Szybka pomoc

Ściągawka z Web Workers w JavaScript

Szybki przewodnik referencyjny po HTML5 Web Workers: tworzenie workera, komunikacja przez postMessage, zdarzenia komunikatów i algorytm klonowania strukturalnego.

· Opublikowano

Web Workers zapewniają prosty sposób na uruchamianie skryptów w wątkach tła bez blokowania interfejsu użytkownika.

Wielowątkowość w tle

Główny wątek klienta

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

worker.onmessage = function (event) {
  console.log('Odebrano z workera:', event.data);
};

worker.postMessage('cześć z głównego wątku!');

Komunikaty mogą być dowolnego typu obsługiwanego przez algorytm klonowania strukturalnego (obiekty, tablice, ciągi znaków, liczby, bloby, tablice typowane).

Wątek workera

// Wewnątrz worker.js
self.onmessage = function (event) {
  console.log('Odebrano w workerze:', event.data);
  self.postMessage({ msg: 'odpowiedź z workera' });
};

Struktura MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Przesłane dane (payload)
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Pola te opisują właściwości dostępne w obiekcie MessageEvent w zdarzeniu onmessage.

Powiązane tematy