function runExample(demoUrl) { var ref = new Firebase(demoUrl); var $inp = $('input[name=data]'); var $usr = $('input[name=user]'); var room = null, submitted = false, sub = null; // initiate the list of rooms ref.child('room_names').once('value', buildUserList); // handle input in the form fields $('form').submit(processForm); $inp.on('keyup', _.debounce(countChars, 50)); // create option tags in our room select function buildUserList(snap) { snap.forEach(function (ss) { $('<option />') .prop('value', ss.name()) .text(ss.val()) .appendTo('select'); }); pickRoom(); $('select').change(pickRoom); } // when the select is updated, load that room's messages function pickRoom() { $('ul.chatbox').empty(); if( room ) { // stop listening to the previous room room.off('child_added', newMessage); room.off('child_removed', dropMessage); } room = ref.child('messages').child($('select').val()); room.on('child_added', newMessage); room.on('child_removed', dropMessage); } // create a new message in the DOM after it comes // in from the server (via child_added) function newMessage(snap) { var $chat = $('ul.chatbox'); var dat = snap.val(); var txt = dat.name + ': ' + dat.message; $('<li />').attr('data-id', snap.name()).text(txt).appendTo($chat); $chat.scrollTop($chat.height()); } // remove message locally after child_removed function dropMessage(snap) { $('li[data-id="'+snap.name()+'"]').remove(); } // print results of write attempt so we can see if // rules allowed or denied the attempt function result(err) { if (err) { log(err.code, 'error'); } else { log('success!'); } } // post the forms contents and attempt to write a message function processForm(e) { e.preventDefault(); submitted = true; var userName = $usr.val(); var val = $inp.val(); $inp.val(null); if (!userName) { log('enter a username', 'error'); } else { ref.child('messages').child(room.name()).push({ name: userName, message: val, timestamp: Firebase.ServerValue.TIMESTAMP }, result); } } // tell user how many characters they have entered function countChars() { var len = $(this).val().length; if( len || !submitted ) { var style = len >= 50 ? 'error' : 'note'; log(len + ' characters', style); } return true; } // print write results function log(text, style) { delayedClear(); var $p = $('p.result').removeClass('error note success'); style && $p.addClass(style); $p.text(text); } var to; // clear write results after 5 seconds function delayedClear() { to && clearTimeout(to); to = setTimeout(clearNow, 5000); } // clear write results now function clearNow() { $('p.result').text(''); to && clearTimeout(to); to = null; submitted = false; } } // Dependencies used in this fiddle: // code.jquery.com/jquery-2.1.0.min.js // cdn-gh.firebase.com/demo-utils-script/demo-utils.js // cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js // // This line creates a unique, private Firebase URL // you can hack in! Have fun! $.loadSandbox('web/sec/advanced-example', 'web/sec/advanced-example').then(runExample);