yonote/yjs
14
0
Fork 0
Code Pull Requests 1 Releases Activity

renamed to yjs

Browse Source
This commit is contained in:
DadaMonad
2015-01-26 23:24:50 +00:00
parent d5c7d51dc4
commit 978203d73e
57 changed files with 83 additions and 54177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/XMPP/index.html
View File

@@ -2,20 +2,19 @@
<html>
<head>
<meta charset=utf-8 />
<title>PeerJs Json Example</title>
<script src="../../../Yatta-Connectors/xmpp-connector/xmpp-connector.js"></script>
<script src="../../build/browser/yatta.js"></script>
<title>Y Example</title>
<script src="../../build/browser/y.js"></script>
<script src="../../../y-connectors/y-xmpp/y-xmpp.js"></script>
<script src="./index.js"></script>
</head>
<body>
<h1 contentEditable> PeerJs + Json Tutorial</h1>
<p> Collaborative Json editing with <a href="https://github.com/DadaMonad/Yatta/">Yatta</a>
and <a href="http://peerjs.com/">PeerJs</a> (WebRTC). </p>
<h1 contentEditable> yjs Tutorial</h1>
<p> Collaborative Json editing with <a href="https://github.com/rwth-acis/yjs/">yjs</a>
and XMPP Connector. </p>
<textarea style="width:80%;" rows=40 id="textfield"></textarea>
<p> <a href="https://github.com/DadaMonad/Yatta/">Yatta</a> is a Framework for Real-Time collaboration on arbitrary data structures.
You can find the code for this example <a href="https://github.com/DadaMonad/Yatta/tree/master/examples/PeerJs-Json">here</a>.
<p> <a href="https://github.com/rwth-acis/yjs/">yjs</a> is a Framework for Real-Time collaboration on arbitrary data types.
</p>
</body>
</html>

52
examples/XMPP/index.js
View File

@@ -1,59 +1,25 @@
/**
## PeerJs + JSON Example
Here, I will give a short overview on how to enable collaborative json with the
[PeerJs](http://peerjs.com/) Connector and the Json Framework. Open
[index.html](http://dadamonad.github.io/Yatta/examples/PeerJs-Json/index.html) in your Browser and
use the console to explore Yatta!
[PeerJs](http://peerjs.com) 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/JsonFramework.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](http://peerjs.com/peerserver).
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.
*/
connector = new XMPPConnector("testy-xmpp-json2");
connector = new Y.XMPP("testy-xmpp-json2");
connector.debug = true
/**
### Yatta
yatta is the shared json object. If you change something on this object,
it will be instantly shared with all the other collaborators.
*/
yatta = new Yatta(connector);
y = new Y(connector);
window.onload = function(){
var textbox = document.getElementById("textfield");
yatta.observe(function(events){
y.observe(function(events){
for(var i=0; i<events.length; i++){
var event = events[i];
if(event.name === "textfield" && event.type !== "delete"){
yatta.val("textfield").bind(textbox);
yatta.val("headline").bind(document.querySelector("h1"))
y.val("textfield").bind(textbox);
y.val("headline").bind(document.querySelector("h1"))
}
}
});
connector.whenSynced(function(){
if(yatta.val("textfield") == null){
yatta.val("headline","headline", "mutable");
yatta.val("textfield","stuff", "mutable")
if(y.val("textfield") == null){
y.val("headline","headline", "mutable");
y.val("textfield","stuff", "mutable")
}
})