JavaScript Worker message Event

Beginner
5 min read
Updated: Nov 2026
5 examples
Event
Decorative image with the word MESSAGE

Definition

The message event on a Worker fires when the parent receives a message from its worker—i.e. after the worker calls self.postMessage(...) (MDN). Listen with addEventListener("message", …) or the onmessage property.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for message. Start with this line.

JavaScript
worker.addEventListener("message", (event) => { … })
CallWhat it does
worker.addEventListener("message", (event) => { … })Primary signature.

Built into the browser. Listen with worker.addEventListener("message", …) or worker.onmessage — no import required.

Library declarations
JavaScript
worker.addEventListener("message", (event) => { … })

Parameters

ParameterDescription
HandlerRequired. onmessage or addEventListener
event.dataRequired. Posted payload (MessageEvent)

Return Value

Return ValueDescription
*Fires as a WorkerTrackEvent (listener receives the event).

JavaScript Examples

Example 1 — addEventListener("message") (MDN)

Listen for replies when the worker posts a string.

JavaScript
const code = 'self.postMessage("I\'m alive!");';
const url = URL.createObjectURL(
  new Blob([code], { type: "application/javascript" })
);
const worker = new Worker(url);

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
  worker.terminate();
  URL.revokeObjectURL(url);
});
Try It Yourself

How It Works

  1. Blob worker posts once. self.postMessage(...) on load.
  2. addEventListener runs. MDN’s preferred listen style.
  3. Read event.data. That is the posted value.
  4. Clean up. Terminate and revoke the blob URL.

Example 2 — onmessage (MDN)

Same event via the handler property — one slot, short syntax.

JavaScript
const url = URL.createObjectURL(
  new Blob(['self.postMessage("I\'m alive!");'], {
    type: "application/javascript"
  })
);
const worker = new Worker(url);

worker.onmessage = (event) => {
  console.log(`Received message from worker: ${event.data}`);
  worker.terminate();
  URL.revokeObjectURL(url);
};
Try It Yourself

How It Works

  1. Set onmessage. MDN’s alternate listen style.
  2. Worker posts. Main receives a MessageEvent.
  3. Same event.data. Payload is identical to listeners.
  4. One handler slot. Prefer addEventListener for multiple handlers.

Example 3 — Object in event.data

Post a structured object and read fields on the main thread.

JavaScript
const url = URL.createObjectURL(
  new Blob(
    ["self.postMessage({ type: 'result', value: 42 });"],
    { type: "application/javascript" }
  )
);
const worker = new Worker(url);

worker.onmessage = (event) => {
  console.log(event.data.type, event.data.value);
  // → result 42
  worker.terminate();
  URL.revokeObjectURL(url);
};
Try It Yourself

How It Works

  1. Worker posts an object. Structured-clone copies it.
  2. Main reads fields. event.data.type / .value.
  3. Typed envelopes help. e.g. { type, value } for routing.
  4. Still clean up. Terminate when the job is done.

Example 4 — Round-Trip Reply

Main posts a number; worker doubles it; message delivers the reply.

JavaScript
const url = URL.createObjectURL(
  new Blob(
    ["self.onmessage = (e) => self.postMessage(e.data * 2);"],
    { type: "application/javascript" }
  )
);
const worker = new Worker(url);

worker.onmessage = (event) => {
  console.log("reply:", event.data); // → 6
  worker.terminate();
  URL.revokeObjectURL(url);
};

worker.postMessage(3);
Try It Yourself

How It Works

  1. Main → worker: worker.postMessage(3).
  2. Worker listens: self.onmessage doubles the value.
  3. Worker → main: self.postMessage(6) fires message.
  4. This is the usual pattern. Request in, result out via event.data.

Example 5 — message vs error

Healthy workers reply on message; broken ones fire error.

JavaScript
function makeWorker(source) {
  const url = URL.createObjectURL(
    new Blob([source], { type: "application/javascript" })
  );
  const worker = new Worker(url);
  worker.onmessage = (e) => console.log("ok:", e.data);
  worker.onerror = (e) => {
    console.log("fail:", e.message || "error");
    e.preventDefault();
  };
  return worker;
}

// Healthy: makeWorker("self.onmessage=()=>self.postMessage('pong');")
// Broken:  makeWorker("throw new Error('boom');")
Try It Yourself

How It Works

  1. Attach both handlers. Success and failure paths.
  2. Healthy worker uses postMessage. Fires message.
  3. Broken worker throws. Fires error.
  4. Do not mix them up. App-level { type: "error" } is still a message.
Compatibility

Browser Support

The Worker message event is Baseline Widely available (MDN, since July 2015). Safe for dedicated worker replies.

✓ Baseline · Widely available

Worker message event

Supported across Chrome, Firefox, Safari, Edge, and Opera. Fires on the Worker when the worker posts a message.

97% Browser support
Google Chrome message · full support
Full support
Microsoft Edge message · Chromium
Full support
Apple Safari message · full support
Full support
Mozilla Firefox message · full support
Full support
Opera message · full support
Full support
Internet Explorer Workers · legacy
Legacy support
Worker message Excellent

Bottom line: Use freely for dedicated workers. Pair with error handlers and terminate when the job is done.

Frequently Asked Questions

It fires on the Worker object when the main thread receives a message from the worker—after the worker calls DedicatedWorkerGlobalScope.postMessage() (MDN). Listen with worker.onmessage or worker.addEventListener("message", handler).
No. MDN marks the Worker message event as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. MDN notes it is available in Web Workers except Service Workers.
A MessageEvent (inherits from Event). The field you use most is event.data—the value the worker posted.
No. Per MDN, this event is not cancellable and does not bubble.
message delivers successful postMessage data as event.data. error reports that the worker script failed. Listen for both when you depend on a worker.
On the Worker created with new Worker(...), before or as soon as you expect replies. Inside the worker, send with self.postMessage(...).

Next: Worker messageerror

Learn what happens when message data cannot be deserialized.

messageerror tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Worker terminate() Method JavaScript Worker messageerror Event