Create P2P Apps Using Nothing but HTML and Javascript Part 1

The Newbound Network's powerful Javascript API enables the creation of powerful HTML5 apps that can communicate directly from browser to browser securely and privately. If you know a little HTML and Javascript, you can create dynamic and powerful P2P apps quickly and easily! This video shows how to create a chat app without the need for a chat server from beginning to end. Check out our full API Documentation for more information on creating your own P2P apps using HTML and Javascript.

UPDATE: Part 2 is now online, in which we explore the AJAX JSON Javascript API in order to build a P2P collaborative Wiki app.

Here's the code from the video:

<html>
<head>
    <title>Chat Bot</title>
    <link rel='stylesheet' href='../botmanager/themes/font.css'>
    <link rel="stylesheet" href="../botmanager/themes/newbound.min.css" />
    <link rel="stylesheet" href="../botmanager/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="../botmanager/jquerymobile_1_4_2/jquery.mobile.structure-1.4.2.min.css" />
    <script src="../botmanager/jquerymobile/jquery-1.9.1.min.js"></script>
    <script src="../botmanager/jquerymobile_1_4_2/jquery.mobile-1.4.2.min.js"></script>
    <script src="../botmanager/nav.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="../peerbot/connections.css" />
    <script src="../peerbot/connections.js"></script>
</head>
<body>
    <div id='botcontrols' data-role='page'>
        <div data-role="header">
            <h1 id="headertitle">Chat Bot</h1>
            <a href="../botmanager/index.html" data-icon="gear" data-ajax="false"></a>
        </div>
        <center>
          <div id='peerlist'></div>
          <div id='peermsg'></div>
        </center>
        <div id='displaychat'></div>
        <textarea id='entertext'></textarea>
        <input type='button' value='send' onclick='sendText();'>
    </div>

<script type='text/javascript'>

function sendText(){
    var t = $('#entertext').val();
    document.getElementById('displaychat').connection.send(t);
    $('#displaychat').append('Me:<br>'+t+'<br><br>');
    $('#entertext').val('');
}

function openWebsocket(){
    var url = document.URL;
    url = url.substring(url.indexOf(':'));
    url = 'ws'+url;
    var connection = new WebSocket(url, ['newbound']);
    
    connection.onopen = function(){
        connection.send('subscribe chat');
    };
    
    connection.onerror = function(error){
        console.log('Websocket error: '+error);
    };
    
    connection.onmessage = function(e){
        var o = JSON.parse(e.data);
        var peer = o.peer;
        var text = o.data;
        $('#displaychat').append(peer+':<br>'+text+'<br><br>');
    };
    
    document.getElementById('displaychat').connection = connection;
}

$(document).on('pagecreate', function(){
    buildConnectionBar('peerlist', openWebsocket);
});

</script>
        
</body>
</html>