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

浏览器兼容性

另见