Skip to content

Commit

Permalink
[e] (0) intro for channel messaging
Browse files Browse the repository at this point in the history 
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8255

git-svn-id: http://svn.whatwg.org/webapps@4475 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jan 5, 2010
1 parent 03af8cf commit 932722e
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 24 deletions.
62 changes: 50 additions & 12 deletions complete.html
View file
Expand Up @@ -976,10 +976,11 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
<li><a href=#posting-messages-with-message-ports><span class=secno>10.4.4 </span>Posting messages with message ports</a></ol></li>
<li><a href=#channel-messaging><span class=secno>10.5 </span>Channel messaging</a>
<ol>
<li><a href=#message-channels><span class=secno>10.5.1 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>10.5.2 </span>Message ports</a>
<li><a href=#introduction-9><span class=secno>10.5.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>10.5.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>10.5.3 </span>Message ports</a>
<ol>
<li><a href=#ports-and-garbage-collection><span class=secno>10.5.2.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#ports-and-garbage-collection><span class=secno>10.5.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#syntax><span class=secno>11 </span>The HTML syntax</a>
<ol>
<li><a href=#writing><span class=secno>11.1 </span>Writing HTML documents</a>
Expand Down Expand Up @@ -1135,10 +1136,10 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
<li><a href=#parsing-xhtml-fragments><span class=secno>12.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>13 </span>Rendering</a>
<ol>
<li><a href=#introduction-9><span class=secno>13.1 </span>Introduction</a></li>
<li><a href=#introduction-10><span class=secno>13.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>13.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
<li><a href=#introduction-10><span class=secno>13.2.1 </span>Introduction</a></li>
<li><a href=#introduction-11><span class=secno>13.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>13.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>13.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>13.2.4 </span>Alignment</a></li>
Expand All @@ -1156,7 +1157,7 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
<li><a href=#toolbars-0><span class=secno>13.3.5 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>13.4 </span>Bindings</a>
<ol>
<li><a href=#introduction-11><span class=secno>13.4.1 </span>Introduction</a></li>
<li><a href=#introduction-12><span class=secno>13.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>13.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>13.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>13.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
Expand Down Expand Up @@ -67577,7 +67578,44 @@ <h4 id=posting-messages-with-message-ports><span class=secno>10.4.4 </span>Posti

<h3 id=channel-messaging><span class=secno>10.5 </span><dfn>Channel messaging</dfn></h3>

<h4 id=message-channels><span class=secno>10.5.1 </span>Message channels</h4>
<h4 id=introduction-9><span class=secno>10.5.1 </span>Introduction</h4>

<p><i>This section is non-normative.</i></p>

<p>To enable independent pieces of code (e.g. running in different
<a href=#browsing-context title="browsing context">browsing contexts</a>) to
communicate directly, authors can use <a href=#channel-messaging>channel
messaging</a>.</p>

<p>Communication channels in this mechanisms are implemented as
two-ways pipes, with a port at each end. Messages sent in one port
are delivered at the other port, and vice-versa. Messages are
asynchronous, and delivered as DOM events.</p>

<p>To create a connection (two "entangled" ports), the <code title="">MessageChannel()</code> constructor is called:</p>

<pre>var channel = new MessageChannel();</pre>

<p>One of the ports is kept as the local port, and the other port is
sent to the remote code, e.g. using <code title=dom-window-postMessage-3><a href=#dom-window-postmessage-3>postMessage()</a></code>:</p>

<pre>otherWindow.postMessage('hello', [channel.port2], 'http://example.com');</pre>

<p>To send messages, the <code title=dom-MessagpePort-postMessage>postMessage()</code> method on
the port is used:</p>

<pre>channel.port1.postMessage('hello');</pre>

<p>To receive messages, one listens to <code title=event-message><a href=#event-message>message</a></code> events:</p>

<pre>channel.port1.onmessage = handleMessage;
function handleMessage(event) {
// message is in event.data
// ...
}</pre>


<h4 id=message-channels><span class=secno>10.5.2 </span>Message channels</h4>

<pre class=idl>[<a href=#dom-messagechannel title=dom-MessageChannel>Constructor</a>]
interface <dfn id=messagechannel>MessageChannel</dfn> {
Expand Down Expand Up @@ -67646,7 +67684,7 @@ <h4 id=message-channels><span class=secno>10.5.1 </span>Message channels</h4>



<h4 id=message-ports><span class=secno>10.5.2 </span>Message ports</h4>
<h4 id=message-ports><span class=secno>10.5.3 </span>Message ports</h4>

<p>Each channel has two message ports. Data sent through one port is
received by the other port, and vice versa.</p>
Expand Down Expand Up @@ -67933,7 +67971,7 @@ <h4 id=message-ports><span class=secno>10.5.2 </span>Message ports</h4>
</div>


<h5 id=ports-and-garbage-collection><span class=secno>10.5.2.1 </span>Ports and garbage collection</h5>
<h5 id=ports-and-garbage-collection><span class=secno>10.5.3.1 </span>Ports and garbage collection</h5>

<div class=impl>

Expand Down Expand Up @@ -79023,7 +79061,7 @@ <h2 id=rendering><span class=secno>13 </span>Rendering</h2>
lead to this experience.</i></p>


<h3 id=introduction-9><span class=secno>13.1 </span>Introduction</h3>
<h3 id=introduction-10><span class=secno>13.1 </span>Introduction</h3>

<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
Expand Down Expand Up @@ -79061,7 +79099,7 @@ <h3 id=introduction-9><span class=secno>13.1 </span>Introduction</h3>

<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>13.2 </span>The CSS user agent style sheet and presentational hints</h3>

<h4 id=introduction-10><span class=secno>13.2.1 </span>Introduction</h4>
<h4 id=introduction-11><span class=secno>13.2.1 </span>Introduction</h4>

<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
Expand Down Expand Up @@ -80272,7 +80310,7 @@ <h4 id=toolbars-0><span class=secno>13.3.5 </span>Toolbars</h4>

<h3 id=bindings><span class=secno>13.4 </span>Bindings</h3>

<h4 id=introduction-11><span class=secno>13.4.1 </span>Introduction</h4>
<h4 id=introduction-12><span class=secno>13.4.1 </span>Introduction</h4>

<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
Expand Down
62 changes: 50 additions & 12 deletions index
View file
Expand Up @@ -830,10 +830,11 @@
<li><a href=#posting-messages-with-message-ports><span class=secno>8.2.4 </span>Posting messages with message ports</a></ol></li>
<li><a href=#channel-messaging><span class=secno>8.3 </span>Channel messaging</a>
<ol>
<li><a href=#message-channels><span class=secno>8.3.1 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>8.3.2 </span>Message ports</a>
<li><a href=#introduction-6><span class=secno>8.3.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>8.3.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>8.3.3 </span>Message ports</a>
<ol>
<li><a href=#ports-and-garbage-collection><span class=secno>8.3.2.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#ports-and-garbage-collection><span class=secno>8.3.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#syntax><span class=secno>9 </span>The HTML syntax</a>
<ol>
<li><a href=#writing><span class=secno>9.1 </span>Writing HTML documents</a>
Expand Down Expand Up @@ -989,10 +990,10 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>10.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>11 </span>Rendering</a>
<ol>
<li><a href=#introduction-6><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#introduction-7><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>11.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
<li><a href=#introduction-7><span class=secno>11.2.1 </span>Introduction</a></li>
<li><a href=#introduction-8><span class=secno>11.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>11.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>11.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>11.2.4 </span>Alignment</a></li>
Expand All @@ -1010,7 +1011,7 @@
<li><a href=#toolbars-0><span class=secno>11.3.5 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>11.4 </span>Bindings</a>
<ol>
<li><a href=#introduction-8><span class=secno>11.4.1 </span>Introduction</a></li>
<li><a href=#introduction-9><span class=secno>11.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>11.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>11.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>11.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
Expand Down Expand Up @@ -59204,7 +59205,44 @@ function receiver(e) {

<h3 id=channel-messaging><span class=secno>8.3 </span><dfn>Channel messaging</dfn></h3>

<h4 id=message-channels><span class=secno>8.3.1 </span>Message channels</h4>
<h4 id=introduction-6><span class=secno>8.3.1 </span>Introduction</h4>

<p><i>This section is non-normative.</i></p>

<p>To enable independent pieces of code (e.g. running in different
<a href=#browsing-context title="browsing context">browsing contexts</a>) to
communicate directly, authors can use <a href=#channel-messaging>channel
messaging</a>.</p>

<p>Communication channels in this mechanisms are implemented as
two-ways pipes, with a port at each end. Messages sent in one port
are delivered at the other port, and vice-versa. Messages are
asynchronous, and delivered as DOM events.</p>

<p>To create a connection (two "entangled" ports), the <code title="">MessageChannel()</code> constructor is called:</p>

<pre>var channel = new MessageChannel();</pre>

<p>One of the ports is kept as the local port, and the other port is
sent to the remote code, e.g. using <code title=dom-window-postMessage-3><a href=#dom-window-postmessage-3>postMessage()</a></code>:</p>

<pre>otherWindow.postMessage('hello', [channel.port2], 'http://example.com');</pre>

<p>To send messages, the <code title=dom-MessagpePort-postMessage>postMessage()</code> method on
the port is used:</p>

<pre>channel.port1.postMessage('hello');</pre>

<p>To receive messages, one listens to <code title=event-message><a href=#event-message>message</a></code> events:</p>

<pre>channel.port1.onmessage = handleMessage;
function handleMessage(event) {
// message is in event.data
// ...
}</pre>


<h4 id=message-channels><span class=secno>8.3.2 </span>Message channels</h4>

<pre class=idl>[<a href=#dom-messagechannel title=dom-MessageChannel>Constructor</a>]
interface <dfn id=messagechannel>MessageChannel</dfn> {
Expand Down Expand Up @@ -59273,7 +59311,7 @@ interface <dfn id=messagechannel>MessageChannel</dfn> {



<h4 id=message-ports><span class=secno>8.3.2 </span>Message ports</h4>
<h4 id=message-ports><span class=secno>8.3.3 </span>Message ports</h4>

<p>Each channel has two message ports. Data sent through one port is
received by the other port, and vice versa.</p>
Expand Down Expand Up @@ -59560,7 +59598,7 @@ interface <dfn id=messageport>MessagePort</dfn> {
</div>


<h5 id=ports-and-garbage-collection><span class=secno>8.3.2.1 </span>Ports and garbage collection</h5>
<h5 id=ports-and-garbage-collection><span class=secno>8.3.3.1 </span>Ports and garbage collection</h5>

<div class=impl>

Expand Down Expand Up @@ -70650,7 +70688,7 @@ document.body.appendChild(text);
lead to this experience.</i></p>


<h3 id=introduction-6><span class=secno>11.1 </span>Introduction</h3>
<h3 id=introduction-7><span class=secno>11.1 </span>Introduction</h3>

<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
Expand Down Expand Up @@ -70688,7 +70726,7 @@ document.body.appendChild(text);

<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>11.2 </span>The CSS user agent style sheet and presentational hints</h3>

<h4 id=introduction-7><span class=secno>11.2.1 </span>Introduction</h4>
<h4 id=introduction-8><span class=secno>11.2.1 </span>Introduction</h4>

<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
Expand Down Expand Up @@ -71899,7 +71937,7 @@ object[align=bottom] {

<h3 id=bindings><span class=secno>11.4 </span>Bindings</h3>

<h4 id=introduction-8><span class=secno>11.4.1 </span>Introduction</h4>
<h4 id=introduction-9><span class=secno>11.4.1 </span>Introduction</h4>

<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
Expand Down
41 changes: 41 additions & 0 deletions source
View file
Expand Up @@ -77079,6 +77079,47 @@ function receiver(e) {

<h3><dfn>Channel messaging</dfn></h3>

<h4>Introduction</h4>

<p><i>This section is non-normative.</i></p>

<p>To enable independent pieces of code (e.g. running in different
<span title="browsing context">browsing contexts</span>) to
communicate directly, authors can use <span>channel
messaging</span>.</p>

<p>Communication channels in this mechanisms are implemented as
two-ways pipes, with a port at each end. Messages sent in one port
are delivered at the other port, and vice-versa. Messages are
asynchronous, and delivered as DOM events.</p>

<p>To create a connection (two "entangled" ports), the <code
title="">MessageChannel()</code> constructor is called:</p>

<pre>var channel = new MessageChannel();</pre>

<p>One of the ports is kept as the local port, and the other port is
sent to the remote code, e.g. using <code
title="dom-window-postMessage-3">postMessage()</code>:</p>

<pre>otherWindow.postMessage('hello', [channel.port2], 'http://example.com');</pre>

<p>To send messages, the <code
title="dom-MessagpePort-postMessage">postMessage()</code> method on
the port is used:</p>

<pre>channel.port1.postMessage('hello');</pre>

<p>To receive messages, one listens to <code
title="event-message">message</code> events:</p>

<pre>channel.port1.onmessage = handleMessage;
function handleMessage(event) {
// message is in event.data
// ...
}</pre>


<h4>Message channels</h4>

<pre class="idl">[<span title="dom-MessageChannel">Constructor</span>]
Expand Down

0 comments on commit 932722e

Please sign in to comment.