Playing with Firebase

by sm1215

HTML

<script src="https://static.firebase.com/v0/firebase.js"></script>
<div class="container">
  <ul id="messages">
  </ul>
  
  <form class="form-inline">
    <input type="text" id="message_user" class="input-small" placeholder="User">
    <span>: </span>
    <input type="text" id="message_text" class="input-large" placeholder="Type something...">
  </form>
</div>

SCSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
  margin: 10px;
}

CoffeeScript

messages = new Firebase('https://domon.firebaseio.com/chat/messages')

$('#message_text').keypress (e) ->

  if e.keyCode is 13
    
    user = $('#message_user').val()
    text = $('#message_text').val()
    
    messages.push
      user: user
      text: text
    
    $(@).val ''
 
messages.on 'child_added', (snapshot) ->
  message = snapshot.val()
  $('#messages').append "<li>#{message.user}: #{message.text}</li>"