Как переместить конкретного клиента, разделить его положение мыши для всех остальных клиентов

Question

Я собрал проект с помощью socket.io, я создаю его для каждого подключенного пользователя div (с его sessionID), и каждый щелчок мыши перемещает его div в позицию щелчка в его сети и во все остальные сокеты.но у меня есть проблема, когда пользователь щелкает по экрану - он перемещает div в свою позицию, но для всех других клиентов он перемещается в их позицию последнего нажатия.

Вот что ясделали:

socket.on('addPlayer', function(user) {
    $('#stage').append('<div class="player" id="user_' + user + '">' + user +'</div>');
});

$('#stage').on('click', function(e) {
	
    mouseX = e.pageX;
    mouseY = e.pageY; 	

    xp += (mouseX - xp);
    yp += (mouseY - yp);

    socket.emit('move', {
        xp: xp,
        yp: yp
    });
});

socket.on('move', function(data) {
	$('#user_' + data).animate({ left: xp + 'px', top: yp + 'px' }, 400 );
});

Мой сервер

socket.on('move', function(data) {
    io.emit('move', socket.id);
});

Кто-нибудь видел проблему?Пожалуйста, помогите мне в этом отношении ..

Answer 1

Вы должны обновить данные, которые вы отправляете через move.

На стороне сервера должно быть что-то вроде:

socket.on('move', function(socket, data) {
    // broadcast to all sockets WHO is moving and WHERE
    io.emit('move', {userid: socket.id, xp: data.xp, yp: data.yp});
});

А на стороне клиента что-то вроде:

$('#stage').on('click', function(e) {
    $('#my_user').animate({ left: e.pageX + "px", top: e.pageY + "px"  });

    socket.emit('move', {xp: e.pageX, yp: e.pageY});
});

socket.on('move', function(data) {
    // check if it is not your own informations that server send back to you
    if (data.userid != my_userid) {
        $('#user_' + data.userid).animate({ left: data.xp + "px", top: data.yp + "px"  });
    }
});

Answer 2

Вы не устанавливаете позицию, используя переданные данные. В вашем примере используются глобальные xp и yp.

Вы также не передали user сданные, когда вы звоните emit, поэтому другие клиенты на самом деле понятия не имеют, какого пользователя следует переместитьЯ бы предложил также добавить это как поле в отправляемых вами данных.

socket.emit('move', {
        user: //THE VAR WHICH HOLDS THE SESSIONID FOR THIS USER
        xp: xp,
        yp: yp
    });

socket.on('move', function(data) {
    $('#user_' + data.user).animate({ left: data.xp + 'px', top: data.yp + 'px' }, 400 );
});