making actual chat possible, and emitting events to all users

okcjs · Feb 19, 2012 · 91df203 · 91df203
1 parent 19a7226
commit 91df203
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/chat_app/public/index.html b/chat_app/public/index.html
@@ -8,12 +8,21 @@
 var socket = io.connect("http://localhost:1337");
 
 $(document).on("ready",function(){
+	//page setup
+	$("#chat").hide(); //hide this till the username is set.
+
+
 	//node handlers
 	socket.on("announcement",function(message){
 		$("#messages").append(
 			"<div class='announcement'>" + message + "</div>");
 	});
 
+	socket.on("message",function(message){
+		$("#messages").append(
+			"<div class='message'>" + message + "</div>");
+	});
+
 	//html handlers
 	$("#set-name-button").on("click",function(){
 		var name = $("#username").val();
@@ -23,17 +32,31 @@
 			if(isUsed){
 				alert("name is in use");
 			} else {
+				$("#name-inputs").hide();
+				$("#chat").show();
 			}
 		};
 		socket.emit("setname",name,nameCallback);
 	});
+
+	$("#chat").on("submit",function(){
+		socket.emit("message",$("#message").val());
+		$("#message").val("");
+		return false;
+	});
 });
 </script>
 </head>
 <body>
-<input id="username" type="text" />
-<input id="set-name-button" type="button" value="set name" />
+<div id="name-inputs">
+	<input id="username" type="text" />
+	<input id="set-name-button" type="button" value="set name" />
+</div>
 
-<div id="messages"></div>
+<form id="chat">
+	<div id="messages"></div>
+	<input id="message" type="text" />
+	<input id="send-message-button" type="submit" value="send" />
+</form>
 </body>
 </html>
diff --git a/chat_app/server.js b/chat_app/server.js
@@ -1,19 +1,19 @@
 var connect = require("connect");
-var io = require("socket.io");
+var sio = require("socket.io");
 
 connect(connect.static(__dirname + "/public")).listen(8000, function(){
 	console.log("static server listening on port 8000");
 });
 
 
-var ioServer = io.listen(1337,function(){
+var io = sio.listen(1337,function(){
 	console.log("socket server listening on port 1337");
 });
 
 var users = {};
 
 
-ioServer.sockets.on("connection", function(socket){
+io.sockets.on("connection", function(socket){
 	console.log("someone connected");
 
 	socket.on("setname",function(name,fn){
@@ -28,4 +28,8 @@ ioServer.sockets.on("connection", function(socket){
 
 		socket.emit("nameset",name);
 	});
+
+	socket.on("message",function(message){
+		io.sockets.emit("message", socket.name + ": " + message);
+	});
 });