时间戳

首页 > 解决方案 > 如何为所有其他客户端移动特定客户端 div 他的鼠标位置

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

问题描述

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

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

标签： javascriptjqueryhtmlsocketssocket.io

解决方案

您应该更新通过 发送的数据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"  });
    }
});

推荐阅读