2014-09-29 09:58:44 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = utf-8 / >
2014-10-06 14:16:32 +02:00
< title > PeerJs Xml Example< / title >
2014-09-29 09:58:44 +02:00
< 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 >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < / script >
2014-10-06 14:16:32 +02:00
< style >
/* Browser specific (not valid) styles to make preformatted text wrap */
code {
white-space: nowrap; /* css-3 */
}
< / style >
2014-09-29 09:58:44 +02:00
< / head >
2014-10-02 21:14:37 +02:00
< body id = "collaborative" >
< h1 > PeerJs + XML Example< / h1 >
< p > Collaborative XML editing with < a href = "https://github.com/DadaMonad/Yatta/" > Yatta< / a >
2014-09-29 09:58:44 +02:00
and < a href = "http://peerjs.com/" > PeerJs< / a > (WebRTC). < / p >
< p > < a href = "https://github.com/DadaMonad/Yatta/" > Yatta< / a > is a Framework for Real-Time collaboration on arbitrary data structures.
2014-10-06 14:16:32 +02:00
You can find the code for this example < a href = "https://github.com/DadaMonad/Yatta/tree/master/examples/XmlExample" > here< / a > .
2014-10-17 13:13:53 +00:00
< p > Open this link on other clients: < a id = "peer_link" target = "_blank" > Drop me < / a > < / p > Share this link, in order to build a peer-to-peer based network via WebRTC. Changes won't be recorded by any server.
2014-10-06 14:16:32 +02:00
< p > Open the console and use DOM and jQuery in order to manipulate the body-element of this website. You can see live changes on other clients.< / p >
2014-10-17 13:13:53 +00:00
< h4 > Sample code for the console: < / h4 >
2014-10-06 14:16:32 +02:00
< nowrap >
< code > $("body").append('< div id="div_tag"> some new div tag < /div> ');< / code > < br / >
< code > $("#div_tag").empty();< / code > < br / >
< code > $("< p> < i> This is inserted after every p tag< /i> < /p> ").insertAfter("p");< / code > < br / >
< code > $("p i").remove();< / code > < br / >
< / nowrap >
2014-10-02 21:14:37 +02:00
2014-09-29 09:58:44 +02:00
< / p >
< / body >
< / html >
