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