SharedWorker

Limited availability

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

Das SharedWorker-Interface repräsentiert eine spezielle Art von Worker, der von mehreren Browsing-Kontexten, wie z.B. mehreren Fenstern, iframes oder sogar Workern, zugänglich gemacht werden kann. Sie implementieren eine andere Schnittstelle als dedizierte Worker und verfügen über einen anderen globalen Geltungsbereich, SharedWorkerGlobalScope.

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

Konstruktoren

SharedWorker(): Erstellt einen gemeinsam genutzten 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 und Steuerung des gemeinsam genutzten Workers verwendet wird.

Ereignisse

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

Instanz-Methoden

Erbt Methoden von seinem Elternteil, EventTarget.

Beispiel

In unserem einfachen Beispiel für einen gemeinsam genutzten Worker (run shared worker), haben wir zwei HTML-Seiten, von denen jede ein JavaScript verwendet, um eine einfache Berechnung durchzuführen. Die verschiedenen Skripte verwenden dieselbe Worker-Datei für die Berechnung — sie können beide auf sie zugreifen, selbst wenn ihre Seiten in verschiedenen Fenstern laufen.

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

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

Hinweis: Sobald ein gemeinsam genutzter Worker erstellt wurde, kann jedes Skript, das im gleichen Ursprung ausgeführt wird, eine Referenz auf diesen Worker erhalten und mit ihm kommunizieren. Der gemeinsam genutzte Worker bleibt so lange aktiv, wie die Eigentümermenge seines globalen Bereichs (eine Menge von Document- und WorkerGlobalScope-Objekten) nicht leer ist (zum Beispiel, wenn es eine lebende Seite gibt, die eine Referenz darauf hält, vielleicht durch new SharedWorker()). Weitere Informationen über die Lebensdauer von gemeinsam genutzten Workern finden Sie im Abschnitt Die Lebensdauer des Workers 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-Ereignis mit addEventListener angehängt wird, wird der Port manuell mithilfe seiner 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, mithilfe von port.postMessage() und port.onmessage:

Hinweis: Sie können die Entwicklertools des Browsers verwenden, um Ihren SharedWorker zu debuggen, indem Sie eine URL in die Adressleiste Ihres Browsers eingeben, um auf den Workers-Inspector der Entwicklertools zuzugreifen; zum Beispiel in Chrome die URL chrome://inspect/#workers und in Firefox die URL about:debugging#workers.

[first, second].forEach((input) => {
  input.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");
};

Innerhalb des Workerkontextes verwenden wir den onconnect-Handler, um eine Verbindung zum gleichen oben erwähnten Port herzustellen. Die mit diesem Worker verknüpften Ports sind in der ports-Eigenschaft des connect-Ereignisses zugänglich — wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten und den onmessage-Handler, um mit den Nachrichten umzugehen, die von den Haupt-Threads 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 # shared-workers-and-the-sharedworker-interface

Browser-Kompatibilität

Siehe auch

Worker