Thanks to visit codestin.com
Credit goes to developer.mozilla.org

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

SharedWorker

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

SharedWorker インターフェイスは、ウィンドウ、iframe、ワーカーなど複数の閲覧コンテキストからアクセスできる、特定の種類のワーカーを表します。これらは専用ワーカーとは異なるインターフェイスを実装しており、異なるグローバルコンテキストである SharedWorkerGlobalScope を持ちます。

メモ: SharedWorkerが複数の閲覧コンテキストからアクセスできる場合、それらの閲覧コンテキストはすべて、まったく同じオリジン(同じプロトコル、ホスト、ポート)を共有している必要があります。

EventTarget SharedWorker

コンストラクター

SharedWorker()

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

インスタンスプロパティ

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

SharedWorker.port 読取専用

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

イベント

error

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

メソッド

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

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

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

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

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

js
myWorker.port.start();

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

js
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 ハンドラーを使用します。

js
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.
};

仕様書

Specification
HTML
# shared-workers-and-the-sharedworker-interface

ブラウザーの互換性

関連情報