diff options
Diffstat (limited to 'files/fr/web/api/worker/postmessage/index.md')
-rw-r--r-- | files/fr/web/api/worker/postmessage/index.md | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/fr/web/api/worker/postmessage/index.md b/files/fr/web/api/worker/postmessage/index.md new file mode 100644 index 0000000000..76ea9d7e7e --- /dev/null +++ b/files/fr/web/api/worker/postmessage/index.md @@ -0,0 +1,152 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +translation_of: Web/API/Worker/postMessage +--- +<p>{{ apiref("Worker") }}</p> + +<p>La méthode <code><strong>Worker.postMessage()</strong></code> 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.</p> + +<p>Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>worker.</em>postMessage(<em>aMessage</em>, <em>[transferList</em>]);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><em>aMessage</em></dt> + <dd>L'objet à envoyer au worker; il va être dans le champ de donnée <code>data</code> 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 <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">clone structuré</a>, qui inclut les références cycliques.</dd> + <dt><em>transferList</em> {{optional_inline}}</dt> + <dd><p>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 (<em>neutralisé</em>) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.</p> + <p>Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. <code>null</code> n'est pas une valeur accéptée pour <code>transfer</code>.</p></dd> +</dl> + +<h3 id="Retour">Retour</h3> + +<p>Vide.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>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 (<code>fisrt</code> et <code>second</code>) ont été changés, les évènements {{event("change")}} invoquent <code>postMessage()</code> pour envoyer la valeur des deux entrées au <em>worker</em> courant.</p> + +<pre class="brush: js">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'); +}</pre> + +<p>Pour l'exemple en entier, voir <a href="https://github.com/mdn/simple-web-worker">Basic dedicated worder example</a> (<a href="http://mdn.github.io/simple-web-worker/">démonstration</a>).</p> + +<div class="note"> +<p><strong>Note :</strong> <code>postMessage()</code> peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.</p> +</div> + +<h3 id="Exemple_de_transfert">Exemple de transfert</h3> + +<p>Cette exemple montre une extension pour Firefox qui transfert un <code>ArrarBuffer</code> depuis le <em>thread</em> principal vers le <code>ChromeWorker</code>, et le <code>ChromeWorker</code> répond au le thread principal.</p> + +<h4 id="Main_thread_code">Main thread code:</h4> + +<pre class="brush: js">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);</pre> + +<h4 id="Worker_code">Worker code</h4> + +<pre class="brush: js">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); +}</pre> + +<h4 id="Output_logged">Output logged</h4> + +<pre class="brush: html">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</pre> + +<p><code>byteLength</code> passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.Worker.postMessage")}}</p> +[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface {{domxref("Worker")}} auquel il appartient.</li> +</ul> |