aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/api/sharedworker
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/api/sharedworker')
-rw-r--r--files/de/web/api/sharedworker/index.html117
1 files changed, 117 insertions, 0 deletions
diff --git a/files/de/web/api/sharedworker/index.html b/files/de/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..52ecc8075b
--- /dev/null
+++ b/files/de/web/api/sharedworker/index.html
@@ -0,0 +1,117 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+ - API
+ - Interface
+ - Reference
+ - SharedWorker
+ - WebWorkers
+ - Workers
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>Das <code><strong>SharedWorker</strong></code> 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 {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Wenn auf einen SharedWorker von mehreren Browser Kontexten aus zugegriffen wird müssen all diese denselben Urpsrung haben. (Dasselbe Protocol, Host und Port)</p>
+</div>
+
+<h2 id="Konstruktoren">Konstruktoren</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Erstellt einen Shared Web Worker, der ein Script zu einer angegebenen URL ausführt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Erbt Eigenschaften von dem Parent {{domxref("EventTarget")}} und implementiert Eigenschaften von {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Ist ein{{domxref("EventListener")}} der immer aufgerufen wird wenn ein {{domxref("ErrorEvent")}} vom Typ <code>error</code> durch den Worker läuft.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Returnt ein {{domxref("MessagePort")}} Objekt, welches zum Kommunizieren und Kontrollieren des Shared Workers verwendet wird.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Erbt Methoden von dem Parent {{domxref("EventTarget")}} und implementiert Methoden von {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Grundlegenden Shared Worker Beispiel</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Shared Worker ausführen</a>), 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.</p>
+
+<p>Das folgende Code Beispiel zeigt das Erstellen eines <code>SharedWorker</code> Objekts unter der Verwendung des {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} Konstruktors. Beide Skripte enthalten:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+</pre>
+
+<p>Beide Skripte greifen dann auf den Worker durch ein {{domxref("MessagePort")}} Objekt zu, welches mithilfe von {{domxref("SharedWorker.port")}} erstellt wurde. Wenn das onmessage Event mithilfe von addEventListener angehängt wurde, wird der Port automatisch gestartet mittels der <code>start()</code> Methode:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>Wenn der Port gestartet ist senden beide Skripte Nachrichten an den Worker und behandeln die empfangenen Nachrichten von <code>port.postMessage()</code> und <code>port.onmessage</code>:</p>
+
+<pre class="brush: js">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');
+}</pre>
+
+<p>Innerhalb des Workers verwenden wird den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns an den oben genannten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die Eigenschaft <code>ports im</code> {{event("connect")}} Event zugänglich. Anschließend verwenden wir die {{domxref("MessagePort")}} <code>start()</code> Methode um den Port zu starten und verwenden den <code>onmessage</code> Handler um die Nachrichten aus dem Main Thread zu behandeln.</p>
+
+<pre class="brush: js">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.
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Spezifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Keine Änderung von {{SpecName("Web Workers")}}.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker verwenden</a></li>
+</ul>