DedicatedWorkerGlobalScope: message 事件

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

注意:此功能僅在 專用 Web Worker 中可用。

當 Worker 從其父級接收到訊息時(即,當父級使用 Worker.postMessage() 傳送訊息時),會在 DedicatedWorkerGlobalScope 物件上觸發 message 事件。

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

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

onmessage = (event) => { }

事件型別

一個 MessageEvent。繼承自 Event

Event MessageEvent

事件屬性

此介面還繼承了其父級 Event 的屬性。

MessageEvent.data 只讀

由訊息傳送者傳送的資料。

MessageEvent.origin 只讀

一個字串,表示訊息傳送者的源。

MessageEvent.lastEventId 只讀

一個字串,表示事件的唯一 ID。

MessageEvent.source 只讀

一個 MessageEventSource(可以是 WindowMessagePortServiceWorker 物件)代表訊息的傳送者。

MessageEvent.ports 只讀

一個 MessagePort 物件陣列,表示訊息傳送通道(如果適用,例如在通道訊息傳遞或向共享工作者傳送訊息時)關聯的埠。

示例

下面的程式碼片段展示瞭如何使用 Worker() 建構函式建立一個 Worker 物件。當表單輸入 first 中的值發生變化時,會將訊息傳遞給 Worker。還存在一個 onmessage 處理程式,用於處理從 Worker 傳遞回來的訊息。

js
// 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);
};

main.js 指令碼中,使用 onmessage 處理程式來處理來自 Worker 指令碼的訊息。

js
// main.js

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

或者,指令碼可以使用 addEventListener() 來監聽訊息。

js
// worker.js

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

請注意,在主指令碼中,onmessage 必須在 myWorker 上呼叫,而在 Worker 指令碼中,你只需要 onmessage,因為 Worker 實際上就是全域性作用域(DedicatedWorkerGlobalScope)。

如需完整示例,請參閱我們的 基本專用 Worker 示例執行專用 Worker)。

規範

規範
HTML
# event-message
HTML
# handler-messageeventtarget-onmessage

瀏覽器相容性

另見