javascript - 修复 socket.io 多人游戏中的延迟

Question

我正在尝试在多人游戏(最多 2 个玩家)中重现一个简单的游戏。我正在使用 javascript、node.js、socket.io 和 express 来做到这一点。一切都很好，但从我激活服务器和客户端的主循环开始，游戏开始时非常流畅，但在 2 或 3 秒后，滞后和卡住呈指数增长。我知道这是为了我在无限循环中调用的无限事件监听器......我怎样才能避免这种情况？

这是服务器的循环:

function updateGameArea(){

    frameNo+=1;  
    if (players.length < 2){
            if (players[0]!=socket.id){
                console.log('Logged',socket.id);
                players.push(socket.id);
            }

    }
    for (i=0;i<players.length;i++){
        if (socket.id==players[i]){

            var c=i;
        }
    }
    if (!id1 || !id0){
    socket.emit('id',{'id':c});
    }




    socket.on('info',(data)=>{

        if (data.c==0){

            myGamePiece=data.x;
            info0=true;
        }
        else {

            yourGamePiece=data.x;
            info1=true;
        }
    })

    socket.on('id0',()=>{
        id0=true;

    })

    socket.on('id1',()=>{

        id1=true;
    })


    if (id0 & id1 & info0 & info1){
    socket.emit('go');
    socket.emit('frame',{'f':frameNo});
    socket.on('newpos',(data)=>{
        console.log('Wroking');
        if (data.c==0){
            myGamePiece.newPos();
            socket.emit('info0',{'o':myGamePiece.gravitySpeed,'x':myGamePiece.x,'y':myGamePiece.y,'sy':myGamePiece.speedY});
        }
        else if(data.c==1){
            yourGamePiece.newPos();
            socket.emit('info1',{'o':yourGamePiece.gravitySpeed,'x':yourGamePiece.x,'y':yourGamePiece.y,'sy':yourGamePiece.speedY});
        }
    })

    socket.on('numob',(data)=>{
       myObstacles[myObstacles.length-1]=data.i;
       myObstacles[myObstacles.length-1]=data.l;
    })

    if (frameNo ==1 || everyinterval(150)){
        socket.emit('createob');                          
    }

    for (i=0;i<myObstacles.length;i+=1){
        myObstacles[i].x += -1 ;
        socket.emit('agobj',{'i':i});
    }

    for (i=0;i<myObstacles.length; i+=1){
        if (myGamePiece.crashWith(myObstacles[i])){
            socket.emit('dead0');
        }
        else if(yourGamePiece.crashWith(myObstacles[i])){
            socket.emit('dead1');
        }   
    }


    socket.on('push',(data)=>{
        var l=speed(data.id);
        if (l=0){
            var id=0;
            y=-3.5
            socket.emit('pushinf',{'y':y,'id':id})
        }
        else{
           var  id=1;
            y=-3.5;
            socket.emit('pushinf',{'y':y,'id':id})
        }
    })

    socket.on('disconnect',() => {
        console.log('id attivo',socket.id);
        console.log('disconnected!',socket.id);
        for (i=0;i<players.length;i++){
            if (players[i]==socket.id){
                players.splice(i,1);
            }   
        }

    });
}

这是客户周期:

function updateGameArea(){

    socket.on('connect', function() {
            console.log("connected from the client side");
    });

    socket.on('id',function(data){
        console.log('server sent info id to me')
      console.log(data.id)
        var id=data.id;
        console.log(id);
        if (id==0){
        socket.emit('id0');
        }
        else {
            socket.emit('id1');
        }   
        socket.emit('info',{'x':myGamePiece,'c':id});
    });
    socket.on('go',function(){
        go=true;
    })
    if (go){
            socket.on('frame',function(data){
                frameNo=data.f;
            })
            socket.on('createob',function(){
              x=myGameArea.canvas.width;
              minHeight=60;
              maxHeight=140;
              height=Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
              minGap=60;
              maxGap=90;
              var gap=Math.floor(Math.random()*(maxGap-minGap+1)+minGap);     
              myObstacles.push(new component(10,height,"green",x,0));
              myObstacles.push(new component(10,x-height-gap,"green",x,height + gap));
              socket.emit('numob',{'l':myObstacles[myObstacles.length],'i':myObstacles[myObstacles.length-1]})
             });
            socket.emit('newpos',{'c':id});
            socket.on('info0',function(data){
                if (id==0){
                    myGamePiece.gravitySpeed=data.o
                    myGamePiece.x=data.x;
                    myGamePiece.y=data.y;
                    myGamePiece.speedY=data.sy;
                }
                else{
                  yourGamePiece.gravitySpeed=data.o;
                  yourGamePiece.x=data.x;
                  yourGamePiece.y=data.y;
                  yourGamePiece.speedY=data.sy;
                }
            })
            socket.on('info1',function(data){
              if (id==1){
                    myGamePiece.gravitySpeed=data.o;
                    myGamePiece.x=data.x;
                    myGamePiece.y=data.y;
                    myGamePiece.speedY=data.sy;
                }
                else{
                  yourGamePiece.gravitySpeed=data.o;
                  yourGamePiece.x=data.x;
                  yourGamePiece.y=data.y;
                  yourGamePiece.speedY=data.sy;
                }
            })

            socket.on('dead0',function(){
              if (id==0){
                myGameArea.stop();
                mySound.play();
                GameO=true;
              }
              else{
                mySound.play();
                yourGamePiece.gravitySpeed==3.5;
              }
            })
            socket.on('dead1',function(){
              if (id==1){
                myGameArea.stop();
                mySound.play();
                GameO=true;
              }
              else{
                mySound.play();
                yourGamePiece.gravitySpeed==3.5;
              }
            })
            socket.on('agobj',function(data){
              myObstacles[data.i].x+=1;
            })
            myGameArea.canvas.addEventListener('click',function(){
              socket.emit('push',{'id':id});
              if (mSoundw.sound.pausedy) {
                        mySoundw.sound.play();
                    }
                    else{
                        mySoundw.sound.currentTime = 0
                    }

              socket.on('pushinf',function(data){
                    if (id==data.c){
                          myGamePiece.gravitySpeed=y;
                          myGamePiece.image.src="angry.png";
                    }
                    else{
                          yourGamePiece.gravitySpeed=y;
                          yourGamePiece.image.src="angryb.png";
                    }
              })
            },false)
    }

}

Answer 1

正如您自己所说，乍一看，我认为听众可能是罪魁祸首。如果客户端的 updateGameArea() 是重复更新游戏的方法，则每次更新发生时，您都会向套接字事件添加一个监听器。也就是说，在 ex 之后。通过该更新方法进行 5 次迭代，如果一条消息通过套接字到达，它将运行专用代码 5 次。

您只需告诉套接字一次它应该如何处理特定消息(对任何监听器都一样)，您可以在设置时执行此操作，无需通过循环一遍又一遍地运行它。

这里尝试重构您发布的代码以符合我所说的内容。请注意，当客户端收到消息时，我如何使用 bool 值或其他变量来提醒 updateGameArea() 方法需要执行某些任务(执行此任务后， bool 值/变量会重置并在必要时再次等待消息)。

这是假设您已经初始化了一个变量“socket”。

希望我没有破坏任何东西。

var id = null;//as long as it's null, no message is emitted from the client
var go;
var createob = false;
var clicked = false;

socket.on('connect', function() {
    console.log("connected from the client side");
});

socket.on('id',function(data){
    console.log('server sent info id to me')
    console.log(data.id)
    id = data.id;//set the id
    console.log(id);
});

socket.on('go',function(){
    go = true;
});

socket.on('frame',function(data){
    if (go) {
        frameNo=data.f;
    }
});

socket.on('createob',function(){
    if (go) {
        createob = true;
    }
});

socket.on('info0',function(data){
    if (id==0){
        myGamePiece.gravitySpeed=data.o
        myGamePiece.x=data.x;
        myGamePiece.y=data.y;
        myGamePiece.speedY=data.sy;
    }
    else{
        yourGamePiece.gravitySpeed=data.o;
        yourGamePiece.x=data.x;
        yourGamePiece.y=data.y;
        yourGamePiece.speedY=data.sy;
    }
});

socket.on('info1',function(data){
    if (id==1){
          myGamePiece.gravitySpeed=data.o;
          myGamePiece.x=data.x;
          myGamePiece.y=data.y;
          myGamePiece.speedY=data.sy;
      }
      else{
          yourGamePiece.gravitySpeed=data.o;
          yourGamePiece.x=data.x;
          yourGamePiece.y=data.y;
          yourGamePiece.speedY=data.sy;
      }
});


socket.on('dead0',function(){
    if (id==0){
        myGameArea.stop();
        mySound.play();
        GameO=true;
    }
    else{
        mySound.play();
        yourGamePiece.gravitySpeed==3.5;
    }
});

socket.on('dead1',function(){
    if (id==1){
        myGameArea.stop();
        mySound.play();
        GameO=true;
    }
    else{
        mySound.play();
        yourGamePiece.gravitySpeed==3.5;
    }
});

socket.on('agobj',function(data){
    myObstacles[data.i].x+=1;
});

myGameArea.canvas.addEventListener('click',function(){
    clicked = true;
    socket.emit('push',{'id':id});
    if (mSoundw.sound.pausedy) {
        mySoundw.sound.play();
    }
    else{
        mySoundw.sound.currentTime = 0
    }
},false);

socket.on('pushinf',function(data){
    if (clicked) {//I was not sure if you need this to run only when there's been click. If it's independent of the click then remove this condition and the 'clicked = false' below
        if (id==data.c){
              myGamePiece.gravitySpeed=y;
              myGamePiece.image.src="angry.png";
        }
        else{
              yourGamePiece.gravitySpeed=y;
              yourGamePiece.image.src="angryb.png";
        }
        clicked = false;
    }  
})

function updateGameArea(){
    //whenever the 'id' message from the server arrives, it sets the id;
    //whenever the game updates again it sees a non-null id and emits the
    //corresponding message below, then sets the id to null again
    if (id != null) {
        if (id==0){
            socket.emit('id0');
        }
        else {
            socket.emit('id1');
        }   
        socket.emit('info',{'x':myGamePiece,'c':id});
        id = null;
    }


    if (go){
        if (createob) {
            x=myGameArea.canvas.width;
            minHeight=60;
            maxHeight=140;
            height=Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
            minGap=60;
            maxGap=90;
            var gap=Math.floor(Math.random()*(maxGap-minGap+1)+minGap);     
            myObstacles.push(new component(10,height,"green",x,0));
            myObstacles.push(new component(10,x-height-gap,"green",x,height + gap));
            socket.emit('numob',{'l':myObstacles[myObstacles.length],'i':myObstacles[myObstacles.length-1]})

            /*
            Depending on if you only want this body to be executed if and only if the 'createob' message has been received,
            you may want to reinitialize the boolean
            */
            createob = false;//comment this out if this body should run from the moment the message is received until further in the game, without depending on the createob message.
        }
        socket.emit('newpos',{'c':id});
    }
}