/index Secret

## index
<html>
<head>
	<title>Chat with socket.io and node.js</title>
	<style>
		#chat{
			height:500px;
		}
		#contentWrap{
			display: none;
		}
		#chatWrap{
			float:left;
			border: 1px #000 solid;
		}
		.error{
			color: red;
		}
		.whisper{
			color: gray;
			font-style: italic;
		}

	</style>
</head>
<body>
	<div id="userWrap">
		<p>Enter a username:</p>
		<p id="userError"></p>
		<form id="setUser">
			<input size="35" id="username"></input>
			<input type="submit"></input>
		</form>
	</div>

		<div id="contentWrap">
			<div id="chatWrap">
				<div id="chat"></div>
				<form id="send-message">
					<input size="35" id="message"></input>
					<input type="submit"></input>
				</form>
			</div>
			<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
				<b>USERS</b>
				<div id="users"></div>
			</div>


	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	var socket;
		socket = io.connect();
		jQuery(function($){

			var $userForm = $('#setUser');
			var $userError = $('#userError');
			var $userBox = $('#username');
			var $users = $('#users');
			var $messageForm = $('#send-message');
			var $messageBox = $('#message');
			var $chat = $('#chat');
			var $rooms = $('#rooms');

			$userForm.submit(function(e){
				e.preventDefault();
				socket.emit('newUser', $userBox.val(), function(data){
					if(data){
						$('#userWrap').hide();
						$('#contentWrap').show();
					} else{
						$userError.html('That username is already taken!  Try again.');
					}
				});
				$userBox.val('');
			});

			socket.on('usernames', function(data){
				var html = '';
				for(i=0; i < data.length; i++){
					html += data[i] + '<br/>'
				}
				$users.html(html);
			});


			socket.on('updaterooms', function(rooms, current_room) {
				$rooms.empty();
				$.each(rooms, function(key, value) {
					if(value == current_room){
						$rooms.append('<div>' + value + '</div>');
					}
					else {
						$rooms.append('<div><a href="#" onclick="switchRoom(\''+value+'\')" >' + value + '</a></div>');
						/*$rooms.append('<div><a id="\''+value+'\'" href="#" >' + value + '</a></div>');*/
					}
				});
			});

			/*$(value).click(function(){
				alert(room);
			});*/


			$messageForm.submit(function(e){
				e.preventDefault();
				socket.emit('sendMessage', $messageBox.val(), function(data){
					$chat.append('<span class="error">' + data + "</span><br/>");
				});
				$messageBox.val('');
			});

			$('#roombutton').click(function(){
				var name = $('#roomname').val();
				$('#roomname').val('');
				socket.emit('create', name)
			});


			socket.on('createroom', function () {
				socket.emit('create', room);
			});

			socket.on('serverMessage', function(username, data){
				$chat.append('<span class="msg"><b>' + username + ': </b>' + data + "</span><br/>");
			});

			socket.on('newMessage', function(data){
				$chat.append('<span class="msg"><b>' + data.user + ': </b>' + data.msg + "</span><br/>");
			});

			socket.on('whisper', function(data){
				$chat.append('<span class="whisper"><b>' + data.user + ': </b>' + data.msg + "</span><br/>");
			});
		});
			function switchRoom(room){
				socket.emit('switchRoom', room);
			}
	</script>
			<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
			<b>ROOMS</b>
			<div id="rooms"></div>
			</div>
			<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
		    <div id="room creation"></div>
		    <input id="roomname" style="width:200px;" />
		    <input type="button" id="roombutton" value="create room" />
	   </div>
	</div>
</body>
</html>

## server
//////////////////////////////////
/*		SERVER CONFIG			*/
//////////////////////////////////
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server, { log: true}),
port = 8080,
users = {};
server.listen(port);
var rooms = ['Lobby','room2','room3'];

app.get('/', function(req, res){
	res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function(socket){
	socket.on('newUser', function(data, callback){
		if (data in users){
			callback(false);
		}else{
			callback(true);
			socket.username = data;
			socket.room = 'Lobby';
			users[socket.username] = socket;
			socket.join(socket.room);
			/*socket.join('Lobby');*/
			updateUsers();
			socket.emit('serverMessage', 'SERVER',  'you have connected to Lobby');
			socket.broadcast.to('Lobby').emit('serverMessage', 'SERVER', socket.username +' has connected to this room');
			socket.emit('updaterooms', rooms, 'Lobby');
		}
	});

	function updateUser(roomUser){
		usersOutput = {};
		for(i=0; i < roomUser.length; i++){
					usersOutput += users[i]
		}
		io.sockets.emit('usernames', Object.keys(usersOutput));
	}

	function updateUsers(){
		io.sockets.emit('usernames', Object.keys(users));
	}

	socket.on('sendMessage', function(data, callback){
		var msg = data.trim();
		console.log('after trimming message is: ' + msg);
		if(msg.substr(0,3) === '/w '){
			msg = msg.substr(3);
			var ind = msg.indexOf(' ');
			if(ind !== -1){
				var name = msg.substring(0, ind);
				var msg = msg.substring(ind + 1);
				if(name in users){
					users[name].emit('whisper', {msg: msg, user: socket.username});
					console.log('message sent is: ' + msg);
					console.log('Whisper!');
				} else{
					callback('Error!  Enter a valid user.');
				}
			} else{
				callback('Error!  Please enter a message for your whisper.');
			}
		} else{
			/*io.sockets.emit('newMessage', {msg: msg, user: socket.username});*/
			io.sockets.in(socket.room).emit('newMessage', {msg: msg, user: socket.username});
		}
	});

	socket.on('create', function(room) {
        rooms.push(room);
        socket.emit('updaterooms', rooms, socket.room);
    });

	socket.on('switchRoom', function(newroom){
		socket.leave(socket.room);
		socket.join(newroom);
		var roomUser = io.sockets.clients(newroom);
		updateUser(roomUser);
		socket.emit('serverMessage', 'SERVER', 'you have connected to '+ newroom);
		socket.broadcast.to(socket.room).emit('serverMessage', 'SERVER', socket.username + ' has left this room');
		socket.room = newroom;
		socket.broadcast.to(newroom).emit('serverMessage', 'SERVER', socket.username + ' has joined this room');
		socket.emit('updaterooms', rooms, newroom);
	});


	socket.on('disconnect', function(data){
		if(!socket.username) return;
		delete users[socket.username];
		updateUsers();
	});
});
	<html>
	<head>
	<title>Chat with socket.io and node.js</title>
	<style>
	#chat{
	height:500px;
	}
	#contentWrap{
	display: none;
	}
	#chatWrap{
	float:left;
	border: 1px #000 solid;
	}
	.error{
	color: red;
	}
	.whisper{
	color: gray;
	font-style: italic;
	}

	</style>
	</head>
	<body>
	<div id="userWrap">
	<p>Enter a username:</p>
	<p id="userError"></p>
	<form id="setUser">
	<input size="35" id="username"></input>
	<input type="submit"></input>
	</form>
	</div>

	<div id="contentWrap">
	<div id="chatWrap">
	<div id="chat"></div>
	<form id="send-message">
	<input size="35" id="message"></input>
	<input type="submit"></input>
	</form>
	</div>
	<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
	<b>USERS</b>
	<div id="users"></div>
	</div>



	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	var socket;
	socket = io.connect();
	jQuery(function($){

	var $userForm = $('#setUser');
	var $userError = $('#userError');
	var $userBox = $('#username');
	var $users = $('#users');
	var $messageForm = $('#send-message');
	var $messageBox = $('#message');
	var $chat = $('#chat');
	var $rooms = $('#rooms');

	$userForm.submit(function(e){
	e.preventDefault();
	socket.emit('newUser', $userBox.val(), function(data){
	if(data){
	$('#userWrap').hide();
	$('#contentWrap').show();
	} else{
	$userError.html('That username is already taken! Try again.');
	}
	});
	$userBox.val('');
	});

	socket.on('usernames', function(data){
	var html = '';
	for(i=0; i < data.length; i++){
	html += data[i] + '<br/>'
	}
	$users.html(html);
	});




	socket.on('updaterooms', function(rooms, current_room) {
	$rooms.empty();
	$.each(rooms, function(key, value) {
	if(value == current_room){
	$rooms.append('<div>' + value + '</div>');
	}
	else {
	$rooms.append('<div><a href="#" onclick="switchRoom(\''+value+'\')" >' + value + '</a></div>');
	/$rooms.append('<div><a id="\''+value+'\'" href="#" >' + value + '</a></div>');/
	}
	});
	});

	/*$(value).click(function(){
	alert(room);
	});*/



	$messageForm.submit(function(e){
	e.preventDefault();
	socket.emit('sendMessage', $messageBox.val(), function(data){
	$chat.append('<span class="error">' + data + "</span><br/>");
	});
	$messageBox.val('');
	});

	$('#roombutton').click(function(){
	var name = $('#roomname').val();
	$('#roomname').val('');
	socket.emit('create', name)
	});


	socket.on('createroom', function () {
	socket.emit('create', room);
	});

	socket.on('serverMessage', function(username, data){
	$chat.append('<span class="msg"><b>' + username + ': </b>' + data + "</span><br/>");
	});

	socket.on('newMessage', function(data){
	$chat.append('<span class="msg"><b>' + data.user + ': </b>' + data.msg + "</span><br/>");
	});

	socket.on('whisper', function(data){
	$chat.append('<span class="whisper"><b>' + data.user + ': </b>' + data.msg + "</span><br/>");
	});
	});
	function switchRoom(room){
	socket.emit('switchRoom', room);
	}
	</script>
	<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
	<b>ROOMS</b>
	<div id="rooms"></div>
	</div>
	<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
	<div id="room creation"></div>
	<input id="roomname" style="width:200px;" />
	<input type="button" id="roombutton" value="create room" />
	</div>
	</div>
	</body>
	</html>
	//////////////////////////////////
	/* SERVER CONFIG */
	//////////////////////////////////
	var express = require('express'),
	app = express(),
	server = require('http').createServer(app),
	io = require('socket.io').listen(server, { log: true}),
	port = 8080,
	users = {};
	server.listen(port);
	var rooms = ['Lobby','room2','room3'];

	app.get('/', function(req, res){
	res.sendfile(__dirname + '/index.html');
	});

	io.sockets.on('connection', function(socket){
	socket.on('newUser', function(data, callback){
	if (data in users){
	callback(false);
	}else{
	callback(true);
	socket.username = data;
	socket.room = 'Lobby';
	users[socket.username] = socket;
	socket.join(socket.room);
	/socket.join('Lobby');/
	updateUsers();
	socket.emit('serverMessage', 'SERVER', 'you have connected to Lobby');
	socket.broadcast.to('Lobby').emit('serverMessage', 'SERVER', socket.username +' has connected to this room');
	socket.emit('updaterooms', rooms, 'Lobby');
	}
	});

	function updateUser(roomUser){
	usersOutput = {};
	for(i=0; i < roomUser.length; i++){
	usersOutput += users[i]
	}
	io.sockets.emit('usernames', Object.keys(usersOutput));
	}

	function updateUsers(){
	io.sockets.emit('usernames', Object.keys(users));
	}

	socket.on('sendMessage', function(data, callback){
	var msg = data.trim();
	console.log('after trimming message is: ' + msg);
	if(msg.substr(0,3) === '/w '){
	msg = msg.substr(3);
	var ind = msg.indexOf(' ');
	if(ind !== -1){
	var name = msg.substring(0, ind);
	var msg = msg.substring(ind + 1);
	if(name in users){
	users[name].emit('whisper', {msg: msg, user: socket.username});
	console.log('message sent is: ' + msg);
	console.log('Whisper!');
	} else{
	callback('Error! Enter a valid user.');
	}
	} else{
	callback('Error! Please enter a message for your whisper.');
	}
	} else{
	/io.sockets.emit('newMessage', {msg: msg, user: socket.username});/
	io.sockets.in(socket.room).emit('newMessage', {msg: msg, user: socket.username});
	}
	});

	socket.on('create', function(room) {
	rooms.push(room);
	socket.emit('updaterooms', rooms, socket.room);
	});

	socket.on('switchRoom', function(newroom){
	socket.leave(socket.room);
	socket.join(newroom);
	var roomUser = io.sockets.clients(newroom);
	updateUser(roomUser);
	socket.emit('serverMessage', 'SERVER', 'you have connected to '+ newroom);
	socket.broadcast.to(socket.room).emit('serverMessage', 'SERVER', socket.username + ' has left this room');
	socket.room = newroom;
	socket.broadcast.to(newroom).emit('serverMessage', 'SERVER', socket.username + ' has joined this room');
	socket.emit('updaterooms', rooms, newroom);
	});


	socket.on('disconnect', function(data){
	if(!socket.username) return;
	delete users[socket.username];
	updateUsers();
	});
	});