yjs/examples/XmlExample

PeerJs + JSON Example

Here, I will give a short overview on how to enable collaborative json with the PeerJs Connector and the Json Framework. Open index.html in your Browser and use the console to explore Yatta!

PeerJs is a Framework that enables you to connect to other peers. You just need the user-id of the peer (browser/client). And then you can connect to it.

First you have to include the following libraries in your html file:

<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="../../build/browser/Frameworks/XmlFramework.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script>

Create Connector

The PeerJs Framework requires an API key, or you need to set up your own PeerJs server. Get an API key from the Website. The first parameter of createPeerJsConnector is forwarded as the options object in PeerJs. Therefore, you may also specify the server/port here, if you have set up your own server.

var yatta, yattaHandler;

This will connect to the server owned by the peerjs team. For now, you can use my API key.

// var conn = {key: 'h7nlefbgavh1tt9'};

This will connect to one of my peerjs instances. I can't guaranty that this will be always up. This is why you should use the previous method with the api key, or set up your own server.

var conn = {
  host: "terrific-peerjs.herokuapp.com",
  port: "", // this works because heroku can forward to the right port.
  // debug: true,
};

Y.createPeerJsConnector(conn, function(Connector, user_id){

  yatta = new Y.XmlFramework(user_id, Connector);

Get the url of this frame. If it has a url-encoded parameter we will connect to the foreign peer.

    var url = window.location.href;
    var peer_id = location.search
    var url = url.substring(0,-peer_id.length);
    peer_id = peer_id.substring(1);

Set the shareable link.

    document.getElementById("peer_link").setAttribute("href",url+"?"+user_id);

Connect to other peer.

    if (peer_id.length > 0){
      yatta.connector.connectToPeer(peer_id);
    }
    yatta.connector.onNewConnection(function(){
      $("#collaborative").replaceWith(yatta.val())
    });

    yatta.val($("#collaborative")[0])
    console.log(yatta.getUserId());

});