Question

我已经使用socket.io构建了项目，我为每个连接的用户创建了一个div（带有他的sessionID），每次单击鼠标都会将div移到他在网络中的点击位置，并向所有其他套接字移动。但是我有一个问题，当用户点击屏幕时-它将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

您不是使用传入的数据来设置位置。在您的示例中，它使用的是全局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 );
});

Answer 2

您应该更新通过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"  });
    }
});

如何将特定客户div移到其他所有客户的鼠标位置上

2 个答案: