DedicatedWorkerGlobalScope: message event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Note: This feature is only available in Dedicated Web Workers.

Sự kiện message được kích hoạt trên một đối tượng DedicatedWorkerGlobalScope khi worker nhận được một thông điệp từ cha của nó (tức là khi phía cha gửi thông điệp bằng Worker.postMessage()).

Sự kiện này không thể hủy và không nổi bọt.

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.

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

onmessage = (event) => { }

Thuộc tính sự kiện

Giao diện này cũng kế thừa các thuộc tính từ giao diện cha Event.

MessageEvent.data Read only: Dữ liệu được gửi bởi bên phát thông điệp.
MessageEvent.origin Read only: Một chuỗi đại diện cho origin của bên phát thông điệp.
MessageEvent.lastEventId Read only: Một chuỗi đại diện cho ID duy nhất của sự kiện.
MessageEvent.source Read only: Một MessageEventSource (có thể là đối tượng Window, MessagePort hoặc ServiceWorker) đại diện cho bên phát thông điệp.
MessageEvent.ports Read only: Một mảng các đối tượng MessagePort đại diện cho các cổng gắn với kênh mà thông điệp đang được gửi qua (khi phù hợp, ví dụ trong channel messaging hoặc khi gửi thông điệp tới shared worker).

Đoạn mã sau cho thấy việc tạo một đối tượng Worker bằng hàm tạo Worker(). Thông điệp được gửi tới worker khi giá trị bên trong ô nhập liệu first thay đổi. Một bộ xử lý onmessage cũng có mặt để xử lý các thông điệp được gửi ngược lại từ worker.

// main.js

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

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

// worker.js

self.onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

Trong script main.js, một bộ xử lý onmessage được dùng để xử lý các thông điệp từ worker script:

// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};

Hoặc, script có thể lắng nghe thông điệp bằng addEventListener():

// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});

Lưu ý rằng trong script chính, onmessage phải được gọi trên myWorker, trong khi bên trong worker script bạn chỉ cần onmessage vì worker về bản chất chính là phạm vi global (DedicatedWorkerGlobalScope).

Để xem ví dụ đầy đủ, hãy xem Ví dụ worker dedicated cơ bản (chạy worker dedicated).