Revision 965877 of WebRTC data channels

<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>

<p>{{SeeCompatTable}}</p>

<p>The <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications) API is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels. This article explains more about this, and shows you how to use libraries to implement data channels in your game.</p>

<h2 id="What_is_a_data_channel">What is a data channel?</h2>

<p>A WebRTC data channel lets you send text or binary data over an active connection to a peer. In the context of a game, this lets players send data to each other, whether text chat or game status information. Data channels come in two flavors.</p>

<p><strong>Reliable channels</strong> guarantee that messages you send arrive at the other peer and in the same order in which they're sent. This is analogous to a TCP socket.</p>

<p><strong>Unreliable channels</strong> make no such guarantees; messages aren't guaranteed to arrive in any particular order and, in fact, aren't guaranteed to arrive at all. This is analogous to a UDP socket.</p>

<p>We have <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">documentation for using WebRTC</a>. This article, however, will take advantage of some libraries that can help trivialize the work, and will demonstrate ways to use abstraction to work around implementation differences between browsers. Hopefully, of course, those differences will fade away in time.</p>

<h2 id="Using_the_p2p_library">Using the p2p library</h2>

<p>One library you can use is the <a href="https://github.com/js-platform/p2p" title="https://github.com/js-platform/p2p">p2p</a> library. This library provides a simple API for creating peer connections and setting up streams and data channels. There's also a broker server component and a hosted broker you can use instead of having to set one up for yourself.</p>

<div class="note">
<p><strong>Note:</strong> We will continue to add content here soon; there are some organizational issues to sort out.</p>
</div>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<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</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>23 {{ property_prefix("webkit") }}</td>
   <td>22 {{ property_prefix("moz") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>12</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo() }}</td>
   <td>29 {{ property_prefix("webkit") }}</td>
   <td>25 {{ property_prefix("moz") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div class="originaldocinfo">
<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>

<ul>
 <li>Author(s): Alan Kligman</li>
 <li>Source Article: <a href="https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/" title="https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/">WebRTC Data Channels for Great Multiplayer</a></li>
 <li>Other Contributors: Robert Nyman</li>
 <li>Copyright Information: Alan Kligman, 2013</li>
</ul>
</div>

<p>&nbsp;</p>