[html5] r4475 - [e] (0) intro for channel messaging Fixing http://www.w3.org/Bugs/Public/show_bu [...]

whatwg at whatwg.org whatwg at whatwg.org
Mon Jan 4 23:29:05 PST 2010


Author: ianh
Date: 2010-01-04 23:29:01 -0800 (Mon, 04 Jan 2010)
New Revision: 4475

Modified:
   complete.html
   index
   source
Log:
[e] (0) intro for channel messaging
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8255

Modified: complete.html
===================================================================
--- complete.html	2010-01-05 06:44:19 UTC (rev 4474)
+++ complete.html	2010-01-05 07:29:01 UTC (rev 4475)
@@ -976,10 +976,11 @@
      <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>
@@ -1135,10 +1136,10 @@
    <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>
@@ -1156,7 +1157,7 @@
      <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>
@@ -67577,8 +67578,45 @@
 
   <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> {
   readonly attribute <a href=#messageport>MessagePort</a> <a href=#dom-channel-port1 title=dom-channel-port1>port1</a>;
@@ -67646,7 +67684,7 @@
 
 
 
-  <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>
@@ -67933,7 +67971,7 @@
   </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>
 
@@ -79023,7 +79061,7 @@
   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
@@ -79061,7 +79099,7 @@
 
   <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
@@ -80272,7 +80310,7 @@
 
   <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>

Modified: index
===================================================================
--- index	2010-01-05 06:44:19 UTC (rev 4474)
+++ index	2010-01-05 07:29:01 UTC (rev 4475)
@@ -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>
@@ -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>
@@ -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>
@@ -59204,8 +59205,45 @@
 
   <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> {
   readonly attribute <a href=#messageport>MessagePort</a> <a href=#dom-channel-port1 title=dom-channel-port1>port1</a>;
@@ -59273,7 +59311,7 @@
 
 
 
-  <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>
@@ -59560,7 +59598,7 @@
   </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>
 
@@ -70650,7 +70688,7 @@
   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
@@ -70688,7 +70726,7 @@
 
   <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
@@ -71899,7 +71937,7 @@
 
   <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>

Modified: source
===================================================================
--- source	2010-01-05 06:44:19 UTC (rev 4474)
+++ source	2010-01-05 07:29:01 UTC (rev 4475)
@@ -77079,6 +77079,47 @@
 
   <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>]




More information about the Commit-Watchers mailing list