节点/套接字 IO 多玩家答案

【问题标题】：Node/Socket IO Multiple Players节点/套接字 IO 多玩家
【发布时间】：2013-10-27 14:37:08
【问题描述】：

我正在使用 node 和 socketi IO 来创建一个简单的多人游戏。当一个新的客户端加入时，我创建一个新的 HTML 元素，其 ID 是每个客户端的 socket.id。

客户端是移动设备，当它们移动时，我会发送“deviceorientation”值，希望让每个客户端都能控制其中一个 HTML 元素。不过我做错了，我不太明白，因为所有发生的事情都是所有客户端都在争夺对最新 HTML 元素的控制权，而不是使用自己的套接字 id 控制 HTML 元素。

在服务器上：

servio.on('connection', function (socket) {

    servio.sockets.emit('newplayer',socket.id);

    socket.on('move', function(data) {
        socket.broadcast.emit('clientmove', data);
        console.log(data.myid);
    });

});

在客户端：

iosocket.on('newplayer', function(data) {
            myid    =   data;
            $('body').append('<div class="dot _jsDot" id="'+myid+'"></div>');
        });

window.addEventListener("deviceorientation", handleOrientation, true);

        function handleOrientation(event) {
            var absolute = event.absolute;
            var alpha    = event.alpha;
            var beta     = event.beta;
            var gamma    = event.gamma;

            vals = {
                betaVal     : beta,
                gammaVal    : gamma,
                myid        : myid
            }

            iosocket.emit('move', vals);
        }

        iosocket.on('clientmove', function(data) {

            var x = Math.round(data.gammaVal)*3;
            var y = Math.round(data.betaVal)*3;

            $('#'+data.myid+'').css({'left':x + $(window).outerWidth()/2});
            $('#'+data.myid+'').css({'top':y + $(window).outerHeight()/2});

        });

我希望我忽略了一些小问题，而不是一些根本性的混乱。如果任何对 node 和 socket io 更有经验的人可以提供一些建议，那就太好了。

【问题讨论】：

如果您使用 Chrome/Firefox 中的开发工具查看源代码（右键单击 -> 检查元素），这些元素是否具有正确的 ID，或者它们是否都具有 id="undefined" 或其他内容像那样？可能就是这么简单。
myid 是全局变量吗？因为每当连接新客户端时，您似乎都会覆盖客户端 ID

标签： javascript node.js socket.io

【解决方案1】：

您正在将每个人的 myid 更新为新玩家的 ID。我建议你区分这两者。

在服务器上执行以下操作：

everyone.push(socket.id); // global array of all player ids
socket.emit('init',[socket.id,everyone]);
servio.sockets.emit('newplayer',socket.id);

在客户端执行如下操作：

socket.on('newplayer', function(data) {
    myid = data.id;
    create_div_with(data.id);
    create_everyone_else(data.everyone);
});
socket.on('newplayer', function(id) {
    create_div_with(id);
});

【讨论】：