How to socket.emit 2x arrays via socket.io?

Question

Having problems emmiting 2 arrays to the client. I have 2 objects and all instances are created on Server side . The socket.emit is from what I understood done on the Server 25s/s and per socket that exist. Now i created bullets in each ship and want to get these to the client. The thing that makes me headache is I am waiting on the Client side with socket.on per ship which is a 1:1 per each emitted socket from the server. And now come a 1:n per each socket on the Server that is shooting the bullets. Can I actually emit 2 array with 2 emit execution or does it Need to be ohne emit from each socket with all data in one array? My Problem is that the array bullet doesnt exist on the Client side !

So my ship values are at the client side anyhow I dont have a bullet array on the Client side I tested it with a draw in a fixed x and y

for (var i in bullet){
        ctx.fillText("X",100,100);
        }

but the client draws nothing means I have no array at the client side. Also did a alert if I would have more then 10 bullets but even that one doesn't pop up

Appreciate any help

App.js

for(var q in SOCKET_LIST){
 var socket = SOCKET_LIST[q];
 var f =0;
 for(var k = 0;k<allbullets.length;k++)
 {
 if (allbullets[k].user_id === q)
 {
 packbul= {
        x:allbullets[k].xtype.x,
        y:allbullets[k].xtype.y,
        userid:allbullets[k].user_id,
    }// array end
}
    f++;
 } //end for
 socket.broadcast.emit('newBullet',packbul);
 if (allobjects[q] === undefined) 
 {
 }
 else{
 console.log("q:"+q);
  pack[q] = {
        x:allobjects[q].xtype.x,
        y:allobjects[q].xtype.y,
        userid:q,
    }// array end

 socket.broadcast.emit('newClientship',pack[q]);
   } // else end 
 } // For ebf.

},1000/25); // Set Interval End

Client

var ship = Array();
var bullet = Array();
socket.on('newClientship',function(data){
   ship[data.userid]= data;
     });
    socket.on('newBullet',function(data){
   bullet= data;
     });
     var previous;  // var for renderworld
    renderWorld = function(timestamp){
    //setInterval(function(){
    if (!previous) previous = timestamp;
    elapsed = timestamp - previous;
    updateFps();
    ctx.font="150px Arial"; 
    ctx.fillStyle = "white";
ctx.clearRect(0,0,canvas.width,canvas.height);
      for ( var i in ship){ ctx.fillText(ship[i].userid,ship[i].x,ship[i].y);       
        }
        if (bullet.length > 10)
        {
        alert("ted");
        }
        for (var i in bullet){
        ctx.fillText("X",100,100);
        }
    drawFps(200,20) ; 
    previous = timestamp;
window.requestAnimationFrame(renderWorld);
    //},1000/25);

    }

Just found out that the for loop on Server side doesn't work

It gives me a „undefined“ if I console.log (allbullets.length)

If I do a console.log(allbullets) it shows me that it exists .

Bulletobj {
  user_id: 47,
  type: 'Bullet',
  radius: 2,
  basespeed: 1,
  speed: 1,
  velX: 0.2979165941720021,
  velY: 0.9545919038609927,
  targetX: 863,
  targetY: 2429,
  xtype: Obj { x: 153, y: 154, radius: 3, selected: 0 },
  angleDeg: 1.268286927738952,
  realAngle: 72.66748817105554 }

Now found a formula to count the items of an obj

console.log("length:"+Object.keys(allbullets).length);

But even that only counts the items in one of the objects and always shows 12

I wanted to have the count of all bullets that have an instance

FYI My ship has a procedure that creates a new bullet

ClientObj.prototype.fire =function (x,y){  
allbullets  = new Bulletobj(this.xtype.x,this.xtype.y,x,y,1,1, this.user_id);
}

// had put this var outside outside functions for global

allbullets = Array(); 

Answer 1

App.js

var allbullets = [];
Bulletobj = function(x,y,targetX,targetY,shipid,speed,user_id){
this.user_id = user_id;
this.type = 'Bullet';
this.radius = 2;
this.basespeed = speed;
this.speed = 4;
this.velX = 0;
this.velY = 0;
this.targetX = targetX;
this.targetY = targetY;
this.xtype = new Obj(x,y,3);
w.objects.push(this);

Bulletobj.prototype.update =function (){  

tx = this.targetX - this.xtype.x;
ty = this.targetY - this.xtype.y;
dist = Math.sqrt(tx * tx + ty * ty);
this.angleDeg =  Math.atan2(ty,tx)  ;  
this.realAngle = (Math.atan2(ty,tx)  * 180/Math.PI + 360 ) % 360 ; 
this.velX = (tx / dist) * this.speed ;
this.velY = (ty / dist) * this.speed ;
if (parseInt(dist) > parseInt(this.radius / 2)) {
this.xtype.x += parseInt(this.velX);
this.xtype.y += parseInt(this.velY);

}    // if distance schleife end
} // Bulletobj update end
}    // Bulletobj end

setInterval(function(){
 var pack = Array();
 var packbul = Array();
 var packbularray = Array();
 var spliceArray = Array();
  objcnt = w.objects.length;
 var i=0;  
 while (i < objcnt)  
 {
 w.objects[i].update();
 if(w.objects[i].hitpoints <= 0 )
 spliceArray.push(i);           
 i++;
 } // endwhile
for(var k = 0;k<spliceArray.length;k++) 
 {
w.objects.splice(spliceArray[k],1);
 }

for(var q in SOCKET_LIST){

 var socket = SOCKET_LIST[q];

 if (allbullets === undefined) 
 {
 }
 else {
 for(var k = 0;k<allbullets.length;k++) 
 {
    if(allbullets[k].user_id == q)
 {
 packbul= {
        x:allbullets[k].xtype.x,
        y:allbullets[k].xtype.y,
        userid:allbullets[k].user_id,
    }// array end
 } // if end 
  //obj end
 } // end else undefined objects
} //end for 
console.log(packbul);
socket.emit('newBullet',packbul);
if (allobjects[q] === undefined) 
 {
 }
 else{
 console.log("q:"+q);
  pack[q] = {
        x:allobjects[q].xtype.x,
        y:allobjects[q].xtype.y,
        userid:q,
    }// array end

 socket.broadcast.emit('newClientship',pack[q]);

 } // else end 
 } // For socket
 },1000/25); // Set Interval End

Index.html

var ship = Array();
var bullet= Array();
var bulletdata =Array();

 socket.on('newClientship',function(data){
   ship[data.userid]= data;
     });
    socket.on('newBullet',function(data){
;
   bulletdata.push(data);
});
        var previous;  // var for renderworld

    renderWorld = function(timestamp){
    if (!previous) previous = timestamp;
    elapsed = timestamp - previous;
    updateFps();
    ctx.font="150px Arial"; 
    ctx.fillStyle = "white";
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for ( var i in ship){   ctx.fillText(ship[i].userid,ship[i].x,ship[i].y);       
        }

        for (var i in bulletdata){
        ctx.fillText(".",bulletdata[i].x,bulletdata[i].y);
        }
    bulletdata = [];
    drawFps(200,20) ; 
    previous = timestamp;
    window.requestAnimationFrame(renderWorld);

    }

So I managed to get one bullet over to the client. Problem now is that each time a player shoots a bullet the old bullet vanish and the new start from beginning same with another client . 1 st client shoots . If the second client starts shooting the bullet from player 1 is deleted. Normally I wanted to have each client with his own bullets and all bullets that are created as objects on Server side to be drawn on the clients. The ships work perfect but somehow the bullet flickers and doesn't fit into the canvas 😔 Thank you

Answer 2

Solved !!! it after 3 frustrating days omg

again thx for the push without it I would have been lost

The problem was mixing object array and standard array. Eg var x = {} —> Object Array var x = []. —> Standard Array

People keep saying that you shouldn't emit objects but atm I am glad the bullets arrived at client . Also with standard arrays I would need to split after a choosen index and have to set the dataset points by myself . With object arrays it is easier to access them.

Maybe somebody can tell me what I emit when I push an object array into a standard array at the Server side . Is this an object or standard array ? Are the object headers that create performance issues (this is what in read somewhere) included in that array I emit to the client? I mean on the client I side I receive an array but in the for loop with the ctx I have an object array again which was inside the standard array

if(allbullets[k].user_id == q)
 {
 packbul= {
        x:allbullets[k].xtype.x,
        y:allbullets[k].xtype.y,
        userid:allbullets[k].user_id,
    }// array end
 packbularray.push(packbul);
 } // if end 

Index.html

var ship = Array();
var bullet= Array();
var bulletdata =Array();

 socket.on('newClientship',function(data){
   ship[data.userid]= data;
   //ship.x = data.x;
   //ship.y = data.y;
   //ship.user = data.userid;
     });
    socket.on('newBullet',function(data){
   bullet= data;
   //bulletdata.push(bullet);
   //ship.x = data.x;
   //ship.y = data.y;
   //ship.user = data.userid;
     });