diff options
Diffstat (limited to 'files/zh-cn/web/api/worker/postmessage/index.html')
| -rw-r--r-- | files/zh-cn/web/api/worker/postmessage/index.html | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/worker/postmessage/index.html b/files/zh-cn/web/api/worker/postmessage/index.html new file mode 100644 index 0000000000..bc31892eec --- /dev/null +++ b/files/zh-cn/web/api/worker/postmessage/index.html @@ -0,0 +1,210 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +tags: + - Worker + - Worker.postMessage() + - postMessage() +translation_of: Web/API/Worker/postMessage +--- +<p>{{APIRef("Web Workers API")}}</p> + +<p>{{domxref("Worker")}} 接口的 <code><strong>postMessage()</strong></code>方法向worker的内部作用域发送一个消息。这接受单个参数，这是要发送给worker的数据。数据可以是由<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm">结构化克隆</a>算法处理的任何值或JavaScript对象，其包括循环引用。</p> + +<p>工作者可以使用 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 方法将信息发送回生成它的线程。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">myWorker.postMessage(aMessage, transferList);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>aMessage</em></dt> + <dd>The object to deliver to the worker; this will be in the data field in the event delivered to the {{domxref("DedicatedWorkerGlobalScope.onmessage")}} handler. This may be any value or JavaScript object handled by the <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> algorithm, which includes cyclical references.</dd> + <dt><em>transferList</em> {{optional_inline}}</dt> + <dd>一个可选的{{domxref("Transferable")}}对象的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">数组</a>，用于传递所有权。如果一个对象的所有权被转移，在发送它的上下文中将变为不可用（中止），并且只有在它被发送到的worker中可用。</dd> + <dd>可转移对象是如{{domxref("ArrayBuffer")}}，{{domxref("MessagePort")}}或{{domxref("ImageBitmap")}}的实例对象。transferList数组中不可传入null。</dd> +</dl> + +<h3 id="Returns">Returns</h3> + +<p>Void.</p> + +<h2 id="Example">Example</h2> + +<p>以下代码显示了如何使用 {{domxref("Worker.Worker", "Worker()")}} 构造函数创建一个Worker对象。当两个表单输入(<code>first</code>和<code>second)</code>中的其中一个的输入值改变时， {{event("change")}} 事件将调用<code>postMessage()</code>把两个input的值发送给当前worker。</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>有关完整的示例，请参阅我们的<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p> + +<div class="note"> +<p><strong>Note</strong>: <code>postMessage()</code> 一次只能发送一个对象。如上所示，如果你想传递多个值，可以使用数组。</p> +</div> + +<h3 id="Transfer_Example">Transfer Example</h3> + +<p>This example shows a Firefox add-on that transfers an <code>ArrayBuffer</code> from the main thread to the <code>ChromeWorker</code>, and then the <code>ChromeWorker</code> transfers it back to the main thread.</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>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> goes to 0 as it is transferred. To see a full working example of this Firefox demo add-on see here: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("Web Workers")}}.</td> + </tr> + <tr> + <td>{{SpecName('Web Workers', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> + <td>{{Spec2('Web Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0 [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0 [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer does not support {{domxref("Transferable")}} objects.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{domxref("Worker")}} interface it belongs to.</li> +</ul> |