From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/sharedworker/index.html | 116 +++++++++++++++++++++ files/fr/web/api/sharedworker/port/index.html | 55 ++++++++++ .../web/api/sharedworker/sharedworker/index.html | 101 ++++++++++++++++++ 3 files changed, 272 insertions(+) create mode 100644 files/fr/web/api/sharedworker/index.html create mode 100644 files/fr/web/api/sharedworker/port/index.html create mode 100644 files/fr/web/api/sharedworker/sharedworker/index.html (limited to 'files/fr/web/api/sharedworker') diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html new file mode 100644 index 0000000000..bb9e9f5a39 --- /dev/null +++ b/files/fr/web/api/sharedworker/index.html @@ -0,0 +1,116 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +tags: + - API + - Interface + - Reference + - Shared + - SharedWorker + - Worker +translation_of: Web/API/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

L'interface SharedWorker représente un type spécifique de worker qui peut être accédé à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.

+ +
+

Remarque : si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)

+
+ +

Constructeurs

+ +
+
{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
+
Crée un web worker partagé qui exécute le script spécifié par l'URL.
+
+ +

Propriétés

+ +

Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type error se propage à travers le worker.
+
{{domxref("SharedWorker.port")}} {{readonlyInline}}
+
Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.
+
+ +
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.

+ +

Exemple

+ +

Dans notre  Exemple basique d'un worker partagé (lancer le worker partagé), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.

+ +

L'extrait de code suivant illustre la création d'un objet SharedWorker en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :

+ +
var myWorker = new SharedWorker("worker.js");
+ +

Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode start() :

+ +
myWorker.port.start();
+ +

Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement port.postMessage() et port.onmessage :

+ +
first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message envoyé au worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message envoyé au worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message reçu du worker');
+  }
+ +

Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété ports de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} start() pour démarrer le port, et le gestionnaire onmessage pour s'occuper des messages en provenance des threads principaux.

+ +
onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.onmessage = function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    }
+
+    port.start();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}Aucune modification de {{SpecName("Web Workers")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html new file mode 100644 index 0000000000..80605091d8 --- /dev/null +++ b/files/fr/web/api/sharedworker/port/index.html @@ -0,0 +1,55 @@ +--- +title: SharedWorker.port +slug: Web/API/SharedWorker/port +translation_of: Web/API/SharedWorker/port +--- +
{{APIRef("Web Workers API")}}
+ +

La propriété port de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le worker partagé.

+ +

Syntaxe

+ +
myWorker.port;
+ +

Valeur

+ +

Un objet {{domxref("MessagePort")}}.

+ +

Exemple

+ +

L'exemple de code suivant montre la création de l'objet SharedWorker en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au worker avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété SharedWorker.port — le port est ouvert avec la méthode start().

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

Pour un exemple complet, voir (en) Exemple basique de worker partagé ((en) démonstration d'un worker partagé.)

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationsStatusCommentaire
{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorker.port")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html new file mode 100644 index 0000000000..fb98ecbe33 --- /dev/null +++ b/files/fr/web/api/sharedworker/sharedworker/index.html @@ -0,0 +1,101 @@ +--- +title: SharedWorker() +slug: Web/API/SharedWorker/SharedWorker +translation_of: Web/API/SharedWorker/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

Le constructeur SharedWorker() crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la politique de même origine.

+ +
+

Remarque: Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.

+
+ +

Syntaxe

+ +
var monWorker = new SharedWorker(uneURL, nom);
+var monWorker = new SharedWorker(uneURL, options);
+ +

Paramètre

+ +
+
uneURL
+
Une {{domxref("DOMString")}} qui représente l'URL du scripte du worker qui sera exécuté. Il doit obéir à la politique de même origine.
+
nom {{optional_inline}}
+
Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du worker. Souvent utilisé pour le débogage.
+
options {{optional_inline}}
+
Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont: +
    +
  • type: Une {{domxref("DOMString")}} spécifiant le type de worker à créer. Les valeurs possibles sont: classic ou module. Si non spécifié, la valeur par défaut est classic.
    • +
  • credentials: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le worker. La valeur peut être omit, same-origin ou include. Si non spécifié ou si le type est classic, la valeur par défaut sera omit (pas de crédit nécéssaire).
    • +
  • name: Une {{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du worker, souvent utilisé pour déboguer.
    • +
+
+
+ +

Valeur retournée

+ +

Le woker créé.

+ +

Exceptions

+ + + +

Exemple

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur SharedWorker() et l'usage qui en est fait.

+ +
var myWorker = new SharedWorker('worker.js');
+
+myWorker.port.start();
+
+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');
+}
+ +

Pour l'exemple en complet, voir Basic shared worker example (run shared worker.)

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorker.SharedWorker")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf