Firebase chat demo

by teknohippy

HTML

<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>

JavaScript

var myDataRef = new Firebase('https://chat-test-240d4.firebaseio.com/');

$(function() {
  $('#messageInput').keypress(function(e) {
    if (e.keyCode == 13) {
      var name = $('#nameInput').val();
      var text = $('#messageInput').val();
      //myDataRef.set('User ' + name + ' says ' + text);
      myDataRef.push({
        name: name,
        text: text
      });
      $('#messageInput').val('');
    }
  });

  myDataRef.on('child_added', function(snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
  });

  function displayChatMessage(name, text) {
    $('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#messagesDiv'));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
  };
});