0

我已经使用 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);
});

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

4

2 回答 2

0

您应该更新通过 发送的数据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"  });
    }
});
于 2019-03-01T14:33:44.633 回答
0

您没有使用传入的数据设置位置。在您的示例中，它使用全局xpand 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 );
});
于 2019-03-01T14:18:02.770 回答