Chat now works on the client side

2 files changed, 126 insertions, 0 deletions

diff --git a/static/chat.js b/static/chat.js
new file mode 100644
index 0000000..d9c89fe
--- /dev/null
+++ b/static/chat.js
@@ -0,0 +1,100 @@
+function askTryAgain(reason, ws_url) {
+	if(confirm("Could not join chat (Reason: "+ reason +"). Try again?")) {
+		window.setTimeout(RunChat, 1, ws_url); // We use a timeout, so we don't accidentally fill up the call stack.
+	}
+}
+
+function addBuddy(nick) {
+	var found = false;
+	$("#buddies li").each(function(index) {
+		if($(this).text() == nick) {
+			found = true;
+		}
+	});
+	if(!found) {
+		$("#buddies").append($("<li/>").text(nick));
+	}
+}
+
+function removeBuddy(nick) {
+	$("#buddies li").each(function(index) {
+		var self = $(this);
+		if(self.text() == nick) {
+			self.remove();
+		}
+	});
+}
+
+function chatlogWriter(event) {
+	var data = JSON.parse(event.data);
+	var msgtext = "";
+	switch(data.type) {
+	case "chat":
+		msgtext = data.text;
+		break;
+	case "join":
+		msgtext = "joined the room";
+		addBuddy(data.user);
+		break;
+	case "leave":
+		msgtext = "left the room";
+		removeBuddy(data.user);
+		break;
+	}
+	
+	var elemNick = $("<span/>").addClass("nick").text(data.user);
+	var elemText = $("<span/>").addClass("msg").text(msgtext);
+	var logentry = $("<li/>").addClass(data.type).append(elemNick).append(elemText);
+	$("#chatlog").append(logentry);
+	window.scrollTo(0, logentry.offset().top);
+}
+
+function initChatSender(ws) {
+	var send = function() {
+		var ct = $("#chattext")
+		ws.send(ct.prop("value"));
+		ct.prop("value","");
+		ct.focus();
+	};
+	
+	$("#sendbtn").click(send);
+	$("#chattext").keyup(function(event) {
+		if(event.keyCode==13) {
+			send();
+		}
+	});
+}
+
+function Join(ws_url, nick) {
+	var ws = new WebSocket(ws_url, "chat");
+	ws.onopen = function(_) {
+		ws.send(nick); 
+		ws.onmessage = function(event) {
+			var data = JSON.parse(event.data);
+			if(data.ok) {
+				ws.onmessage = chatlogWriter;
+				for(i in data.buddies) {
+					addBuddy(data.buddies[i]);
+				}
+				initChatSender(ws);
+				ws.onclose = function(_) {
+					alert("Connection lost. Try refreshing the page.");
+				};
+			} else {
+				ws.close();
+				askTryAgain(data.error, ws_url);
+			}
+		};
+	};
+}
+
+function RunChat(ws_url) {
+	var nick = "";
+	while(nick == "") {
+		nick = prompt("Choose a nickname");
+		if(nick === null) {
+			return;
+		}
+	}
+	Join(ws_url, nick);
+}
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..00fe4a4
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,26 @@
+* {
+	font-family: sans-serif;
+}
+
+#chatlog {
+	display: table;
+	list-style: none;
+	margin: 0;
+	padding: 0
+}
+
+#chatlog li {
+	display: table-row;
+	margin: 0;
+	padding: 0;
+}
+
+#chatlog li .nick {
+	display: table-cell;
+	padding-right: 1ex;
+	font-weight: bold;
+}
+
+#chatlog li .msg {
+	display: table-cell;
+}
\ No newline at end of file