Edit in JSFiddle

$(document).ready(function() {

  dpd.messages.on('create', function(message) {
    renderMessage(message);
  });

  dpd.messages.get(function(messages) {
    if (messages) {
      messages.forEach(function(m) {
        renderMessage(m);
      });
    }
  });

  $('#send-btn').click(sendMessage);

  function renderMessage(message) {
    var $el = $('<li>');
    $el.append('<strong>' + message.sender + ': </strong>');
    $el.append(message.message);
    $el.appendTo('#chatbox');
  }

  function sendMessage() {
    var sender = $('#screen-name').val();
    var message = $('#message').val();
    dpd.messages.post({
      sender: sender,
      message: message
    }, function(message, err) {
      if (err) {
        if (err.message) {
          alert(err.message);
        } else if (err.errors) {
          var errors = "";
          if (err.errors.sender) {
            errors += err.errors.sender + "\n";
          } 
          if (err.errors.message) {
            errors += err.errors.message + "\n";
          } 
          alert(errors);
        }
      } else {
        $('#message').val('');
      }
    });

    return false;
  }

});

<div class="container">
    <h1>Deployd Chatroom</h1>
    <ul id="chatbox" class="unstyled">

    </ul>
    <form class="form-inline">
      <input type="text" class="input-small" id="screen-name" placeholder="Screen name" />
      <input type="text" class="input-xlarge" id="message" />
      <button id="send-btn" class="btn btn-primary">Send</button>
    </form>
    <p class="muted">Open this page in multiple browser windows to see it update in real time!</p>
  </div>

#chatbox {
    margin-top: 20px;
    padding: 10px;
    height: 300px;
    border: 1px #CCCCCC solid;
    overflow-y: scroll;
}