From 287574622ab8a578aab57964dd834110fd72c59b Mon Sep 17 00:00:00 2001 From: stephen mcquay Date: Sun, 5 Apr 2015 22:42:47 -0700 Subject: [PATCH] react to user inputs actually send message to server --- static/index.html | 24 +++++++++++++----------- static/js/chat.js | 28 ++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/static/index.html b/static/index.html index 5ea23a2..1605f79 100644 --- a/static/index.html +++ b/static/index.html @@ -4,17 +4,13 @@ - chat + + chat
-

chat

-

- placeholder - -

placeholder
@@ -30,15 +26,21 @@
-
-
+
+
+ + + +
-
-

stream

-
+
+
+
+
+
diff --git a/static/js/chat.js b/static/js/chat.js index 7db4bc1..93b7db2 100644 --- a/static/js/chat.js +++ b/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(); + } } }