SharedWorker - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

SharedWorker

Baseline 2026 *

Neu verfügbar

Seit May 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die SharedWorker-Schnittstelle repräsentiert eine spezielle Art von Worker, auf die von mehreren Browsing-Kontexten, wie mehreren Fenstern oder iframes, zugegriffen werden kann. Shared Worker implementieren eine andere Schnittstelle als dedizierte Worker, haben einen anderen globalen Gültigkeitsbereich (SharedWorkerGlobalScope) und ihr Konstruktor ist im DedicatedWorkerGlobalScope nicht verfügbar, sodass sie nicht von dedizierten Workern instanziiert werden können.

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

EventTarget SharedWorker

In diesem Artikel

Konstruktoren

SharedWorker()

Erstellt einen Shared Web Worker, der das Skript unter der angegebenen URL ausführt.

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternteil, EventTarget.

SharedWorker.port Schreibgeschützt

Gibt ein MessagePort-Objekt zurück, das zur Kommunikation und Steuerung des Shared Workers verwendet wird.

Ereignisse

error

Wird ausgelöst, wenn ein Fehler im Shared Worker auftritt.

Instanzmethoden

Erbt Methoden von seinem Elternteil, EventTarget.

Beispiel

Grundlegende Verwendung

In unserem Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML-Seiten, die jeweils mithilfe von JavaScript eine einfache Berechnung durchführen. Die verschiedenen Skripte verwenden die gleiche Worker-Datei, um die Berechnung durchzuführen – sie können beide darauf zugreifen, selbst wenn ihre Seiten in unterschiedlichen Fenstern laufen.

Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts unter Verwendung des SharedWorker()-Konstruktors. Beide Skripte enthalten Folgendes:

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 zu diesem Worker erhalten und mit ihm kommunizieren.

Ein Shared Worker bleibt so lange aktiv, wie eine offene Seite eine Referenz zu ihm hält. Die extendedLifetime-Konstruktoroption kann gesetzt werden, um einen Shared Worker für eine kurze Zeit am Leben zu halten, nachdem alle Referenzen geschlossen wurden. Dies ermöglicht es dem Worker, Aufräumaufgaben auszuführen, wie das Speichern von Zustandsinformationen oder das Senden von Analysedaten an Server. Weitere Informationen finden Sie unter Lebensdauer des Shared Workers in Verwendung von Web Workern.

Beide Skripte greifen dann über ein MessagePort-Objekt auf den Worker zu, das mit der SharedWorker.port-Eigenschaft erstellt wurde. Wenn das onmessage-Ereignis mit addEventListener angebunden wird, 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 bearbeiten Nachrichten, die von ihm gesendet werden, mit port.postMessage() und port.onmessage:

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

js
[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 Workers verwenden wir den onconnect-Handler, um uns mit dem oben diskutierten Port zu verbinden. Die mit diesem Worker verbundenen Ports sind über die ports-Eigenschaft 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 Haupt-Threads gesendet werden.

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

Worker

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Workers API
SharedWorker
Konstruktor
1. SharedWorker()
Instanzeigenschaften
1. port
Events
1. error
Vererbung
1. EventTarget
Verwandte Seiten für Web Workers API
Anleitungen
1. Verwendung von Web Workern
2. Funktionen und Klassen, die Web-Workern zur Verfügung stehen
3. Der strukturierte Klon-Algorithmus
4. Übertragbare Objekte