add online count

and back icon

chat.html

@@ -6,6 +6,8 @@
         <meta name="format-detection" content="email=no"/>
         <meta content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=0" name="viewport">
         <meta http-equiv="cache-control" content="public">
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         <title>Miko的随机聊天室 QQ452753617</title>
         <link rel="stylesheet" type="text/css" href="css/style.css" />
         <!--[if lt IE 8]><script src="./json3.min.js"></script><![endif]-->
@@ -25,7 +27,7 @@
                         </div>
                     </div>
                     <div class="user">
-                        <h3>随机私聊</h3>
+                        <h3>随机私聊(<span id="count">0</span>人在线)</h3>
                         <p id="ul" class="ab-center">
 
                         </p>
@@ -59,7 +61,6 @@ <h3 id="nickname">与战三聊天中...</h3>
             var h = window.innerHeight
             var c_h = h - $("#nickname").height() - $(".text").height() - 40
             $("#content").css("height", c_h +"px")
-
         })
         var $login = $("#login"),$name = $("#name"),socket,host = location.host,
             $screen = $("#screen"),$userList = $("#userList"),to,$content = $("#content"),$msg = $("#msg");
@@ -91,9 +92,14 @@ <h3 id="nickname">与战三聊天中...</h3>
                         }
                    })
                 }else{
-                   $("#ul").html("当前服务器只有您一位空闲用户，请等待其他用户加入<br><br><p style='text-align:center'>开发来自：QQ452753617</p>") 
+                   $("#ul").html("当前服务器只有您一位空闲用户，请等待其他用户加入<br><br><p style='text-align:center'>来自：QQ452753617</p>") 
                 }
             })
+
+            socket.on('addCount',function(data){ //在线用户增加
+                $("#count").text(data)
+            })
+
             socket.on('getMsg',function(data){ // 接收消息
                 var html = '<div class="clearfix"><p class="chat-box-l">'+replace_em(data.msg)+'</p></div>' 
                 $content.append(html)
@@ -115,7 +121,7 @@ <h3 id="nickname">与战三聊天中...</h3>
                 }
             })
 
-            socket.on('err',function(data){
+            socket.on('err',function(data){ // 对面下线后继续发送信息，将报错提示
                 alert(data.msg)
             })
 
@@ -183,11 +189,15 @@ <h3 id="nickname">与战三聊天中...</h3>
             })
         })
 
+        $content.click(function(){
+            $msg.blur()
+        })
+
         function toBottom(){ // 接收新消息时，聊天框自动滚到最下方
             var top = $content[0].scrollHeight
-            $content.scrollTop(top);
+            $content.scrollTop(top)
         }
-        function sendMsg(type){
+        function sendMsg(type){ // 发送消息函数
             if(type == "msg"){
                 var msg = $("#msg").val()
                 if($.trim(msg) == ""){  //不能发送空值

css/style.css

@@ -92,17 +92,17 @@ a{ text-decoration: none;}
 .getmsg input{ width:50%; height:40px; border:none; border-radius: 4px;background: #f0f0f0; text-indent: 12px; font-size: 24px;}
 .getmsg a{ display: block; width:20%; height:30px;border-radius: 4px; color:#fff; line-height: 30px; background: #3BA1D2; margin: 20px auto auto auto; font-size: 18px;}
 
-.online{width:100%;background: #FBFBCF; height:100%; overflow: hidden; position: relative; }
-.online h3{ text-align: center; padding:20px 0; background:rgba(0,0,0,.4);}
+.online{width:100%;background: #E7F3C8; height:100%; overflow: hidden; position: relative; }
+.online h3{ text-align: center; line-height: 50px; background:rgba(0,0,0,.8); color:#fff;}
 
 
 .long{position: absolute; width: 300%; height:100%; overflow: hidden;}
 .login{width:33.33%; height:100%; float: left; position:relative; background: #fff;}
 .user{width:33.33%; height:100%; float:left; position: relative;}
 .chat{width:33.33%; height:100%; float:left; position: relative;}
-.back{position: absolute; left:10px; top: 10px;}
+.back{position: absolute; padding-left:20px; left:10px; top: 0px; color:#fff; line-height: 50px; background:url(../images/back.png) no-repeat; }
 
-.content{ height:400px; background: #fff; overflow-y: scroll; padding:6px;}
+.content{ height:400px; background: #f0f0f0; overflow-y: scroll; padding:6px;}
 .text{ padding-top:10px; height:160px; position: relative;}
 .text textarea{ display: block; width:96%; height:80px; margin: 0 auto auto auto; background: #f0f0f0; border-radius: 4px; padding:2%; }
 .send{ display:block; float:right;  margin-right:2%; margin-top:12px; padding:5px 10px; background: #37A9CC; border-radius: 4px; color:#fff; }

js/jquery.qqFace.js

@@ -22,6 +22,7 @@
 			var strFace, labFace;
 			if($('#'+id).length<=0){
 				strFace = '<div id="'+id+'" style="position:absolute;width:100%;display:none;z-index:1000;" class="qqFace">' +
+							//'<p class="e-back">x</p>'+
 							  '<table border="0" style="width:100%" cellspacing="0" cellpadding="0"><tr>';
 				for(var i=1; i<=75; i++){
 					labFace = '['+tip+i+']';

server.js

@@ -7,7 +7,9 @@ app.use(express.static('./'))
 var userServer = {};
 var userList = {};
 var freeList = [];
+var count = 0;
 io.on('connection', function(socket){
+	count += 1;
 	socket.on('newUser',function(data){
 		var nickname = data.user_name,
 			user_id = data.user_id;
@@ -16,6 +18,7 @@ io.on('connection', function(socket){
 		userList[user_id] = nickname
 		freeList.push(user_id)
 		io.emit('onlineCount',freeList)
+		io.emit('addCount', count)
 		if(freeList.length > 1){
 			var from = user_id;
 			Arrayremove(freeList,from)
@@ -30,12 +33,14 @@ io.on('connection', function(socket){
 		}
 	})
 	socket.on('disconnect',function(){ //用户注销登陆执行内容
+		count -= 1; 
 		var id = socket.id
 		Arrayremove(freeList,id)
 		delete userServer[id]
 		delete userList[id]
 		io.emit('onlineCount',freeList)
 		io.emit('offline',{id:id})
+		io.emit('addCount', count)
 	})
 	socket.on('message',function(data){
 		if(userServer.hasOwnProperty(data.to)){