6

クライアントですべてのユーザーのユーザー名のリストを表示できないため、socket.io クライアントで問題が発生しています。私はsocket.ioが初めてで、サーバー側でコーディングする方法を知っています。クライアント側のプログラミングに問題があります。私がしたいのは、接続されているユーザーのユーザー名を client.html に表示することだけです<div id="users"></div>。

これがserver.jsの私のコードの一部です

var users = [];

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function (socket) {

    socket.on('adduser', function (user) {
        socket.user = user;
        users[user] = user;
        console.log(users);
    });

    socket.on('disconnect', function () {
        console.log('User: ' + users[socket.user] + ' has disconnected');
        delete users[socket.user];
        console.log(users)
    });

    socket.on('update', function () {
        users[user] = user;
        console.log('Current users: ', users);
    });
});
});

これは、ユーザー名を配列に挿入するための私の単純なclient.htmlですusers[]

<html>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    var socket = io.connect('http://localhost:8080');

socket.on('connect', function(){
        socket.emit('adduser', prompt("What's your name?"));

</script>
<div style="float:left;width:150px;border-right:2px solid black;height:510px;padding:10px;overflow:scroll-y;text-align:center;">
    <b>Users</b>
    <div id="users"></div>
</div>
</html>

前もって感謝します。:)

4

1 に答える 1

8

あなたの最善の策は、プレイヤーが接続または切断したときにユーザーリストをクライアントに送り返すことです。コード例を次に示します。

var users = [];

app.get('/', function (req, res) {

res.sendfile(__dirname + '/test.html');
    });

io.sockets.on('connection', function (socket) {

    socket.on('adduser', function (user) {
        socket.user = user;
        users.push(user);
        updateClients();
    });

    socket.on('disconnect', function () {
        for(var i=0; i<users.length; i++) {
            if(users[i] == socket.user) {
                delete users[users[i]];
            }
        }
        updateClients(); 
    });

    function updateClients() {
        io.sockets.emit('update', users);
    }

});

そして、あなたのクライアントコードで:

<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    var socket = io.connect('http://localhost:8080');

    socket.on('connect', function (){
        socket.emit('adduser', prompt("What's your name?"));
    });

    var userList = [];

    socket.on('update', function (users){
        userList = users;
        $('#user').empty();
        for(var i=0; i<userList.length; i++) {
            $('#user').append("<h1>" + userList[i] + "</h1>"); 
        }
    });
</script>
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
    <b>Users</b>
    <div id="users">
        <p id="user"></p>
    </div>
</div>
于 2013-10-09T08:59:28.767 に答える