MessageEvent

建構函式

MessageEvent()

建立一個新的 MessageEvent。

例項屬性

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

MessageEvent.data 只讀

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

MessageEvent.origin 只讀

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

MessageEvent.lastEventId 只讀

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

MessageEvent.source 只讀

一個 MessageEventSource（可以是 WindowProxy、MessagePort 或 ServiceWorker 物件），表示訊息傳送者。

MessageEvent.ports 只讀

一個 MessagePort 物件陣列，其中包含隨訊息傳送的所有 MessagePort 物件，按順序排列。

例項方法

此介面還繼承了其父介面 Event 的方法。

initMessageEvent() 已棄用

初始化一個訊息事件。不要再使用此方法 — 請改用 MessageEvent() 建構函式。

示例

在我們的 基本共享工作執行緒示例（執行共享工作執行緒）中，我們有兩個 HTML 頁面，每個頁面都使用一些 JavaScript 來執行計算。不同的指令碼使用同一個工作執行緒檔案來執行計算 — 它們都可以訪問它，即使它們的頁面執行在不同的視窗中。

以下程式碼片段展示了使用 SharedWorker() 建構函式建立 SharedWorker 物件。兩個指令碼都包含此內容。

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

然後，兩個指令碼透過使用 SharedWorker.port 屬性建立的 MessagePort 物件訪問工作執行緒。如果使用 addEventListener 附加 onmessage 事件，則埠會透過其 start() 方法手動啟動。

myWorker.port.start();

當埠啟動時，兩個指令碼分別使用 port.postMessage() 和 port.onmessage 向工作執行緒傳送訊息並處理從工作執行緒傳送過來的訊息。

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

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

在工作執行緒內部，我們使用 onconnect 處理程式連線到上面討論的同一個埠。與該工作執行緒關聯的埠可以在 connect 事件的 ports 屬性中訪問 — 然後我們使用 MessagePort 的 start() 方法來啟動埠，並使用 onmessage 處理程式來處理從主執行緒傳送過來的訊息。

onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

規範

瀏覽器相容性

另見

• ExtendableMessageEvent — 類似於此介面，但用於需要為作者提供更大靈活性的介面。