Socket.io工作异常

Question

I am using socket.io to create a game with some moving object. In my program i have this (very simplified) code:

socket.on('sync', function(newpos) {
    console.log(countcount + "{ x: " + object.x + " y: " + object.y + "}");
    countcount = 0;

    object.x = newpos.x;
    object.y = newpos.y;
});

function loop() {
    countcount++;
    console.log("loop")
    socket.emit('sync', SOME DATA);
    //A lot of game code
    ...
    //A lot of game code
    window.requestAnim(loop);
}

So i have the loop() where my game stuff is being executed, and i also have an event catcher that catches the 'sync' event sent from the server with the newpos of my object. But when i run the code my object is twitching. Not that very much but it's visible. Here is what my console in Google Tools tells me:

If you look at 1) it tells me that the loop run, then my callback is called, then the loop run again, and the callback is called again, but then the loop run and the callback is called TWO times. How is that possible? I have emitted single event and then i got callback triggered two times?

If you look at 2) similar thing happens. Why?

Also would you kindly show me the info about how this event handlers work in javascript on the client side? Can this callback interfere my loop in the middle of its executing? Or this callbacks is stacked somewhere?

Server-side code:

socket.on('sync', function(data){
    // Handle player commands
    if (data.left) {socket.speed.x += -1; }
    if (data.right) {socket.speed.x += 1; }
    if (data.up) {socket.speed.y += -1; }
    if (data.down) {socket.speed.y += 1; }

    socket.normSpeed = Controller.norm(socket.speed);//Controller.norm(socket.speed);
    socket.speed = Controller.mult(socket.normSpeed, 3);//Controller.mult(socket.normSpeed, 3);

    socket.pos.x += socket.speed.x;
    socket.pos.y += socket.speed.y;
    socket.emit('sync', socket.pos);

    socket.speed.x = 0;
    socket.speed.y = 0;
});

Answer 1

Your problem is the overall flow of your game. Request Animation Frame , is described as typically calling 60 times per second. If you do the math (Divide 1000ms / 60frames/s), then you get approx 16 milliseconds per frame. While it may seem like a little bit of time, that little bit of time can have massive consequences.

Sockets.io, like any other Websocket connections tend to have a bit of uncertainty on when the packet of data would arrive. The packet might arrive earlier or it might arrive later depending on the network due to latency.

The problem is, is that the "rate" at which packets arrive does not match your frame rate of ~60 frames per second. There are two scenarios to this as a result.

In the first scenario, the packet arrives late. The frame loop, continues anyway at 16ms per frame because it is independent of the packets. By the time the packet arrived, the frame loop had already been called. This is why "loop" was called twice above section 1 of your image.

In the second scenario, the second packet arrives on time as the first packet arrives late. The main loop is constantly being called every 16ms, independent of the fact whether the return packet has been recieved or not. So, it would ask the server for the return packet continuously (the emitting of sync client-side). Both packets would be sent, but both packets will be received by the client in the same "frame". This is why you see two of the "sync" calls.

An example is what happened right before section 1 of your image. The loop was called twice, but data was not received. Where did that return data go? It went to the next frame, and on and on until the double response at the middle of section 1.

This is the flaw of your game. Never let the client ask the server for data. Always have a timed loop both sides independent from each other.

However, this is not the reason why your game is jerky. The reason is because you directly move the object to a location as soon as the packet was received. The correct way to do this would be to interpolate the new position with the old one to smoothen out movement.

(I know this as I was a game developer. PS, if you are going to make an Agar.io implementation, check out https://github.com/huytd/agar.io-clone for inspiration. They use socket.io too)