- From: poot <cvsmail@w3.org>
- Date: Thu, 25 Mar 2010 16:57:02 +0900 (JST)
- To: public-html-diffs@w3.org
workers; hixie: Fix the recently added examples. (whatwg r4866) http://dev.w3.org/cvsweb/html5/workers/Overview.html?r1=1.238&r2=1.239&f=h http://html5.org/tools/web-apps-tracker?from=4865&to=4866 =================================================================== RCS file: /sources/public/html5/workers/Overview.html,v retrieving revision 1.238 retrieving revision 1.239 diff -u -d -r1.238 -r1.239 --- Overview.html 25 Mar 2010 00:52:59 -0000 1.238 +++ Overview.html 25 Mar 2010 07:56:32 -0000 1.239 @@ -466,16 +466,76 @@ example. Shared workers use slightly different APIs, since each worker can have multiple connections.<p>This first example shows how you connect to a worker and how a worker can send a message back to the page when it connects to - it. Received messages are displayed in a log.<p>Here is the HTML page:<pre>EXAMPLE workers/shared/001/test.html</pre><p>Here is the JavaScript worker:<pre>EXAMPLE workers/shared/001/test.js</pre><hr><p>This second example extends the first one by changing two things: + it. Received messages are displayed in a log.<p>Here is the HTML page:<pre><!DOCTYPE HTML> +<title>Shared workers: demo 1</title> +<pre id="log">Log:</pre> +<script> + var worker = new SharedWorker('test.js'); + var log = document.getElementById('log'); + worker.port.onmessage = function(e) { // note: not worker.onmessage! + log.textContent += '\n' + e.data; + } +</script> +</pre><p>Here is the JavaScript worker:<pre>onconnect = function(e) { + var port = e.ports[0]; + port.postMessage('Hello World!'); +} +</pre><hr><p>This second example extends the first one by changing two things: first, messages are received using <code title="">addEventListener()</code> instead of an <span title="event handler IDL attributes">event handler IDL attribute</span>, and second, a message is sent <em>to</em> the worker, causing the worker to send another message in return. Received messages are again - displayed in a lot.<p>Here is the HTML page:<pre>EXAMPLE workers/shared/001/test.html</pre><p>Here is the JavaScript worker:<pre>EXAMPLE workers/shared/001/test.js</pre><hr><p>Finally, the example is extended to show how two pages can + displayed in a log.<p>Here is the HTML page:<pre><!DOCTYPE HTML> +<title>Shared workers: demo 1</title> +<pre id="log">Log:</pre> +<script> + var worker = new SharedWorker('test.js'); + var log = document.getElementById('log'); + worker.port.onmessage = function(e) { // note: not worker.onmessage! + log.textContent += '\n' + e.data; + } +</script> +</pre><p>Here is the JavaScript worker:<pre>onconnect = function(e) { + var port = e.ports[0]; + port.postMessage('Hello World!'); +} +</pre><hr><p>Finally, the example is extended to show how two pages can connect to the same worker; in this case, the second page is merely in an <code>iframe</code> on the first page, but the same principle would apply to an entirely separate page in a separate - <span>top-level browsing context</span>.<p>Here is the outer HTML page:<pre>EXAMPLE workers/shared/003/test.html</pre><p>Here is the inner HTML page:<pre>EXAMPLE workers/shared/003/inner.html</pre><p>Here is the JavaScript worker:<pre>EXAMPLE workers/shared/003/test.js</pre><h4 id="shared-state-using-a-shared-worker"><span class="secno">1.2.5 </span>Shared state using a shared worker</h4><p><i>This section is non-normative.</i><p>In this example, multiple windows (viewers) can be opened that + <span>top-level browsing context</span>.<p>Here is the outer HTML page:<pre><!DOCTYPE HTML> +<title>Shared workers: demo 3</title> +<pre id="log">Log:</pre> +<script> + var worker = new SharedWorker('test.js'); + var log = document.getElementById('log'); + worker.port.addEventListener('message', function(e) { + log.textContent += '\n' + e.data; + }, false); + worker.port.start(); + worker.port.postMessage('ping'); +</script> +<iframe src="inner.html"></iframe> +</pre><p>Here is the inner HTML page:<pre><!DOCTYPE HTML> +<title>Shared workers: demo 3 inner frame</title> +<pre id=log>Inner log:</pre> +<script> + var worker = new SharedWorker('test.js'); + var log = document.getElementById('log'); + worker.port.onmessage = function(e) { + log.textContent += '\n' + e.data; + } +</script> +</pre><p>Here is the JavaScript worker:<pre>var count = 0; +onconnect = function(e) { + count += 1; + var port = e.ports[0]; + port.postMessage('Hello World! You are connection #' + count); + port.onmessage = function(e) { + port.postMessage('pong'); + } +} +</pre><h4 id="shared-state-using-a-shared-worker"><span class="secno">1.2.5 </span>Shared state using a shared worker</h4><p><i>This section is non-normative.</i><p>In this example, multiple windows (viewers) can be opened that are all viewing the same map. All the windows share the same map information, with a single worker coordinating all the viewers. Each viewer can move around independently, but if they set any data on
Received on Thursday, 25 March 2010 07:57:31 UTC