Complete implementation of chat system

AlexandruGhergut · Apr 28, 2016 · 20ac507 · 20ac507
1 parent 13f2d63
commit 20ac507
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/assets/scripts/chat.js b/assets/scripts/chat.js
@@ -0,0 +1,22 @@
+var username = prompt("Enter your username: ");
+var textBox = document.getElementById("inputTextBox");
+var messageList = document.getElementById("messages");
+
+function appendMessage(message, backgroundColor) {
+	var listItem = document.createElement("li");
+	var listItemText = document.createTextNode(message);
+	listItem.appendChild(listItemText);
+	if (arguments.length == 2)
+		listItem.style.background = backgroundColor;
+
+	messages.appendChild(listItem);
+}
+
+function sendMessage() {
+	var message = username + ": " + document.getElementById("inputTextBox").value;
+	textBox.value = ""; // clear textbox
+	appendMessage(message, "white");
+	socket.emit("chat_message", message);
+	console.log("message");
+	return false;
+} 
diff --git a/index.html b/index.html
@@ -9,20 +9,6 @@
 
 	<body>
 		<script> 
-			function sendMessage() {
-				var textBox = document.getElementById("inputTextBox");
-				var message = document.getElementById("inputTextBox").value;
-				textBox.value = ""; // clear textbox
-
-				var listItem = document.createElement("li");
-				var listItemText = document.createTextNode(message);
-				listItem.appendChild(listItemText);
-				listItem.style.background = "white";
-
-				var messageList = document.getElementById("messages");
-				messages.appendChild(listItem);
-				return false;
-			} 
 		</script>
 		<canvas id="myCanvas" width="200" height="100">	
 		</canvas>
@@ -39,5 +25,14 @@
 				</div>
 			</form>
 		</div>
+
+		<script src="/socket.io/socket.io.js"></script>
+		<script> var socket = io(); </script>
+		<script src = "assets/scripts/chat.js"></script>
+		<script>
+			socket.on("chat_message", function(message) {
+				appendMessage(message);
+			});
+		</script>
 	</body>
 </html>
diff --git a/index.js b/index.js
@@ -12,6 +12,17 @@ app.get('/', function(request, response){
   response.sendFile(__dirname + "/index.html");
 });
 
+io.on('connection', function(socket) {
+	socket.on('disconnect', function(){
+    	console.log('user disconnected');
+    	io.emit('chat_message', 'user disconnected');
+    });
+
+    socket.on('chat_message', function(message) {
+    	socket.broadcast.emit('chat_message', message);
+    });
+});
+
 http.listen(PORT, function(){
   console.log('listening on localhost:' + PORT);
 });