index.slim

html
  link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"
  css:
    #message-box{
      height: 300px;
      overflow: auto; scroll;
      background-color: #989898;
      padding-left: 10px;
      margin-bottom: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
    .submited-message{
      padding-left: 10px;
    }
  body
    .container
      .row
        .col-lg-8.col-lg-offset-2
          h1 Mini Chatter
          #message-box.row-fluid
          .row-fluid
            form#new-message role="form" 
              .form-group
                label for="content"  Type message
                input#new-message-content.form-control placeholder=("Enter message") type="content" 
              button.btn.btn-default type="submit"  Submit

  javascript:
    var username = "User_" + Math.floor((Math.random()*1000)+1);
    var connection = new WebSocket('ws://'+ location.host + '/?username=' + username);

    connection.onmessage = function(e){
      var response = JSON.parse(e.data);
      appendToMessageBox(response.username, response.message);
    }

    document.forms["new-message"].onsubmit = function(){
        var messageText = document.getElementById("new-message-content");
        if(messageText.value != ''){
          var newMessage = {
            'username': username,
            'message': messageText.value
          };
          connection.send(JSON.stringify(newMessage));
          messageText.value ='';
        }
        return false;
    }

    function appendToMessageBox(name, message){
        var newContent = document.createElement('h4');
        var nameLabel = document.createElement('span');
        var labelClass = 'label label-';

        if(message == "connected"){
          labelClass += 'success';
        }else if(message == "disconnected"){
          labelClass += 'danger';
        }else{
          labelClass += 'primary';
        }

        nameLabel.className = labelClass;
        nameLabel.innerHTML = name;

        var messageContent = document.createElement('span');
        messageContent.className = "submited-message"
        messageContent.innerHTML = message;

        newContent.appendChild(nameLabel)
        newContent.appendChild(messageContent)

        var messageBox = document.getElementById("message-box");
        messageBox.appendChild(newContent);
        messageBox.scrollTop = messageBox.scrollHeight;
    }