Receiving data from a worker

Learn to catch messages from the worker with onmessage.

Receiving data with onmessage

To catch messages from the worker, assign a function to worker.onmessage on the main side. When the worker calls postMessage, this function receives a MessageEvent.

worker.onmessage = function(event) {
  console.log(event.data);
};

The event's data property carries the payload sent by the worker. event.target points to the worker instance. If several messages arrive, the function runs once for each.

Catching errors with onerror

When an error occurs in the worker, worker.onerror fires. This listener receives an event with the error message, file name and line number.

worker.onerror = function(event) {
  console.error(event.message);
};

Listening for the error event stops the worker from failing silently. The safest path is still to restart the worker and report the error to the user. Logging makes the source of the problem easier to find.

Exercise Log data received from the worker

Assign a function to worker.onmessage. The function takes an event parameter and logs event.data with console.log.

Show example solution

worker.onmessage = function(event) {
  console.log(event.data);
};

Test yourself

MessageEvent parts

event.data

the payload
event.target

the worker instance
onmessage

event listener
postMessage

sends a message

Log the data

worker.onmessage = function(event) {
  console.log(event.____);
};

Show answer

worker.onmessage = function(event) {
  console.log(event.data);
};

Which one is used to receive data from a worker?
- worker.send()
- worker.getData()
- worker.fetch()
- worker.onmessage
Show answer

worker.onmessage — Correct! worker.onmessage catches incoming messages.

Next lesson: Transferable objects

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies