SharedWorker

Das SharedWorker Interface repräsentiert eine spezielle Art von Worker, auf welchen durch mehrere Kontexte zugegeriffen werden kann. Hier kann es sich um verschiedene Tabs, iFrames oder auch Worker handeln. Diese implementieren ein anderes Interface als dedicated Worker und haben einen anderen Global Scope SharedWorkerGlobalScope.

Note: Wenn auf einen SharedWorker von mehreren Browser Kontexten aus zugegriffen wird müssen all diese denselben Urpsrung haben. (Dasselbe Protocol, Host und Port)

Konstruktoren

SharedWorker()
Erstellt einen Shared Web Worker, der ein Script zu einer angegebenen URL ausführt.

Eigenschaften

Erbt Eigenschaften von dem Parent EventTarget und implementiert Eigenschaften von AbstractWorker.

AbstractWorker.onerror
Ist einEventListener der immer aufgerufen wird wenn ein ErrorEvent vom Typ error durch den Worker läuft.
SharedWorker.port Schreibgeschützt
Returnt ein MessagePort Objekt, welches zum Kommunizieren und Kontrollieren des Shared Workers verwendet wird.

Methoden

Erbt Methoden von dem Parent EventTarget und implementiert Methoden von AbstractWorker.

Beispiel

In unserem Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML Seiten, von denen beide etwas JavaScript verwenden um simple Kalkulationen auszuführen. Die verschiedenen Skripte verwenden dasselbe Worker File um die Kalkulation durchzuführen. Beide können auf dieses zugreifen, auch wenn diese in verschiedenen Fenstern ausgeführt werden.

Das folgende Code Beispiel zeigt das Erstellen eines SharedWorker Objekts unter der Verwendung des SharedWorker() Konstruktors. Beide Skripte enthalten:

var myWorker = new SharedWorker('worker.js');

Beide Skripte greifen dann auf den Worker durch ein MessagePort Objekt zu, welches mithilfe von SharedWorker.port erstellt wurde. Wenn das onmessage Event mithilfe von addEventListener angehängt wurde, wird der Port automatisch gestartet mittels der start() Methode:

myWorker.port.start();

Wenn der Port gestartet ist senden beide Skripte Nachrichten an den Worker und behandeln die empfangenen Nachrichten von port.postMessage() und port.onmessage:

first.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

myWorker.port.onmessage = function(e) {
  result1.textContent = e.data;
  console.log('Message received from worker');
}

Innerhalb des Workers verwenden wird den SharedWorkerGlobalScope.onconnect Handler um uns an den oben genannten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die Eigenschaft ports im connect Event zugänglich. Anschließend verwenden wir die MessagePort start() Methode um den Port zu starten und verwenden den onmessage Handler um die Nachrichten aus dem Main Thread zu behandeln.

onconnect = function(e) {
  var port = e.ports[0];

  port.addEventListener('message', function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von 'SharedWorker' in dieser Spezifikation.
Lebender Standard Keine Änderung von Unknown.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
SharedWorkerChrome Vollständige Unterstützung 4Edge ? Firefox Vollständige Unterstützung 29IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Keine Unterstützung 5 — 6.1WebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 33Opera Android Vollständige Unterstützung 11Safari iOS Keine Unterstützung 5.1 — 7Samsung Internet Android Vollständige Unterstützung Ja
SharedWorker() constructorChrome Vollständige Unterstützung 4Edge ? Firefox Vollständige Unterstützung 29IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Keine Unterstützung 5 — 6.1WebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 33Opera Android Vollständige Unterstützung 11Safari iOS Keine Unterstützung 5.1 — 7Samsung Internet Android Vollständige Unterstützung Ja
portChrome Vollständige Unterstützung 4Edge ? Firefox Vollständige Unterstützung 29IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10.6Safari Keine Unterstützung 5 — 6.1WebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 33Opera Android Vollständige Unterstützung 11Safari iOS Keine Unterstützung 5.1 — 7Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Siehe auch