|
|
@@ -9,90 +9,87 @@
|
|
|
<body>
|
|
|
<section class="start">
|
|
|
<h1><a href="/">PeerJS</a> <span class="title">docs</span></h1>
|
|
|
- <h2>Get started with PeerJS</h2>
|
|
|
-
|
|
|
- <div class="warning">Due to browsers' incomplete support of the WebRTC DataChannel specification, many features of PeerJS have caveats.<br><a href="/status">View the status page for full details</a>.</div>
|
|
|
- <p>PeerJS requires two components: the PeerJS client library and the PeerServer.</p>
|
|
|
-
|
|
|
- <h2>PeerServer</h2>
|
|
|
-
|
|
|
- <p>The PeerServer brokers connections between PeerJS clients. Once two clients have established a connection with each other with the PeerServer's help, data is will flow between the clients directly.</p>
|
|
|
- <p>Choose one of the following options:</p>
|
|
|
- <p><a href="/peerserver">Sign up for free cloud-hosted PeerServer service</a></p>
|
|
|
- <p>Alternatively, <a href="http://github.com/peers/peerjs-server">PeerServer is
|
|
|
- available on GitHub</a> and on <a href="https://npmjs.org/package/peer">npm</a>:</a>
|
|
|
- <pre><code>npm install peer</code></pre>
|
|
|
- <p>Setting up the server on your own is just a few lines of code:</a>
|
|
|
- <pre><code>var PeerServer = require('peer').PeerServer;
|
|
|
- var server = new PeerServer({ port: 9000 });</code></pre>
|
|
|
-
|
|
|
- <h2>PeerJS Client</h2>
|
|
|
-
|
|
|
- <p>The client is where all the action is at.<p>
|
|
|
- <h3>1. Include the PeerJS client in your frontend Javascript code:</h3>
|
|
|
- <pre><code><script src="http://cdn.peerjs.com/0/peer.min.js"></script>
|
|
|
- </code></pre>
|
|
|
- <h3>2. Create the Peer object.</h3>
|
|
|
- <p>
|
|
|
- You'll need to provide an ID. When other peers try to connect to you, they'll have to know this ID.</p>
|
|
|
- <p>
|
|
|
- Also you'll need to provide either the API key for your PeerServer cloud account or your own PeerServer:
|
|
|
- </p>
|
|
|
- <pre><code>var peer = new Peer('some-id', {key: 'myapikey'});
|
|
|
- </code></pre>
|
|
|
- <p>Or if you're running your own PeerServer</p>
|
|
|
- <pre><code>var peer = new Peer('some-id', {host: 'localhost', port: 9000});
|
|
|
- </code></pre>
|
|
|
- <h3>3. That's it! You're ready to send and receive binary P2P data connections!</h3>
|
|
|
- <p>Listening for incoming connections:</p>
|
|
|
- <pre><code>peer.on('connection', function(conn){
|
|
|
- conn.on('data', function(data) {
|
|
|
- console.log('Got data:', data);
|
|
|
- });
|
|
|
- });
|
|
|
- </code></pre>
|
|
|
-
|
|
|
- <p>Create a peer connection:</p>
|
|
|
- <pre><code>var conn = peer.connect('some-id');
|
|
|
- conn.on('open', function() {
|
|
|
- conn.send('Hello world!');
|
|
|
- });
|
|
|
- </code></pre>
|
|
|
-
|
|
|
- <h2>Other cool things you need to know</h2>
|
|
|
-
|
|
|
- <h3>What kind of data can I send?</h3>
|
|
|
-
|
|
|
- <p>PeerJS has the BinaryPack serialization format built-in. This means you can send any JSON type as well as binary Blobs and ArrayBuffers. You don't have to worry about serializing yourself. Simple put objects in on one side and get objects out on the other:</p>
|
|
|
- <pre><code>conn.send({
|
|
|
- strings: 'hi!',
|
|
|
- numbers: 150,
|
|
|
- arrays: [1,2,3],
|
|
|
- evenbinary: new Blob([1,2,3]),
|
|
|
- andmore: {bool: true}
|
|
|
- });
|
|
|
- </code></pre>
|
|
|
- <p>With BinaryPack, the data is never converted to strings. Everything is binary end-to-end. This results in bandwidth savings.
|
|
|
+ <h2>Get started with PeerJS</h2>
|
|
|
+
|
|
|
+ <div class="warning">Due to browsers' incomplete support of the WebRTC DataChannel specification, many features of PeerJS have caveats.<br><a href="/status">View the status page for full details</a>.</div>
|
|
|
+ <p>PeerJS requires two components: the PeerJS client library and the PeerServer.</p>
|
|
|
+
|
|
|
+ <h2>PeerServer</h2>
|
|
|
+
|
|
|
+ <p>The PeerServer brokers connections between PeerJS clients. Once two clients have established a connection with each other with the PeerServer's help, data is will flow between the clients directly.</p>
|
|
|
+ <p>Choose one of the following options:</p>
|
|
|
+ <p><a href="/peerserver">Sign up for free cloud-hosted PeerServer service</a></p>
|
|
|
+ <p>Alternatively, <a href="http://github.com/peers/peerjs-server">PeerServer is
|
|
|
+ available on GitHub</a> and on <a href="https://npmjs.org/package/peer">npm</a>:</a>
|
|
|
+ <pre>npm install peer</pre>
|
|
|
+ <p>Setting up the server on your own is just a few lines of code:</a>
|
|
|
+ <pre>
|
|
|
+var PeerServer = require('peer').PeerServer;
|
|
|
+var server = new PeerServer({ port: 9000 });</pre>
|
|
|
+
|
|
|
+ <h2>PeerJS Client</h2>
|
|
|
+
|
|
|
+ <p>The client is where all the action is at.<p>
|
|
|
+ <h3>1. Include the PeerJS client in your frontend Javascript code:</h3>
|
|
|
+ <pre><script src="http://cdn.peerjs.com/0/peer.min.js"></script></pre>
|
|
|
+ <h3>2. Create the Peer object.</h3>
|
|
|
+ <p>
|
|
|
+ You'll need to provide an ID. When other peers try to connect to you, they'll have to know this ID.</p>
|
|
|
+ <p>
|
|
|
+ Also you'll need to provide either the API key for your PeerServer cloud account or your own PeerServer:
|
|
|
</p>
|
|
|
-
|
|
|
- <h3>Preconnection</h3>
|
|
|
-
|
|
|
- <p>When you try to connect to a peer, PeerServer will hold a connection offer for up to 5 seconds before rejecting it. This is useful if you want to reconnect to a peer as it disconnects and reconnects rapidly between web pages.</p>
|
|
|
-
|
|
|
- <h3>Connection latency/bandwidth</h3>
|
|
|
-
|
|
|
- <p>Data sent between the two peers do not touch any other servers, so the connection speed is limited only by the upload and download rates of the two peers. This also means you don't have the additional latency of an intermediary server.</p>
|
|
|
- <p>The latency to establish a connection is identified by two factors: the brokering of data and identifying of clients. PeerJS has been carefully coded to minimize latency in both applications. Data is brokered through an XHR streaming request before a WebSocket connection is established, then through WebSocket afterwards. Identity is self-provided and thus a new client can report identity, accept an outstanding offer, and and provide answer and thus establish the peer-to-peer connection in very few RTTs.</p>
|
|
|
- <p>Note that in the infrequent case that both peers are behind symmetric NATs, this is no longer true. See below.</p>
|
|
|
-
|
|
|
- <h3>Peer-to-peer shortingcomings</h3>
|
|
|
-
|
|
|
- <p>A very low percentage of users are behind symmetric NATs. When two symmetric NAT users try to connect to each other, NAT traversal is impossible and no connection can be made. A workaround is to proxy through what is known as a TURN server. The PeerServer cloud service does not provide a TURN server. You'll have to find your own. You can pass a TURN server into the <tt>Peer</tt> object options. This will allow your PeerJS app to work seamlessly for this situation</p>
|
|
|
-
|
|
|
- <h3>Current state of browser compatibility</h3>
|
|
|
-
|
|
|
- <p><a href="/status">Detailed browser compatibility information</a></p>
|
|
|
- <p><a href="https://groups.google.com/forum/?fromgroups#!forum/peerjs">Discuss PeerJS on our Google Group</a></p>
|
|
|
+ <pre>var peer = new Peer('some-id', {key: 'myapikey'});</pre>
|
|
|
+ <p>Or if you're running your own PeerServer</p>
|
|
|
+ <pre>var peer = new Peer('some-id', {host: 'localhost', port: 9000});</pre>
|
|
|
+ <h3>3. That's it! You're ready to send and receive binary P2P data connections!</h3>
|
|
|
+ <p>Listening for incoming connections:</p>
|
|
|
+<pre>peer.on('connection', function(conn){
|
|
|
+ conn.on('data', function(data) {
|
|
|
+ console.log('Got data:', data);
|
|
|
+ });
|
|
|
+});</pre>
|
|
|
+
|
|
|
+ <p>Create a peer connection:</p>
|
|
|
+<pre>var conn = peer.connect('some-id');
|
|
|
+conn.on('open', function() {
|
|
|
+ conn.send('Hello world!');
|
|
|
+});</pre>
|
|
|
+
|
|
|
+ <h2>Other cool things you need to know</h2>
|
|
|
+
|
|
|
+ <h3>What kind of data can I send?</h3>
|
|
|
+
|
|
|
+ <p>PeerJS has the BinaryPack serialization format built-in. This means you can send any JSON type as well as binary Blobs and ArrayBuffers. You don't have to worry about serializing yourself. Simple put objects in on one side and get objects out on the other:</p>
|
|
|
+ <pre>
|
|
|
+conn.send({
|
|
|
+ strings: 'hi!',
|
|
|
+ numbers: 150,
|
|
|
+ arrays: [1,2,3],
|
|
|
+ evenbinary: new Blob([1,2,3]),
|
|
|
+ andmore: {bool: true}
|
|
|
+});
|
|
|
+ </pre>
|
|
|
+ <p>With BinaryPack, the data is never converted to strings. Everything is binary end-to-end. This results in bandwidth savings.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>Preconnection</h3>
|
|
|
+
|
|
|
+ <p>When you try to connect to a peer, PeerServer will hold a connection offer for up to 5 seconds before rejecting it. This is useful if you want to reconnect to a peer as it disconnects and reconnects rapidly between web pages.</p>
|
|
|
+
|
|
|
+ <h3>Connection latency/bandwidth</h3>
|
|
|
+
|
|
|
+ <p>Data sent between the two peers do not touch any other servers, so the connection speed is limited only by the upload and download rates of the two peers. This also means you don't have the additional latency of an intermediary server.</p>
|
|
|
+ <p>The latency to establish a connection is identified by two factors: the brokering of data and identifying of clients. PeerJS has been carefully coded to minimize latency in both applications. Data is brokered through an XHR streaming request before a WebSocket connection is established, then through WebSocket afterwards. Identity is self-provided and thus a new client can report identity, accept an outstanding offer, and and provide answer and thus establish the peer-to-peer connection in very few RTTs.</p>
|
|
|
+ <p>Note that in the infrequent case that both peers are behind symmetric NATs, this is no longer true. See below.</p>
|
|
|
+
|
|
|
+ <h3>Peer-to-peer shortingcomings</h3>
|
|
|
+
|
|
|
+ <p>A very low percentage of users are behind symmetric NATs. When two symmetric NAT users try to connect to each other, NAT traversal is impossible and no connection can be made. A workaround is to proxy through what is known as a TURN server. The PeerServer cloud service does not provide a TURN server. You'll have to find your own. You can pass a TURN server into the <tt>Peer</tt> object options. This will allow your PeerJS app to work seamlessly for this situation</p>
|
|
|
+
|
|
|
+ <h3>Current state of browser compatibility</h3>
|
|
|
+
|
|
|
+ <p><a href="/status">Detailed browser compatibility information</a></p>
|
|
|
+ <p><a href="https://groups.google.com/forum/?fromgroups#!forum/peerjs">Discuss PeerJS on our Google Group</a></p>
|
|
|
|
|
|
</section>
|
|
|
|
Michelle Bu