如何为所有其他客户端移动特定客户端 div 他的鼠标位置答案

【问题标题】：How to move specific client div his mouse position for all the other clients如何为所有其他客户端移动特定客户端 div 他的鼠标位置
【发布时间】：2023-03-29 03:09:01
【问题描述】：

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

有人看到问题了吗？请在这方面帮助我..

【问题讨论】：

似乎您正在使用全局 xp 和 yp 设置 let 和 top ，而不是您传递给 data 的内容
当您.emit('move') 时，您将xp 和yp 传递给服务器，但是当您在.on('emit') 中接收时，服务器不会向您发送任何xp 和yp。
@robinvrd 我不明白该怎么做。我更改为 data.xp 它不移动 div。没有错误
@Dasmond 在服务器端显示你的socket.emit('move')。
@robinvrd 查看编辑

标签： javascript jquery html sockets socket.io

【解决方案1】：

您没有使用传入的数据设置位置。在您的示例中，它使用全局xp 和yp。

当您调用emit 时，您还没有将user 与数据一起传递，因此其他客户端不知道应该移动哪个用户。我建议还将其添加为您发送的数据中的一个字段。

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 );
});

【讨论】：

data在socket.on回调中的结构是什么

【解决方案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"  });
    }
});

【讨论】：