$("#login").click(function () { $(this).focus(); // Focus on the "Create User" button. var username = $("#username").val(); // Grab the Username var publicKey = $("#publicKey").val(); // Grab the Public Key // Make sure that something was entered for the Username and Public Key if (username.length > 0 && publicKey.length > 0) { // Initialize PubNub var pubnub = PUBNUB.init({ publish_key: 'demo', subscribe_key: 'demo', uuid: username }); // This function updates the table by calling here_now. var updateTable = function () { pubnub.here_now({ channel: 'doge_key_exchange', state: true, callback: function (m) { $("#here_now").html("<pre>// pubnub.here_now() returns...<br><br>" + JSON.stringify(m, undefined, 2) + "</pre>"); // Prints the results of the `here_now` call. var table = $("tbody"); table.empty(); var foundSelf = false; var str = ""; for (var i = 0; i < m.uuids.length; i++) { var state = m.uuids[i].state; str += "<tr><td>" + (i + 1) + "</td><td>" + state.username + "</td><td>" + state.publicKey + "</td></tr>"; if (state.username === username && state.publicKey === publicKey) { foundSelf = true; $("#username").val(""); $("#publicKey").val(""); } } table.append(str); if (!foundSelf) { // If the results of our here_now call // doesn't include ourself, try again. updateTable(); } } }); }; pubnub.subscribe({ channel: 'doge_key_exchange', callback: function (m) { console.log(m); }, state: { username: username, publicKey: publicKey }, presence: updateTable, heartbeat: 60 }); } }); // Detect when the enter key is pressed $(document).bind("enterKey", function () { if ($("#username").val().length === 0) { $("#username").focus(); } else if ($("#publicKey").val().length === 0) { $("#publicKey").focus(); } else { $("#login").click(); } }); $(document).keyup(function (e) { if (e.keyCode == 13) { $(this).trigger("enterKey"); } });
<div class="jumbotron"> <h1>PubNub Key Exchange</h1> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon">Username</span> <input id="username" type="text" class="form-control" placeholder="'doge'"> </div> </div> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon">Public Key</span> <input id="publicKey" type="text" class="form-control" placeholder="'much_security'"> </div> </div> <button id="login" type="button" class="btn btn-primary">Create User</button> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <table id="user_key" class="table table-hover"> <thead> <tr> <th><strong>#</strong> </th> <th><strong>Username</strong> </th> <th><strong>Public Key</strong> </th> </tr> </thead> <tbody></tbody> </table> </div> <div class="col-md-6"> <div id="here_now"> <pre>// pubnub.here_now() returns...</pre> </div> </div> </div> </div>