SharedWorkerGlobalScope: connect イベント

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onconnect = (event) => {};

イベント型

MessageEvent です。 Event を継承しています。

イベントプロパティ

このインターフェイスには、親である Event から継承したプロパティもあります。

MessageEvent.data 読取専用

メッセージ送信者から送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信者のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの固有の ID を表します。

MessageEvent.source 読取専用

MessageEventSource （WindowProxy, MessagePort, ServiceWorker の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

MessageEvent.ports 読取専用

MessagePort オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例

この例は共有ワーカーファイルを示しています。メインスレッドから MessagePort を通してワーカーへの接続が発生したとき、 onconnect イベントハンドラーが呼び出されます。イベントオブジェクトは MessageEvent です。

接続しようとしているポート番号は、イベントオブジェクトの ports 引数で参照することができます。この参照にはポートを通じて来るメッセージを扱うために割り当てられた onmessage ハンドラーがあり、その postMessage() メソッドにワーカーを使用してメインスレッドにメッセージを送り返すために使用することができます。

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();
};

実行している例を完成させるには、 Basic shared worker example (共有ワーカーを実行) をご覧ください。

addEventListener による同等の処理

addEventListener() メソッドを使用してイベントハンドラーを設定することもできます。

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

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

仕様書

ブラウザーの互換性

関連情報

• ウェブワーカーの使用
• SharedWorkerGlobalScope