JavaScript Worker message Event

What You’ll Learn

The message event of the Worker interface fires when the parent receives a message from its worker (the worker called self.postMessage(...)). Learn onmessage vs addEventListener("message"), MessageEvent.data, and how it differs from error—with five examples and try-it labs.

Introduction

A dedicated worker cannot update the DOM directly. It talks to the main page by posting messages. When the worker sends data with self.postMessage(...), the main thread’s Worker object fires a message event.

That is the happy path for background work: you send a job with postMessage() on the Worker, and you receive the answer on message via event.data.

Understanding the Worker message Event

An instance event on Worker that fires when the worker’s parent receives a message from that worker.

• Event name — "message".
• Handler property — worker.onmessage.
• Listener — worker.addEventListener("message", handler).
• Event type — a MessageEvent (inherits from Event).
• Not cancellable and does not bubble (per MDN).
• Baseline Widely available on MDN (since July 2015); available in Web Workers except Service Workers.

📝 Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("message", (event) => { })

onmessage = (event) => { }

Event type

A MessageEvent. The property you use most often is event.data.

Event properties (MessageEvent)

Typical pattern

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

worker.onmessage = (event) => {
  console.log(`Received message from worker: ${event.data}`);
};

// Inside worker.js:
// self.postMessage("I'm alive!");

⚖️ message vs Related Ideas

Examples Gallery

Examples follow MDN Worker: message event. Labs use blob workers so you can try everything in one HTML file.

const worker = new Worker(url);

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
});

Received message from worker: I'm alive!

const worker = new Worker(url);

worker.onmessage = (event) => {
  console.log(`Received message from worker: ${event.data}`);
};

Received message from worker: I'm alive!

worker.onmessage = (event) => {
  const { type, value } = event.data;
  console.log(type, value);
};

// Worker: self.postMessage({ type: "result", value: 42 });

result 42

worker.onmessage = (e) => console.log("reply:", e.data);
worker.postMessage(3);

// Worker:
// self.onmessage = (e) => self.postMessage(e.data * 2);

reply: 6

worker.onmessage = (e) => console.log("ok:", e.data);
worker.onerror = (e) => {
  console.log("fail:", e.message || "error");
  e.preventDefault();
};

ok: pong
fail: Uncaught Error: boom

🚀 Common Use Cases

• Show progress or results from a heavy calculation.
• Receive parsed JSON / image processing results off the main thread.
• Keep a chatty protocol with typed envelopes ({ type, payload }).
• Update charts after a worker finishes aggregating data.
• Confirm a worker started with a simple “I'm alive!” ping.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers except Service Workers.
• Event type is MessageEvent; primary field is event.data.
• Not cancellable and does not bubble.
• Related learning: postMessage(), messageerror, error, Worker(), addEventListener().

💡 Best Practices