SharedWorker

SharedWorker()

指定された URL のスクリプトを実行する共有ウェブワーカーを作成します。

EventTarget のプロパティを継承しています。

SharedWorker.port 読取専用

共有ワーカーとの通信および制御に使用される MessagePort オブジェクトを返します。

error

共有ワーカーでエラーが発生したときに発行されます。

EventTarget のメソッドを継承しています。

基本的な共有ワーカーの例（共有ワーカーを実行）には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。異なるスクリプトが同じワーカーファイルを使用して計算を行っているため、ページが異なるウィンドウで実行されていても、どちらもアクセスすることができます。

以下のコードでは SharedWorker オブジェクトを、 SharedWorker() コンストラクターを使用して生成しています。どちらのスクリプトもこれを格納します。

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

どちらのスクリプトも、SharedWorker.port プロパティを使用して作成された MessagePort オブジェクトを通してワーカーにアクセスします。addEventListener を使用して onmessage イベントが関連づけられている場合、ポートはその start() メソッドを使用して手動で開始されます。

myWorker.port.start();

ポートが開始されると、どちらのスクリプトも port.postMessage() と port.onmessage を使用して、それぞれワーカーにメッセージを投稿し、ワーカーから送られたメッセージを処理します。

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

second.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.
}

• Worker