Animation in js has unwanted slight delay

Question

I am making a multiplayer game in html5 using socket.io, and node.js, I have two main files: app.js: server, Index.html: Client. I have a walking animation that takes some time time to start going. I have tried reducing and increasing the frame rate of the animation in the setInterval and even editing the image itself, but nothing has worked.

here is my code:

index.html:

  id="ctx"
  width="1920"
  height="1080"
  style="border:1px solid #000000;"
></canvas>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  var img = {};
  img.player = new Image();
  img.player.src = "/client/img/sprite_01_male.png";
  var sx = 0;
  var sy = 0;
  var ctx = document.getElementById("ctx").getContext("2d");
  ctx.font = "30px Arial";

  var socket = io();

  reset_sx = function() {
  if (sx > 96) {
    console.log(sx);
    sx = 0;
  }
}

  socket.on("newPositions", function(data) {
    ctx.clearRect(0, 0, 1920, 1080);
    for (var i = 0; i < data.length; i++)
      ctx.drawImage(img.player, sx, sy, 32, 48, data[i].x, data[i].y, 32, 48);

  });



  document.onkeydown = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: true });
      sx += 32;
      sy = 96;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: true });
      sx += 32;
      sy = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: true });
      sx += 32;
      sy = 48;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: true });
      sx += 32;
      sy = 144;
    }
    // w
    reset_sx();
  };
  document.onkeyup = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: false });
      sx = 0;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: false });
      sx = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: false });
      sx = 0;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: false });
      sx = 0;
    }
    // w
  };
</script>

app.js:

<canvas
  id="ctx"
  width="1920"
  height="1080"
  style="border:1px solid #000000;"
></canvas>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  var img = {};
  img.player = new Image();
  img.player.src = "/client/img/sprite_01_male.png";
  var sx = 0;
  var sy = 0;
  var ctx = document.getElementById("ctx").getContext("2d");
  ctx.font = "30px Arial";

  var socket = io();

  reset_sx = function() {
  if (sx > 96) {
    console.log(sx);
    sx = 0;
  }
}

  socket.on("newPositions", function(data) {
    ctx.clearRect(0, 0, 1920, 1080);
    for (var i = 0; i < data.length; i++)
      ctx.drawImage(img.player, sx, sy, 32, 48, data[i].x, data[i].y, 32, 48);

  });



  document.onkeydown = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: true });
      sx += 32;
      sy = 96;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: true });
      sx += 32;
      sy = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: true });
      sx += 32;
      sy = 48;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: true });
      sx += 32;
      sy = 144;
    }
    // w
    reset_sx();
  };
  document.onkeyup = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: false });
      sx = 0;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: false });
      sx = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: false });
      sx = 0;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: false });
      sx = 0;
    }
    // w
  };
</script>

Answer 1

The reason why it is taking time to update is mainly because of socket.io. Even though WebSockets have fast connections, they can get laggy. So it is probably taking time for the client to send the data to the server, the server to make calculations, and send back to the client.

There are a few ways to fix that. One way is to do some calculations on the client side. That way you can start the walking animation without needing to wait for server data. Then, when the server sends the client the official data, replace your current data with that.

What you might be dealing with is simple lag. Wikipedia has an article about lag, as well as ways to fix lag.

Good luck making your game. ☺