fix username dialog autoclose and username list and disconnection proble...

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules
+
+# Users Environment Variables
+.lock-wscript
+
+# intellij project files
+.idea

app.js

@@ -6,7 +6,8 @@ var express = require('express')
     , routes = require('./routes')
     , user = require('./routes/user')
     , http = require('http')
-    , path = require('path');
+    , path = require('path')
+    , utils = require('./public/js/utils');
 
 var app = express();
 
@@ -37,18 +38,20 @@ server.listen(app.get('port'), function () {
     console.log('Express server listening on port ' + app.get('port'));
 });
 
+var socket_id_name_map = new utils.HashMap();
 io.sockets.on('connection', function (socket) {
     socket.emit('draw', { hello:'world' });
     socket.on('draw', function (data) {
         console.log(data);
         socket.broadcast.emit('draw', data);
     });
     socket.on('set_nickname', function (name) {
+        socket_id_name_map.put(socket.id, name);
         socket.set('nickname', name, function () {
 
             //socket.broadcast.emit('add user',socket.manager.roomClients);
-            socket.emit('add_user', socket.manager.roomClients);
-            socket.broadcast.emit('add_user', socket.manager.roomClients);
+            socket.emit('add_user', socket_id_name_map);
+            socket.broadcast.emit('add_user', socket_id_name_map);
             //console.log(socket);
         });
     });
@@ -67,4 +70,8 @@ io.sockets.on('connection', function (socket) {
             socket.broadcast.emit("msg", socket.store.data.nickname + "对大家说：" + data.msg);
         }
     });
+    socket.on('disconnect', function () {
+        socket_id_name_map.remove(socket.id);
+        socket.broadcast.emit('add_user', socket_id_name_map);
+    });
 });

public/js/utils.js

@@ -0,0 +1,47 @@
+/**
+ * Created by liudonghua on 14-5-15.
+ */
+// http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/
+// http://bbs.csdn.net/topics/390372241
+(function(exports){
+
+    function HashMap(hashMap){
+        if(hashMap === undefined) {
+            this.map = {};
+        }
+        else {
+            this.map = hashMap.map;
+        }
+    }
+    HashMap.prototype = {
+        put : function(key , value){
+            this.map[key] = value;
+        },
+        get : function(key){
+            if(this.map.hasOwnProperty(key)){
+                return this.map[key];
+            }
+            return null;
+        },
+        remove : function(key){
+            if(this.map.hasOwnProperty(key)){
+                return delete this.map[key];
+            }
+            return false;
+        },
+        removeAll : function(){
+            this.map = {};
+        },
+        keySet : function(){
+            var _keys = [];
+            for(var i in this.map){
+                _keys.push(i);
+            }
+            return _keys;
+        }
+    };
+    HashMap.prototype.constructor = HashMap;
+
+    exports.HashMap = HashMap;
+
+})(typeof exports === 'undefined'? this['utils']={}: exports);

views/index.ejs

@@ -4,10 +4,11 @@
     <title><%= title %></title>
 
     <!-- 最新 Bootstrap 核心 CSS 文件 -->
-    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
 
-    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
-    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
+    <!-- 可选的Bootstrap主题文件（一般不用引入）
+    <link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css">
+    -->
 
   <!--  <link rel='stylesheet' href='/stylesheets/bootstrap.css'/>-->
     <link rel="stylesheet" media="screen" type="text/css" href="stylesheets/colorpicker.css" />
@@ -71,8 +72,7 @@
                <input type="text" placeholder="用户名" id="username"  required=""/>
             </div>
             <div class="modal-footer">
-
-                <button type="button" class="btn btn-primary" id="gotoAPP">GO</button>
+                <button type="button" class="btn btn-primary" id="gotoAPP"  data-dismiss="modal">GO</button>
             </div>
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
@@ -82,11 +82,12 @@
 <script src="js/jquery-1.10.0.js"></script>
 
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
-<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
+<script src="js/bootstrap.min.js"></script>
 <script src="/socket.io/socket.io.js"></script>
 
 <script src="js/jquery.mpaint.js"></script>
-<script   src="js/colorpicker.js"></script>
+<script src="js/colorpicker.js"></script>
+<script src="js/utils.js"></script>
 
 <!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
 <script>
@@ -126,10 +127,14 @@
         socket.on('add_user', function (names) {
             var user = $("#users");
             user.html("");
-            $.each(names, function (item) {
-                var name = item;
-                $("<option value='" + name + "'>" + name + "</option>").appendTo(user);
-            })
+//            $.each(names['data'], function (key, value) {
+//                $("<option value='" + key + "'>" + value + "</option>").appendTo(user);
+//            })
+            var hashMap = new utils.HashMap(names);
+            var keySet = hashMap.keySet();
+            for (var key in keySet) {
+                $("<option value='" + keySet[key] + "'>" + hashMap.get(keySet[key]) + "</option>").appendTo(user);
+            }
 
 
         });
@@ -179,7 +184,7 @@
         $(".tj").on("click", function () {
             var msg = $("#msg").val();
             var msgData={
-                id:$("#users option:selected").text(),
+                id:$("#users option:selected").val(),
                 msg:msg
             }
             socket.emit("msg", msgData);