在使用 Socket IO 加入时显示多个用户

Question

我正在尝试在 Socket IO 中创建加入“派对室”的人员列表。一旦所有玩家都被考虑在内，主持人将锁定派对房间，并将视图提供给用户。但是，到目前为止，这一切都失败了。

控制台日志正在读取数据，playerName 已定义，但我仍然收到错误消息。这目前仅适用于一个 playerWaiting，但是，新玩家会覆盖 div 而不是列出。如果有人能指出正确的方法，那就太好了。

对象 {gameId: 76223, playerName: "cate", mySocketId: "zja-AP-wZ45JLqPg-c7c"} app.js:373

未捕获的类型错误：无法读取未定义 app.js:373 的属性“playerName”

App.Host.updateWaitingScreenapp.js:77

IO.playerJoinedRoomsocket.io.js:633

EventEmitter.emitsocket.io.js:2248

SocketNamespace.onPacketsocket.io.js:1930

Socket.onPacketsocket.io.js:1332

Transport.onPacketsocket.io.js:1303

Transport.onDatasocket.io.js:2378

websocket.onmessage

HTML

<script id="create-game-template" type="text/template">
    <div class="createGameWrapper">
        <div class="info">
            <div id="betSummary"></div>
            <div class="copy">Share the URL and Game ID below to let your mates have a punt on the action.</div>
        </div>
        <div id="gameURL" class="infoBig">Error!</div>

        <div class="info">Then click <strong>JOIN</strong> and <br/> enter the following Game ID:</div>
        <div id="spanNewGameCode" class="gameId">Error!</div>

        <button id="btnLockGame" class="btn">LOCK GAME</button>
        <div id="playersWaiting1"></div>
        <div id="playersWaiting2"></div>
        <div id="playersWaiting3"></div>
        <div id="playersWaiting4"></div>
        <div id="playersWaiting5"></div>
    </div>
</script>

JS

updateWaitingScreen: function(data) {
            console.log(data);

            // Store the new player's data on the Host.
            App.Host.players.push(data);

            // Increment the number of players in the room
            App.Host.numPlayersInRoom += 1;

            // Update host screen
            $('#playersWaiting1')
                .append('<p/>')
                .text('Player ' + App.Host.players[0].playerName + ' joined the game.');
            $('#playersWaiting2')
                .append('<p/>')
                .text('Player ' + App.Host.players[1].playerName + ' joined the game.');
            $('#playersWaiting3')
                .append('<p/>')
                .text('Player ' + App.Host.players[2].playerName + ' joined the game.');                    
            $('#playersWaiting4')
                .append('<p/>')
                .text('Player ' + App.Host.players[3].playerName + ' joined the game.');
            $('#playersWaiting5')
                .append('<p/>')
                .text('Player ' + App.Host.players[4].playerName + ' joined the game.');


            $( "#btnLockGame" ).click(function() {
                IO.socket.emit('hostRoomFull',App.gameId);
            });
    },

服务器端

function playerJoinGame(data) {
//console.log('Player ' + data.playerName + 'attempting to join game: ' + data.gameId );

// A reference to the player's Socket.IO socket object
var sock = this;

// Look up the room ID in the Socket.IO manager object.
var room = gameSocket.manager.rooms["/" + data.gameId];

// If the room exists...
if( room != undefined ){
    // attach the socket id to the data object.
    data.mySocketId = sock.id;

    // Join the room
    sock.join(data.gameId);

    //console.log('Player ' + data.playerName + ' joining game: ' + data.gameId );

    // Emit an event notifying the clients that the player has joined the room.
    io.sockets.in(data.gameId).emit('playerJoinedRoom', data);

} else {
    // Otherwise, send an error message back to the player.
    this.emit('error',{message: "This room does not exist."} );
    }
}

Answer 1

找出哪条线路出现故障。什么是 app.js:373？

我的猜测是您试图在数组已满之前读取数组中的所有值。如果没有元素 3，尝试从 undefined 获取 playerName 会抛出错误。

要么从 0 循环到房间中的玩家人数（假设您的计数正确且保持不变）

或者，

检查是否定义了App.Host.players[#]。如果未定义，则输出.text('seat # waiting')，否则检查playerName。这可以是一个循环，也可以像你一样硬编码。