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/worker/postmessage/index.html | 153 +++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/fr/web/api/worker/postmessage/index.html (limited to 'files/fr/web/api/worker/postmessage') diff --git a/files/fr/web/api/worker/postmessage/index.html b/files/fr/web/api/worker/postmessage/index.html new file mode 100644 index 0000000000..d8a3e7be93 --- /dev/null +++ b/files/fr/web/api/worker/postmessage/index.html @@ -0,0 +1,153 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +translation_of: Web/API/Worker/postMessage +--- +

{{ apiref("Worker") }}

+ +

La méthode Worker.postMessage() envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.

+ +

Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.

+ +

Syntaxe

+ +
worker.postMessage(aMessage, [transferList]);
+ +

Paramètres

+ +
+
aMessage
+
L'objet à envoyer au worker; il va être dans le champ de donnée data dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.
+
transferList {{optional_inline}}
+
Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (neutralisé) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.
+
Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. null n'est pas une valeur accéptée pour transfer.
+
+

Retour

+
+
+ +

Vide.

+ +

Exemple

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (fisrt et second) ont été changés, les évènements {{event("change")}} invoquent postMessage() pour envoyer la valeur des deux entrées au worker courant.

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

Pour l'exemple en entier, voir Basic dedicated worder example (démonstration).

+ +
+

Remarque: postMessage() peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.

+
+ +

Exemple de transfert

+ +

Cette exemple montre une extension pour Firefox qui transfert un ArrarBuffer depuis le thread principal vers le ChromeWorker, et le ChromeWorker répond au le thread principal.

+ +

Main thread code:

+ +
var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+ +

Worker code

+ +
self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+ +

Output logged

+ +
arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
+ +

byteLength passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir GitHub :: ChromeWorker - demo-transfer-arraybuffer

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Worker.postMessage")}}

+[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.
+ +

Voir aussi

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