optimized packet handling

2 files changed, 156 insertions, 33 deletions

diff --git a/app.js b/app.js
index c6ed8ac..aea700a 100644
--- a/app.js
+++ b/app.js
@@ -1,9 +1,9 @@
 var mongojs = require("mongojs");
 var db = mongojs("localhost:27017/ThePixelWorld", ["account","progress"]);
 
-
 var express = require("express");
 var app = express();
+
 var serv = require("http").Server(app);
 
 app.get('/', function(req,res) {
@@ -80,7 +80,24 @@ var Player = function(id){
         else
             self.speedY = 0;
     }
+
+    self.getInitPack = function() {
+        return {
+            id:self.id,
+            x:self.x,
+            y:self.y,
+            number:self.number
+        };
+    }
+    self.getUpdatePack = function() {
+        return {
+            id:self.id,
+            x:self.x,
+            y:self.y
+        };
+    }
     Player.list[id] = self;
+    initPack.player.push(self.getInitPack());
     return self;
 }
 
@@ -102,10 +119,23 @@ Player.onConnect = function(socket){
         else if (data.inputId === 'mouseAngle')
             player.mouseAngle = data.state;
     });
+
+    socket.emit('init',{
+        player:Player.getAllInitPack(),
+        bullet:Bullet.getAllInitPack(),
+    });
+}
+
+Player.getAllInitPack = function(){
+    var players = [];
+    for(var i in Player.list)
+        players.push(Player.list[i].getInitPack());
+    return players;
 }
 
 Player.onDisconnect = function(socket){
     delete Player.list[socket.id];
+    removePack.player.push(socket.id);
 }
 
 Player.update = function(){
@@ -113,11 +143,7 @@ Player.update = function(){
     for(var i in Player.list){
         var player = Player.list[i];
         player.update();
-        pack.push({
-            x:player.x,
-            y:player.y,
-            number:player.number
-        });
+        pack.push(player.getUpdatePack());
     }
     return pack;
 }
@@ -143,7 +169,25 @@ var Bullet = function(parent, angle) {
             }
         }
     }
+
+    self.getInitPack = function() {
+        return {
+            id:self.id,
+            x:self.x,
+            y:self.y,
+        };
+    }
+
+    self.getUpdatePack = function() {
+        return {
+            id:self.id,
+            x:self.x,
+            y:self.y,
+        };
+    }
+
     Bullet.list[self.id] = self;
+    initPack.bullet.push(self.getInitPack());
     return self;
 }
 
@@ -154,20 +198,21 @@ Bullet.update = function(){
     for(var i in Bullet.list){
         var bullet = Bullet.list[i];
         bullet.update();
-        if(bullet.toRemove)
+        if(bullet.toRemove){
             delete Bullet.list[i];
+            removePack.bullet.push(bullet.id);
+        }
         else
-            pack.push({
-                x:bullet.x,
-                y:bullet.y,
-            });
+            pack.push(bullet.getUpdatePack());
     }
     return pack;
 }
 
-var USERS = {
-    "bob":"bub", 
-    "asd": "fgh"
+Bullet.getAllInitPack = function(){
+    var bullets = [];
+    for(var i in Bullet.list)
+        bullets.push(Bullet.list[i].getInitPack());
+    return bullets;
 }
 
 var isValidPassword = function(data, cb){
@@ -203,6 +248,7 @@ io.sockets.on('connection', function(socket){
         isValidPassword(data, function(res){
             if (res){
                 Player.onConnect(socket);
+                socket.playerName = data.username;
                 socket.emit('signInResponse', {success:true});
             } else {
                 socket.emit('signInResponse', {success:false});
@@ -228,7 +274,7 @@ io.sockets.on('connection', function(socket){
     socket.on('sendMsgToServer', function(data){
         var playerName = ("" + socket.id).slice(2,7);
         for (var i in SOCKET_LIST){
-            SOCKET_LIST[i].emit('addToChat', playerName + ': ' + data);
+            SOCKET_LIST[i].emit('addToChat', socket.playerName + ': ' + data);
         }
     });
    
@@ -239,6 +285,9 @@ io.sockets.on('connection', function(socket){
     });
 });
 
+var initPack = {player:[], bullet:[]};
+var removePack = {player:[], bullet:[]};
+
 setInterval(function(){
     var pack = {
         player:Player.update(),
@@ -247,6 +296,13 @@ setInterval(function(){
     
     for(var i in SOCKET_LIST){
         var socket = SOCKET_LIST[i];
-        socket.emit('newPositions', pack);
+        socket.emit('init', initPack);
+        socket.emit('update', pack);
+        socket.emit('remove', removePack);
     }
-},1000/25);
\ No newline at end of file
+    initPack.player = [];
+    initPack.bullet = [];
+    removePack.player = [];
+    removePack.bullet = [];
+
+}, 1000/25);
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 666c078..4404a4a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -27,6 +27,7 @@
     // Login
     var signDiv = document.getElementById("signDiv");
     var signDivUsername = document.getElementById("signDiv-username");
+    var signDivUsername = document.getElementById("signDiv-username");
     var signDivPassword = document.getElementById("signDiv-password");
     var signDivSignIn = document.getElementById("signDiv-signIn");
     var signDivSignUp = document.getElementById("signDiv-signUp");
@@ -66,31 +67,97 @@
       console.log(data);
     });
     
+    chatForm.onsubmit = function(e){
+        e.preventDefault();
+        if (chatInput.value[0] === "/")
+          socket.emit("evalServer", chatInput.value.slice(1));
+        else
+          socket.emit("sendMsgToServer", chatInput.value);
+        chatInput.value = "";
+    }
+  
     // Game
     var ctx = document.getElementById("ctx").getContext("2d");
     ctx.font = '30px Arial';
 
-    socket.on('newPositions', function(data){
-      ctx.clearRect(0,0,500,500);
-      for(var i =0; i < data.player.length; i++){
-        ctx.fillStyle="rgba(55,55,55,0.8)";
-        ctx.fillText(''+ data.player[i].number,data.player[i].x, data.player[i].y);
+    var Player = function(initPack){
+      var self = {};
+      self.id = initPack.id;
+      self.number = initPack.number;
+      self.x = initPack.x;
+      self.y = initPack.y;
+      Player.list[self.id] = self;
+      return self;
+    };
+
+    Player.list = {};
+    
+    var Bullet = function(initPack){
+      var self = {};
+      self.id = initPack.id;
+      self.number = initPack.number;
+      self.x = initPack.x;
+      self.y = initPack.y;
+      Bullet.list[self.id] = self;
+      return self;
+    };
+
+    Bullet.list = {};
+    
+    // init (all)
+    socket.on('init', function(data){
+      for(var i = 0; i < data.player.length; i++){
+        new Player(data.player[i]);
       }
-      for(var i =0; i < data.bullet.length; i++){
-        ctx.fillStyle="rgba(55,55,55,0.8)";
-        ctx.fillRect(data.bullet[i].x-5, data.bullet[i].y-5, 10, 10);
+      for(var i = 0; i < data.bullet.length; i++){
+        new Bullet(data.bullet[i]);
+      }
+    });
+    // update (diff)
+    socket.on('update', function(data){
+      for(var i = 0; i < data.player.length; i++){
+        var pack = data.player[i];
+        var p = Player.list[pack.id];
+        if(p){
+          if(pack.x !== undefined)
+            p.x = pack.x;
+          if(pack.y !== undefined)
+            p.y = pack.y;
+        }
+      }
+      for(var i = 0; i < data.bullet.length; i++){
+        var pack = data.bullet[i];
+        var b = Bullet.list[pack.id];
+        if(b){
+          if(pack.x !== undefined)
+            b.x = pack.x;
+          if(pack.y !== undefined)
+            b.y = pack.y;
+        }
       }
     });
 
+    // remove (del by id)
+    socket.on('remove', function(data){
+      for(var i = 0; i < data.player.length; i++){
+        delete Player.list[data.player[i]];
+      }
+      for(var i = 0; i < data.bullet.length; i++){
+        delete Bullet.list[data.bullet[i]];
+      }
+    });
 
-    chatForm.onsubmit = function(e){
-        e.preventDefault();
-        if (chatInput.value[0] === "/")
-          socket.emit("evalServer", chatInput.value.slice(1));
-        else
-          socket.emit("sendMsgToServer", chatInput.value);
-        chatInput.value = "";
-    }
+    setInterval(function(){
+      ctx.clearRect(0,0,500,500);
+      for(var i in Player.list){
+        ctx.fillStyle="rgba(55,55,55,0.8)";
+        ctx.fillText(''+ Player.list[i].number,Player.list[i].x, Player.list[i].y);
+      }
+      for(var i in Bullet.list){
+        ctx.fillStyle="rgba(55,55,55,0.8)";
+        ctx.fillRect(Bullet.list[i].x-5, Bullet.list[i].y-5, 10, 10);
+      }
+    }, 1000/25);
 
     document.onkeydown = function(event){
       //console.log(event.keyCode);