index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
      var ws;
      
      function createChatEntry(username, message) {
        var entry = document.createElement("div");
        entry.class = "chat_entry";
        
        var dom_uname = document.createElement("span");
        dom_uname.class = "chat_username";
        dom_uname.innerHTML = username+": ";
        entry.appendChild(dom_uname);
        
        var dom_msg = document.createElement("span");
        dom_msg.class = "chat_message";
        dom_msg.innerHTML = message;
        entry.appendChild(dom_msg);
        
        return entry;
      }
      
      function openWS(messageContainer) {
        ws = new WebSocket("ws://localhost:8042/control");
        ws.onmessage = function(e) {
          var data = JSON.parse(e.data);
          messageContainer.appendChild(createChatEntry(data.author, data.message));
        };
        ws.onclose = function(e) {
          openWS(messageContainer);
        };
      }
      
      function sendMessage() {
        var data = { author: document.getElementById("username").value,
                     message: document.getElementById("message").value };
        
        if(data.author && data.message) {
          ws.send(JSON.stringify(data));
        }
      }
      
      window.onload = function() {
        var messageContainer = document.getElementById("chat");
        if("WebSocket" in window) {
          messageContainer.appendChild(createChatEntry("[SYSTEM]", "WebSocket is supported by your browser!"));
          messageContainer.appendChild(createChatEntry("[SYSTEM]", "Pick a username and dropping some beats."));
          openWS(messageContainer);
        }
        else {
          messageContainer.appendChild(createChatEntry("[SYSTEM]", "WebSocket is NOT supported by your browser!"));
        }
      }
    </script>
  </head>
  <body>
    <div id="chat" style="width: 100%; height: 40em; overflow: scroll; font-family: Arial"></div>
    <div id="input_area">
      <input id="username" type="text" placeholder="Your username" style="display: block; width: 200px"></input>
      <textarea id="message" placeholder="Your message" style="display: block; width: 400px"></textarea>
      <button onclick="sendMessage()" style="display: block">Send</button>
    </div>
  </body>
</html>