* 유저 목록, 귓속말 base

Author: dodortus

contents/css/style.css

@@ -88,6 +88,14 @@ input[type="text"] { padding: 2px 5px; border: solid 1px #bbb; font-size: 1.3em;
 #chat-content .me { position: relative; }
 #chat-content .me .message { background-color: rgba(243, 178, 176, 0.3); }
 
+#user-list { 
+	position: absolute; padding: 10px 10px 10px 30px;
+	width: 100px; height: 200px; top: 10px; right: -141px; 
+	border: solid 1px #ccc; font-size: 14px;
+}
+#user-list li { cursor: pointer; }
+#user-list li:hover { text-decoration: underline; }
+
 /* typing */
 #typing-icon { 
 	position: absolute; bottom: 68px; right: 142px; height: 14px; line-height: 12px;

contents/js/base.js

@@ -6,7 +6,7 @@
  */
 $(function() {
   var socket = io();
-  var nickName = /* prompt('닉네임을 입력해 주세요') || */ 'Guest-' + new Date().getTime();
+  var nickName = /*prompt('닉네임을 입력해 주세요') ||*/ 'Guest-' + getRandomNum(1000);
 	var roomId = '';
   var $body = $('body');
   var $roomName = $('#room-name');
@@ -20,13 +20,13 @@ $(function() {
   }
 
   function addUserMessage(nickName, msg, isMe) {
-  	$('#chat-content').append([
-    	"<li class='" + (isMe ? 'me' : '') + "'>",
-    		"<strong class='name'>" + (isMe ? 'Me' : nickName)  + "</strong>",
-    		"<p class='message'>" + msg + 
-    			"<span class='date'>" + getTime() + "</span>",
-  			"</p>",
-    	"</li>"
+  		$('#chat-content').append([
+	    	"<li class='" + (isMe ? 'me' : '') + "'>",
+	    		"<strong class='name'>" + (isMe ? 'Me' : nickName)  + "</strong>",
+	    		"<p class='message'>" + msg + 
+	    			"<span class='date'>" + getTime() + "</span>",
+	  			"</p>",
+	    	"</li>"
     ].join('\n'));
   }
 
@@ -38,49 +38,77 @@ $(function() {
   	].join('\n'));
   }
 
-  function getRandomNum() {
-  	return Math.floor(Math.random() * 10000) + 1; // 1~10000
+  function getRandomNum(max) {
+		return Math.floor(Math.random() * max) + 1; // 1 ~ max
   }
 
   // 해시 체크
   if (location.hash.length >= 2) {
-  	$roomName.val(location.hash.split('#')[1]);
+		$roomName.val(location.hash.split('#')[1]);
   }
 
   // 룸생성, 참여 이벤트
   $('#create-room').click(function() {
-	  socket.emit('joinRoom', getRandomNum(), nickName);
+	  socket.emit('joinRoom', getRandomNum(10000), nickName);
   });  
 
   $('#join-room').click(function() {
   	socket.emit('joinRoom', $roomName.val(), nickName);
   });
 
-  socket.on('joinRoom', function(roomId, nickName) {
-  	roomId = roomId;
+  socket.on('joinRoom', function(roomNum, nickName, userList) {
+  	// console.log('userList', userList);
+  	roomId = roomNum;
   	location.hash = roomId;
+  	
   	$body.addClass('is-room');
   	addSystemMessage("<strong>" + nickName + "</strong> 님이 참여하였습니다.");
+  	setUserList(userList);
   });
 
+  function setUserList(userList) {
+  	var users = [];
+  	$.each(userList, function(i, val) {
+  		users.push("<li>" + val + "</li>");
+  	});
+  	
+  	$('#user-list').html(users.join('\n'));
+  }
+  
   // 로비로 이동
   $('#leave-room').click(function() {
+  	alert(roomId);
+  	
   	socket.emit('leaveRoom', roomId, nickName);
   	location.hash = '';
   	location.reload();
   });
 
-  socket.on('leaveRoom', function(nickName) {
+  socket.on('leaveRoom', function(nickName, userList) {
   	addSystemMessage("<strong>" + nickName + "</strong> 님이 나갔습니다.");
+  	setUserList(userList);
   });
 
   // 메시지 이벤트
   $('form').submit(function() {
   	var msg = $msgInput.val();
-    socket.emit('message', {
-    	nickName: nickName,
-    	body: msg
-    });
+  	
+  	if (msg.match('/')) {
+  		var receiverNickName = msg.split(" ")[0].replace('/', '');
+  		msg = msg.replace('/' + receiverNickName + ' ', '');
+  		
+  		socket.emit('message', {
+	    	nickName: nickName,
+	    	body: msg,
+	    	to: receiverNickName
+	    });
+  	} else {
+	    socket.emit('message', {
+	    	nickName: nickName,
+	    	body: msg,
+	    	to: 'all'
+	    });
+  	}
     $msgInput.val('');
     addUserMessage(nickName, msg, true);
 
@@ -113,4 +141,9 @@ $(function() {
   	}, 3000);
   	*/
   });
+  
+  // 귓속말 해당 유저 추가
+  $('#user-list').on('click', 'li', function() {
+  	$('#message').val('/' + $(this).text() + " ");
+  });
 });

server.js

@@ -15,32 +15,51 @@ app.get('/', function(req, res) {
 });
 
 // socket 
-io.on('connection', function(socket){
-  console.log('a user connected');
+/*
+ * io - 소켓 서버
+ * socket - 클라이언트와 연결된 소켓 
+ * io.sockets.in(roomId) - 타겟 룸에 전체 메시지 전달.
+ */ 
+var socketIds = [];
+io.on('connection', function(socket) {
   var roomId = null;
 
   // 룸접속
-  socket.on('joinRoom', function(room, nickName) {
-  	roomId = room;
+  socket.on('joinRoom', function(roomNum, nickName) {
+  	roomId = roomNum;
 	  socket.join(roomId);  	
-  	io.sockets.in(roomId).emit('joinRoom', roomId, nickName);
+	  
+  	// 유저 목록
+  	socketIds[nickName] = socket.id;
+  	io.sockets.in(roomId).emit('joinRoom', roomId, nickName, Object.keys(socketIds));
   	console.log('ROOM LIST', io.sockets.adapter.rooms);
   });
 
   // 룸퇴장
-  socket.on('leaveRoom', function(room, nickName) {
-  	socket.leave(roomId);
-  	socket.broadcast.to(roomId).emit('leaveRoom', nickName);
+  socket.on('leaveRoom', function(roomNum, nickName) {
+  	socket.leave(roomNum);
+  	delete socketIds[nickName];
+  	
+  	console.log('leaveRoom', roomNum, Object.keys(socketIds));
+  	socket.broadcast.to(roomNum).emit('leaveRoom', nickName, Object.keys(socketIds));
   });
 
   // 메시징
-  socket.on('message', function(msg) {
-    //console.log('message: ' + msg);
+  socket.on('message', function(data) {
+    //console.log('message: ' + data);
 
-    socket.broadcast.to(roomId).emit('message', msg); // 자신 제외 룸안의 유저
-    //socket.broadcast.emit('message', msg); 					// 자신 제외 메시지 전송  
-    //io.emit('message', msg); 							 					// 자신 포함 전체 룸 메시지 전송
-    //io.sockets.in(roomId).emit('message', msg); 		// 자신 포함 룸안의 유저
+    if (data.to == 'all') {
+	    socket.broadcast.to(roomId).emit('message', data); // 자신 제외 룸안의 유저
+    } else {
+    	var targetSocket = socketIds[data.to];
+    	
+    	if (targetSocket) {
+		 	 	io.sockets.in(targetSocket).emit('message', data);
+    	}
+    }
+    //socket.broadcast.emit('message', data); 					// 자신 제외 메시지 전송  
+    //io.emit('message', data); 							 					// 자신 포함 전체 룸 메시지 전송
+    //io.sockets.in(roomId).emit('message', data); 			// 자신 포함 룸안의 유저
   });
 
   // 타이핑

views/index.html

@@ -7,6 +7,7 @@
     <meta name="description" content="" />
     <meta name="author" content="Administrator" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="https://cdn3.iconfinder.com/data/icons/stroke/53/Smile-64.png">
     <link href="/css/style.css" type="text/css" rel="stylesheet" media="screen" />
   </head>
   <body class="is-lobby">
@@ -40,6 +41,8 @@ <h1>Simple Chatting</h1>
             <input type="text" name="message" id="message" value="" placeholder="메시지를 입력해 주세요.">
             <button type="submit">전송</button>
           </form>
+          
+          <ul id="user-list"></ul>
         </div>
       </section>
     </div>