SharedWorkerGlobalScope: connect 事件

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

當有新的客戶端連線時,在 SharedWorker 的 SharedWorkerGlobalScope 中會觸發 connect 事件。

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

語法

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

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

onconnect = (event) => { }

事件型別

一個 MessageEvent。繼承自 Event

Event MessageEvent

事件屬性

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

MessageEvent.data 只讀

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

MessageEvent.origin 只讀

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

MessageEvent.lastEventId 只讀

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

MessageEvent.source 只讀

一個 MessageEventSource(可以是 WindowProxyMessagePortServiceWorker 物件),表示訊息傳送者。

MessageEvent.ports 只讀

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

示例

此示例展示了一個共享工作執行緒檔案 — 當主執行緒透過 MessagePort 連線到工作執行緒時,onconnect 事件處理程式將被觸發。該事件物件是一個 MessageEvent

可以透過事件物件的 ports 引數來引用正在連線的埠;可以為此引用附加一個 onmessage 處理程式來處理透過該埠傳入的訊息,並使用其 postMessage() 方法將訊息傳送回主執行緒。

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

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

  port.start();
};

有關完整的執行示例,請參閱我們的 簡單的共享工作執行緒示例執行共享工作執行緒)。

addEventListener 等效

您也可以使用 addEventListener() 方法來設定事件處理程式

js
self.addEventListener("connect", (e) => {
  const port = e.ports[0];

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

規範

規範
HTML
# event-workerglobalscope-connect
HTML
# handler-sharedworkerglobalscope-onconnect

瀏覽器相容性

另見