Examples > Security Rules > Advanced Example

Example from https://firebase.com/docs/platforms/web/guide/security-data.html

by Firebase

HTML

<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="https://cdn-gh.firebase.com/demo-utils-script/demo-utils.js"></script>
<p>Pick a room:
    <select></select>
</p>
<ul class="chatbox"></ul>
<form>
    <input name="user" type="text" placeholder="username..." />
    <input type="text" name="data" />
    <button type="submit">Send</button>
</form>
<p class="result"></p>
<p data-target="demo-links"></p>

CSS

ul.chatbox {
    height: 100px;
    background-color: #eee;
    border: 1px solid #aaa;
    padding: 10px;
    border-radius: 10px;
    overflow-y: auto;
    word-break: break-all;
    list-style-type: none;
}
p.result {
    color: #00AA00;
    font-weight: bold;
}
p.result.note {
    color: gray;
    font-weight: normal;
    font-style: italic;
}
p.result.error {
    color: red;
}
input[name="data"] {
    width: 200px;
}
input[name="user"] {
    width: 100px;
}
input {
    font-size: 14px;
    line-height: 16px;
}

JavaScript

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!');
        }
    }

    //...