react to user inputs

actually send message to server

static/js/chat.js

@@ -5,13 +5,19 @@ function authenticate(event) {
     websocket.send(JSON.stringify({name: $("#username").val() }));
 }
 
+function send(event) {
+    websocket.send("\"" + $("#uinput").val() + "\"\n");
+    $("#uinput").val("");
+}
+
 $(function(){
     $("#auth").hide();
     $("#alert").hide();
-    $("#user-display").hide();
     $("#stream").hide();
+    $("#uinputs").hide();
 
     $("#submit-username").click(authenticate);
+    $("#submit-uinput").click(send);
     setupWS();
 });
 
@@ -33,8 +39,8 @@ function onOpen(e) {
 
 function onClose(e) {
     console.error("websocket disconnected");
-    $("#alert").show().text("reload page");
-    $("#stream, #user-display, #auth").hide();
+    $("#alert").show().text("client disconnect; please reload page");
+    $("#stream, #auth").hide();
 }
 
 function onMessage(e) {
@@ -45,13 +51,23 @@ function onMessage(e) {
             $("#alert").show().text(payload.error);
             return;
         }
-        $("#user-display .name").text($("#username").val());
-        $("#user-display").show();
         $("#auth").hide();
         $("#stream").show();
+        $("#uinputs").show();
+        $(':input').keydown(function (e){
+            if(e.keyCode == 13){
+                send();
+            }
+        })
         state = "chatting";
     } else if (state === "chatting") {
-        console.log(payload);
+        var msg = $("#msg").clone();
+        msg.text(payload);
+        $("#chatter").prepend(msg.show());
+        var s = $("#chatter").children().size();
+        if (s > 20) {
+            var s = $("#chatter").children().last().remove();
+        }
     }
 }