SharedWorkerGlobalScope: connect イベント
connect
イベントは、新しいクライアントが接続したときに共有ワーカーの SharedWorkerGlobalScope
に発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を 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);
};
});
仕様書
Specification |
---|
HTML Standard # event-workerglobalscope-connect |
HTML Standard # handler-sharedworkerglobalscope-onconnect |
ブラウザーの互換性
BCD tables only load in the browser