add user and whiteboard by get parameters and fix bugs

public/js/main.js

@@ -1,6 +1,7 @@
-var whiteboardId = "myNewWhiteboard";
-var myUsername = "Default";
-
+var whiteboardId = getQueryVariable("whiteboardid");
+whiteboardId = whiteboardId || "myNewWhiteboard";
+var myUsername = getQueryVariable("username");
+myUsername = myUsername || "unkonwn";
 var io = signaling_socket = io();
 
 io.on('connect', function () {
@@ -9,6 +10,10 @@ io.on('connect', function () {
     signaling_socket.on('drawToWhiteboard', function (content) {
         whiteboard.handleEventsAndData(content, true);
     });
+
+    signaling_socket.on('refreshUserBadges', function () {
+        whiteboard.refreshUserBadges();
+    });
 });
 
 $(document).ready(function() {
@@ -247,3 +252,15 @@ window.addEventListener("paste", function(e) { //Even do copy & paste from clipb
         }
 	}
 });
+
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  for (var i=0;i<vars.length;i++) {
+    var pair = vars[i].split("=");
+    if (pair[0] == variable) {
+      return pair[1];
+    }
+  } 
+  return false;
+}

public/js/whiteboard.js

@@ -21,7 +21,7 @@ var whiteboard =  {
 	imgDragActive : false,
 	settings : {
 		whiteboardId : "0",
-		username : "defaultuser",
+		username : "unknown",
 		sendFunction : null,
 		canvasWidth : 3000,
 		canvasHeight : 2000,
@@ -602,7 +602,7 @@ var whiteboard =  {
 				if(_this.cursorContainer.find("."+content["username"]).length>=1) {
 					_this.cursorContainer.find("."+content["username"]).css({"left":data[0]+"px","top":data[1]+"px" });
 				} else {
-					_this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:'+data[0]+'; top:'+data[1]+';" class="'+content["username"]+'">'+
+					_this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:'+data[0]+'; top:'+data[1]+';" class="userbadge '+content["username"]+'">'+
 						'<div style="width:4px; height:4px; background:gray; position:absolute; top:-2px; left:-2px; border-radius:50%;"></div>'+
 						content["username"]+'</div>');
 				}
@@ -623,6 +623,9 @@ var whiteboard =  {
 	userLeftWhiteboard(username) {
 		this.cursorContainer.find("."+username).remove();
 	},
+	refreshUserBadges() {
+		this.cursorContainer.find(".userbadge").remove();
+	},
 	getImageDataBase64() {
 		_this = this;
 		var width = this.mouseOverlay.width();

server.js

@@ -71,6 +71,10 @@ function progressUploadFormData(formData) {
 }
 
 io.on('connection', function(socket){
+    socket.on('disconnect', function () {
+        socket.broadcast.emit('refreshUserBadges', null);
+    });
+
     socket.on('drawToWhiteboard', function(content) {
         socket.broadcast.emit('drawToWhiteboard', content);
         s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server