SharedWorker

Das SharedWorker-Interface repräsentiert eine spezielle Art von Worker, der von mehreren Browsing-Kontexten, wie mehreren Fenstern, iframes oder sogar Workern, zugänglich ist. Sie implementieren ein anderes Interface als dedizierte Worker und haben einen anderen globalen Bereich, SharedWorkerGlobalScope.

Hinweis: Wenn auf SharedWorker von mehreren Browsing-Kontexten aus zugegriffen werden kann, müssen alle diese Browsing-Kontexte genau den gleichen Ursprung (gleiches Protokoll, gleicher Host und Port) teilen.

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 Schreibgeschützt: Gibt ein MessagePort-Objekt zurück, das zur Kommunikation mit 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 eines geteilten Workers (geteilten Worker ausführen), haben wir zwei HTML-Seiten, von denen jede ein JavaScript verwendet, um eine einfache Berechnung durchzuführen. Die verschiedenen Skripte verwenden die gleiche Worker-Datei, um die Berechnung durchzuführen – sie können beide darauf zugreifen, auch wenn ihre Seiten in verschiedenen 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 Shared Worker erstellt wurde, kann jedes Skript, das im gleichen Ursprung ausgeführt wird, eine Referenz auf diesen Worker erhalten und mit ihm kommunizieren. Der shared worker bleibt so lange am Leben, wie die Besitzer-Menge seines globalen Bereichs (eine Menge von Document- und WorkerGlobalScope-Objekten) nicht leer ist (zum Beispiel, wenn es eine offene Seite gibt, die eine Referenz darauf hält, vielleicht durch new SharedWorker()). Um mehr über die Lebensdauer von Shared Workern zu erfahren, siehe den Abschnitt The worker's lifetime in der HTML-Spezifikation.

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

myWorker.port.start();

Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und verarbeiten Nachrichten, die von ihm gesendet werden, mit port.postMessage() und port.onmessage, jeweils:

Hinweis: Sie können die Devtools Ihres Browsers verwenden, um Ihren SharedWorker zu debuggen, indem Sie eine URL in die Adressleiste Ihres Browsers eingeben, um auf das Devtools-Workers-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 Worker verwenden wir den onconnect-Handler, um denselben oben besprochenen Port zu verbinden. Die diesem Worker zugeordneten Ports sind im ports-Eigentum des connect-Ereignisses zugänglich – wir verwenden dann die MessagePort-start()-Methode, um den Port zu starten, und den onmessage-Handler, um Nachrichten zu verarbeiten, die von den Hauptthreads gesendet werden.

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