From cad1bba34605af4d385d8ee52ad019d5295a9786 Mon Sep 17 00:00:00 2001
From: pratap bunga <pratap234337@gmail.com>
Date: Mon, 19 Oct 2015 11:40:26 -0700
Subject: [PATCH] Created chatrooms and chating functionality

---
 app.js               |  7 ++--
 routes/routes.js     | 22 ++++++++++--
 socket/socket.js     | 44 +++++++++++++++++++++++-
 views/chatrooms.html | 36 ++++++++++++++++++--
 views/room.html      | 79 +++++++++++++++++++++++++++++++++++---------
 5 files changed, 164 insertions(+), 24 deletions(-)

diff --git a/app.js b/app.js
index 786da83..a10ba8b 100644
--- a/app.js
+++ b/app.js
@@ -56,10 +56,9 @@ app.use(passport.session());
 
 require('./auth/passportAuth.js')(passport, FacebookStrategy, config, mongoose);
 //Load the module like this in other files
-require('./routes/routes.js')(express, app, passport);
+require('./routes/routes.js')(express, app, passport, config, rooms);
 
 
-require('./socket/socket.js')(io, rooms);
 
 
 
@@ -70,7 +69,9 @@ require('./socket/socket.js')(io, rooms);
 // });
 app.set('port', process.env.PORT || 3000 );
 var server = require('http').createServer(app);
-var io = require('io').listen(server);
+var io = require('socket.io').listen(server);
+
+require('./socket/socket.js')(io, rooms);
 
 server.listen(app.get('port'), function(){
 	console.log('Server Running on PORT: ' + app.get('port'));
diff --git a/routes/routes.js b/routes/routes.js
index 5c6c50a..ab573ff 100644
--- a/routes/routes.js
+++ b/routes/routes.js
@@ -1,4 +1,4 @@
-module.exports = function(express, app, passport){
+module.exports = function(express, app, passport, config, rooms){
 	var router = express.Router();
 
 	function securePages(req, res, next){
@@ -21,9 +21,27 @@ module.exports = function(express, app, passport){
 	}))
 
 	router.get('/chatrooms', securePages ,function(req, res, next){
-		res.render('chatrooms', {title : 'chatrooms', user : req.user})
+		res.render('chatrooms', {title : 'chatrooms', user : req.user, config : config})
 	})
 
+	router.get('/room/:id', securePages, function(req, res, next){
+		var room_name = findTitle(req.params.id);
+		res.render('room', {user:req.user, room_number:req.param.id, room_name:room_name, config:config})
+	})
+
+	function findTitle(room_id){
+		var n = 0;
+		while(n< rooms.length){
+			if(rooms[n].room_number == room_id){
+				return rooms[n].room_name;
+				break;
+			} else {
+				n++;
+				continue;
+			}
+		}
+	}
+
 	router.get('/logout', function(req, res, next){
 		req.logout();
 		res.redirect('/');
diff --git a/socket/socket.js b/socket/socket.js
index ba77170..27ddfd8 100644
--- a/socket/socket.js
+++ b/socket/socket.js
@@ -1,3 +1,45 @@
-module.exports = function(io){
+module.exports = function(io, rooms){
+	// accept connection
+	var chatrooms = io.of('/roomlist').on('connection', function(socket){
+		console.log('Connection Established on the server');
+		socket.emit('roomupdate', JSON.stringify(rooms));
+		//Listen the data from JS
+		socket.on('newroom', function(data){
+			rooms.push(data);
+			socket.broadcast.emit('roomupdate', JSON.stringify(rooms));
+			socket.emit('roomupdate', JSON.stringify(rooms))
+		})
+	})
 
+
+	var messages = io.of('/messages').on('connection', function(socket){
+		console.log('connection to the chatroom established !!');
+
+		socket.on('joinroom', function(data){
+			socket.username = data.user;
+			socket.userPic = data.userPic;
+			socket.join(data.room);
+			updataUserList(data.room, true);
+		})
+
+		socket.on('newMessage', function(data){
+			socket.broadcast.to(data.room_number).emit('messagefeed', JSON.stringify(data));
+		})
+
+		function updataUserList(room, updateAll){
+			var getUsers = io.of('/messages').clients(room);
+			var userlist = [];
+			for (var i in getUsers){
+				userlist.push({user:getUsers[i].username, userPic:getUsers[i].userPic})
+			}
+
+			socket.to(room).emit('updataUserList', JSON.stringify(userlist));
+			if(updateAll){
+				socket.broadcast.to(room).emit('updataUserList', JSON.stringify(userlist));
+			}	
+		}
+		socket.on('updateList', function(data){
+			updataUserList(data.room);
+		})
+	})	
 }
\ No newline at end of file
diff --git a/views/chatrooms.html b/views/chatrooms.html
index 52dfd35..c8045f1 100755
--- a/views/chatrooms.html
+++ b/views/chatrooms.html
@@ -6,6 +6,38 @@
 	<link rel="stylesheet" href="../css/chatroom.css">
 	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 	<script type="text/javascript" src="socket.io/socket.io.js"></script>
+	<script type="text/javascript">
+		$(function(){
+			var host = '{{config.host}}';
+			var socket = io.connect(host + '/roomlist');
+
+			socket.on('connect', function(){
+				console.log('connection Established');
+			})
+
+			socket.on('roomupdate', function(data){
+				var procData = JSON.parse(data);
+				$('.roomlist').html('')
+				for( var i=0; i<procData.length; i++){
+					var str = '<a href="room/' + procData[i].room_number + '" ><li>' +procData[i].room_name + '</li></a>' ;
+					$('.roomlist').prepend(str);
+				}
+			})
+
+			$(document).on('click', '#create', function(){
+				var room_name = $('.newRoom').val();
+				if(room_name != ''){
+					var room_number = parseInt(Math.random()*10000);
+
+					//This event will listen in the nodeJS app to take place the rest of the functionality
+					socket.emit('newroom', {room_name: room_name, room_number:room_number});
+					$('.newRoom').val('');
+
+					// $('.newRoom').clear();
+				}
+			})
+		})
+	</script>
 	
 </head>
 <body>
@@ -21,9 +53,9 @@ <h3 class="userName">{{user.fullname}} | <a href="logout">Logout</a></h3>
 		</div>
 		<div class="cr-roomlist">
 			<ul class="roomlist">
-				<a href="#"><li>NodeJS</li></a>
+				<!-- <a href="#"><li>NodeJS</li></a>
 				<a href="#"><li>Cloud Computing</li></a>
-				<a href="#"><li>MongoDB</li></a>
+				<a href="#"><li>MongoDB</li></a> -->
 			</ul>
 		</div>
 	</div>
diff --git a/views/room.html b/views/room.html
index c6d6a64..e1c72d0 100755
--- a/views/room.html
+++ b/views/room.html
@@ -3,33 +3,80 @@
 <head>
 	<meta charset="UTF-8">
 	<title>ChatCAT</title>
-	<link rel="stylesheet" href="../public/css/room.css">
+	<link rel="stylesheet" href="../css/room.css">
 	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
+	<script type="text/javascript">
+	$(function(){
+		var host = '{{config.host}}';
+		var messages = io.connect(host + '/messages');
+		var roomNum = '{{room_number}}' ;
+		var userName = '{{user.fullname}}';
+		var userPic = '{{user.profilePic}}';
+
+		messages.on('connect', function(){
+			console.log('connection Established');
+			messages.emit('joinroom', {room:roomNum, user:userName, userPic:userPic})
+		})
+
+		$(document).on('keyup', '.newmessage', function(e){
+			if(e.which === 13 && $(this).val() != ''){
+				messages.emit('newMessage', {
+					room_number:roomNum,
+					user:userName,
+					userPic:userPic,
+					message:$(this).val()
+				})
+
+				updateMessageFeed(userPic, $(this).val());
+				$(this).val('');
+			}
+		})
+
+		messages.on('messagefeed', function(data){
+			var msgs = JSON.parse(data);
+			updateMessageFeed(msgs.userPic, msgs.message);
+		})
+
+		function updateMessageFeed(userPic, message){
+			var str = '<li>';
+				str	+= '<div class="msgbox">';
+				str	+=	'<div class="pic"><img src="' + userPic + '"></div>';
+				str +=		'<div class="msg"><p>' + message + '</p></div>';
+				str +=	'</div>';
+				str += '</li>';
+			$(str).hide().prependTo($('.messages')).slideDown(100);
+		}
+
+		messages.on('updateUsersList', function(data){
+			var userlist = JSON.parse(data);
+			$('.users').html('');
+			for(var n=0; n<userlist.length; n++){
+				var str = '<li><img src="' + userlist[n].userPic + '"><h5>' + userlist[n].user + '</h5></li>';
+
+				$(str).prependTo($('.users'));
+			}
+		})
+
+		setInterval(function(){
+			messages.emit('updateList', {room:roomNum});
+		}, 15*1000);
+	})
+	</script>
 </head>
 <body>
 <div class="rm-container">
 		<h1 class="rm-title">ChatCAT</h1>
 		<div class="rm-userbox">
-			<img src="../public/images/profilepic.jpg" class="userPic">
-			<h3 class="userName">John Doe | <a href="#">Logout</a><a href="#">More Chatrooms</a></h3>
+			<img src="{{user.profilePic}}" class="userPic">
+			<h3 class="userName">{{user.fullname}} | <a href="/logout">Logout</a><a href="/chatrooms">More Chatrooms</a></h3>
 		</div>
 		<div class="rm-roomname">
-			<h5>World Cuisine</h5>
+			<h5>{{room_name}}</h5>
 		</div>
 		<div class="rm-messages">
 			<ul class="messages">
-				<li>
-					<div class="msgbox">
-						<div class="pic"><img src="../public/images/profilepic.jpg">Sachin Bhatnagar</div>
-						<div class="msg"><p>Hi there this looks nice !</p></div>
-					</div>
-				</li>
-				<li>
-					<div class="msgbox">
-						<div class="pic"><img src="../public/images/profilepic.jpg">Sachin Bhatnagar</div>
-						<div class="msg"><p>Hi there this looks nice !</p></div>
-					</div>
-				</li>
+				
 			</ul>
 		</div>
 		<div class="rm-users">