* add lobby

Author: dodortus

contents/css/style.css

@@ -28,27 +28,33 @@ button[disabled]:hover { background-color: #d84a38 }
 .btn.small { padding: 0.2em 0.4em; font-size: 0.6em; margin-bottom: 0.2em; }
 .btn.small.black { background-color: #000; }
 
-
+header { position: relative; margin-bottom: 10px; }
 h1 {
  border-bottom: 1px solid #ccc; height: 50px; line-height: 50px;
  font-weight: bold; margin: 0; padding: 0 0 0.2em 0;
 }
 h1 a { font-weight: 300; margin: 0 10px 0 0; white-space: nowrap; }
 
 #wrap { 
-	position: relative; width: 340px; margin: 30px auto; font-size: 1.2em;
+	position: relative; width: 340px; min-height: 490px; 
+	margin: 30px auto; font-size: 1.2em;
 }
 input[type="text"] { padding: 2px 5px; border: solid 1px #bbb; font-size: 1.3em; width: 120px; }
-#your-name { width: 250px; }
+#create-room { margin-top: 100px; width: 290px; }
+#room-name { width: 200px; }
 #wrap button { vertical-align: top; min-width: 72px; }
 
-header { position: relative; margin-bottom: 10px; }
-#lobby { display: none; }
+#lobby { text-align: center; }
+
+.is-lobby #lobby { display: block; }
+.is-lobby #room { display: none; }
+.is-room #room { display: block; }
+.is-room #lobby { display: none; }
 
 /* chat */
 #chat-wrap { position: relative; margin: 0 auto; }
 #chat-wrap input[type="text"] {
-  padding: 10px; width: 238px; 
+  padding: 10px; width: 238px; line-height: 1; 
   font-size: 14px; background: rgba(255,255,255,0.8);
 }
 #chat-content { 

contents/js/base.js

@@ -7,6 +7,9 @@
 $(function() {
   var socket = io();
   var nickName = /* prompt('닉네임을 입력해 주세요') || */ 'Guest-' + new Date().getTime();
+	var roomId = '';
+  var $body = $('body');
+  var $roomName = $('#room-name');
   var $msgInput = $('#message');
   var $typing = $('#typing-icon');
 
@@ -35,18 +38,39 @@ $(function() {
   	].join('\n'));
   }
 
-  // 참여 이벤트
-  socket.emit('join', nickName);
-  socket.on('join', function(nickName) {
+  function getRandomNum() {
+  	return Math.floor(Math.random() * 10000) + 1; // 1~10000
+  }
+  
+  // 해시 체크
+  if (location.hash.length >= 2) {
+  	$roomName.val(location.hash.split('#')[1]);
+  }
+  
+  // 룸생성, 참여 이벤트
+  $('#create-room').click(function() {
+	  socket.emit('joinRoom', getRandomNum(), nickName);
+  });  
+  
+  $('#join-room').click(function() {
+  	socket.emit('joinRoom', $roomName.val(), nickName);
+  });
+  
+  socket.on('joinRoom', function(roomId, nickName) {
+  	roomId = roomId;
+  	location.hash = roomId;
+  	$body.addClass('is-room');
   	addSystemMessage("<strong>" + nickName + "</strong> 님이 참여하였습니다.");
   });
 
-  // 종료 이벤트
+  // 로비로 이동
   $('#leave-room').click(function() {
-  	socket.emit('leave', nickName);
+  	socket.emit('leaveRoom', roomId, nickName);
+  	location.hash = '';
+  	location.reload();
   });
 
-  socket.on('leave', function(nickName) {
+  socket.on('leaveRoom', function(nickName) {
   	addSystemMessage("<strong>" + nickName + "</strong> 님이 나갔습니다.");
   });
 

server.js

@@ -6,6 +6,7 @@ var	express = require('express')
 
 app.engine('html', require('ejs').renderFile);
 app.set('views', __dirname + '/views');
+app.use(express.static(__dirname + '/contents'));
 
 app.get('/', function(req, res) {
 	res.render('index.html', {
@@ -16,37 +17,43 @@ app.get('/', function(req, res) {
 // socket 
 io.on('connection', function(socket){
   console.log('a user connected');
+  var roomId = null;
 
-  socket.on('message', function(msg) {
-    console.log('message: ' + msg);
-    
-    socket.broadcast.emit('message', msg);
-    //io.emit('message', msg);
-  });
-  
-  socket.on('disconnect', function() {
-    console.log('a user disconnected');
+  // 룸접속
+  socket.on('joinRoom', function(room, nickName) {
+  	roomId = room;
+	  socket.join(roomId);  	
+  	io.sockets.in(roomId).emit('joinRoom', roomId, nickName);
+  	console.log('ROOM LIST', io.sockets.adapter.rooms);
   });
 
-  // 참여
-  socket.on('join', function(nickName) {
-  	socket.broadcast.emit('join', nickName);
+  // 룸퇴장
+  socket.on('leaveRoom', function(room, nickName) {
+  	socket.leave(roomId);
+  	socket.broadcast.to(roomId).emit('leaveRoom', nickName);
   });
 
-  // 나가기
-  socket.on('leave', function(nickName) {
-  	socket.broadcast.emit('leave', nickName);
+  // 메시징
+  socket.on('message', function(msg) {
+    //console.log('message: ' + msg);
+    
+    socket.broadcast.to(roomId).emit('message', msg); // 자신 제외 룸안의 유저
+    //socket.broadcast.emit('message', msg); 					// 자신 제외 메시지 전송  
+    //io.emit('message', msg); 							 					// 자신 포함 전체 룸 메시지 전송
+    //io.sockets.in(roomId).emit('message', msg); 		// 자신 포함 룸안의 유저
   });
 
   // 타이핑
   socket.on('typing', function(nickName) {
-  	socket.broadcast.emit('typing', nickName);
+  	socket.broadcast.to(roomId).emit('typing', nickName);
+  });
+  
+  // 소켓 연결해제
+  socket.on('disconnect', function() {
+    console.log('a user disconnected');
   });
 });
 
-// static 은 view 선언 다음에 사용
-app.use(express.static(__dirname + '/contents'));
-
 // server listen start
 http.listen(config.webserver.port, function() {
   console.log('Simple Chatting server running at ' + config.webserver.host + ':' + config.webserver.port);

views/index.html

@@ -9,15 +9,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="/css/style.css" type="text/css" rel="stylesheet" media="screen" />
   </head>
-  <body>
+  <body class="is-lobby">
     <header>
       <h1>Simple Chatting</h1>
     </header>
 
     <div id="wrap">
       <section id="lobby">
         <button id="create-room" type="button">Create</button><br>
-        <input type="text" id="your-name" placeholder="Your name" />
+        <input type="text" id="room-name" placeholder="Room Number" />
         <button id="join-room" type="button">Join</button>
       </section>