Real-time NODEJS data transfer

To practice, I am trying to develop a multiplayer game. I am using NODEJS and HTML5 canvas. I use Socket.io to exchange data between client and server

I would like to know how to optimize client-server data transfer.

INFO

• The player is constantly moving and I have to update the player's position every 1000/60ms (60fps).

• Player movements:

    vecX = mouse.x - player.x;
    vecY = mouse.y - player.y;
    vec = Math.sqrt(vecX*vecX + vecY*vecY);

    dx = vecX/vec;
    dy = vecY/vec;

    player.x += dx*player.speed;
    player.y += dy*player.speed;

      

        
        
        
      

    

• What have I tried?

First try:

• The client sends the mouse position to the server for every mouse movement.

• Server keeps mouse position

• The server updates the players' position (for each mouse position) every 1000/60 ms and returns it to every player who has a position on the screen (only part of the map is displayed on the screen).

-> Problem: Lagging a lot.

2nd Try:

• The client sends dx and dy to the server for every mouse movement (not mouse position).

• The server extracts these dx and dy to each player.

• The client moves each player along them dx and dy.

• The server moves each player over it dx and dy (just refreshing the data on the server side).

• The server receives the position of the players every 100ms (corrective position).

-> Problem: unsynchronized data