SharedWorker

Die SharedWorker-Schnittstelle repräsentiert eine spezielle Art von Worker, die von mehreren Browsing-Kontexten wie mehreren Fenstern, iframes oder sogar Workern angesprochen werden kann. Sie implementieren eine andere Schnittstelle als dedizierte Worker und haben einen anderen globalen Gültigkeitsbereich, SharedWorkerGlobalScope.

Hinweis: Damit SharedWorker von mehreren Browsing-Kontexten verwendet werden kann, müssen all diese Browsing-Kontexte exakt den gleichen Ursprung teilen (gleiches Protokoll, gleicher Host und Port).

Konstruktoren

SharedWorker(): Erstellt einen geteilten Web-Worker, der das Skript an der angegebenen URL ausführt.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, EventTarget.

SharedWorker.port Nur lesbar: Gibt ein MessagePort-Objekt zurück, das zur Kommunikation und Steuerung des geteilten Workers verwendet wird.

Ereignisse

error: Wird ausgelöst, wenn ein Fehler im geteilten Worker auftritt.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, EventTarget.

Beispiel

In unserem einfachen Beispiel für einen geteilten Worker (geteilten Worker ausführen) haben wir zwei HTML-Seiten, die jeweils ein JavaScript verwenden, um eine einfache Berechnung durchzuführen. Die unterschiedlichen Skripte nutzen dasselbe Worker-File, um die Berechnung durchzuführen — sie können beide darauf zugreifen, auch wenn ihre Seiten in unterschiedlichen Fenstern ausgeführt werden.

Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts mit dem SharedWorker()-Konstruktor. Beide Skripte enthalten dies:

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

Hinweis: Sobald ein geteilter Worker erstellt ist, kann jedes Skript, das im gleichen Ursprung läuft, eine Referenz zu diesem Worker erhalten und mit ihm kommunizieren. Der geteilte Worker bleibt so lange am Leben, wie das Eigentümer-Set seines globalen Umfangs (eine Menge von Document- und WorkerGlobalScope-Objekten) nicht leer ist (zum Beispiel, wenn es eine lebendige Seite gibt, die eine Referenz darauf hält, möglicherweise über new SharedWorker()). Um mehr über die Lebensdauer von geteilten Workern zu erfahren, siehe Die Lebensdauer des Workers Abschnitt der HTML-Spezifikation.

Beide Skripte greifen dann über ein MessagePort-Objekt, das mit der SharedWorker.port-Eigenschaft erstellt wurde, auf den Worker zu. Wenn das onmessage-Event mit addEventListener angehängt ist, wird der Port manuell mit seiner start()-Methode gestartet:

myWorker.port.start();

Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und empfangen Nachrichten von diesem unter Verwendung von port.postMessage() und port.onmessage entsprechend:

Hinweis: Sie können die Devtools Ihres Browsers nutzen, um Ihren SharedWorker zu debuggen, indem Sie eine URL in Ihre Browser-Adressleiste eingeben, um auf den Devtools-Worker-Inspektor zuzugreifen; zum Beispiel in Chrome die URL chrome://inspect/#workers und in Firefox die URL about:debugging#workers.

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

Im Inneren des Workers verwenden wir den onconnect-Handler, um denselben Port wie oben beschrieben zu verbinden. Die Ports, die mit diesem Worker verbunden sind, sind in der ports-Eigenschaft des connect-Events zugänglich — wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten, und den onmessage-Handler, um mit Nachrichten, die von den Haupt-Threads gesendet werden, umzugehen.

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Worker