aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/worker/postmessage/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/worker/postmessage/index.md')
-rw-r--r--files/fr/web/api/worker/postmessage/index.md152
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>