Node.jsの配列にdivを追加する

私はチャットを作成しています。ここには、サーバーに接続しているユーザーを表示するdivがあります。プロンプトからユーザーの名前を取得しています。接続された各ユーザーを配列にプッシュすることができましたが、その配列を表示する方法を理解することはできません。現時点では、divは個々のユーザーの名前でのみ追加されますが、すべて表示する必要があります。Node.jsの配列にdivを追加する

<body> 

<div id="chatlog" class="col-sm-9"> 

    <ul id="messages"></ul> 
</div> 
<div id="online" class="col-sm-3"> 
    <div id="username"></div> 
</div> 
<form class="col-sm-12" action=""> 
    <input id="type" type="text" /> 
    <input type="submit" id="submit" /> 
</form> 

<script> 
    var socket = io(); 
    var user = prompt("What's your name?"); 



    $('form').submit(function() { 
     socket.emit('chat message', $('#type').val()); 
     $('#type').val(''); 
     return false; 
    }); 
    socket.on('chat message', function(msg) { 
     $('#messages').append($('<li>').text(msg)); 
    }); 
    socket.emit("join", user); 
    socket.on("join", function(user) { 

     $("#username").append($("<p>").text(user)); 

    }) 
</script> 



</body>

server.js

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var express = require("express"); 
var port = 3000; 
var onlineUsers = []; 
console.log(onlineUsers); 
app.use(express.static(__dirname + '/')); 

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

io.on('connection', function(socket) { 
console.log('a user connected'); 
socket.on("join", function(user) { 
    socket.emit("join", user); 
    onlineUsers.push(user); 
    console.log(onlineUsers); 

}); 
socket.on('chat message', function(msg) { 
    console.log('message: ' + msg); 
    io.emit('chat message', msg); 
}); 
socket.on('disconnect', function() { 
    console.log('user disconnected'); 
}); 

}); 

http.listen(port, function() { 
console.log('listening on *:' + port); 
});

私はまた、この別の方法を行う方法の提案を開いていますが、私にとって非常に新しいのNode.jsであり、これは最も簡単な方法かもしれないと思います。

出典

2016-12-22 Naomi

ユーザーが参加したときに、ユーザーの配列をクライアントに送り返します。このようにして、すべてのクライアントは、ユーザーが参加するたびに更新されたユーザーリストを保持します。

socket.on("join", function(user) { 
    onlineUsers.push(user); 
    io.emit("user list", onlineUsers); 
});

クライアント：

socket.emit("join", user); 
socket.on('user list', function(onlineUsers) { 
    $("#username").empty(); 
    for(var i=0;i<onlineUsers.length;i++){ 
    $("#username").append($("<p>").text(onlineUsers[i])); 
    } 
});

出典

2016-12-22 22:12:44 rckrd

このありえない作業以下は、この

サーバーを実装する方法の提案があります。これは、 – Naomi

が、 socket.on（ "参加"、機能（ユーザ）{; socket.emit（ "ユーザリスト"、onlineUsers）; onlineUsers.push（ユーザ）}）それを考え出し表示取得doesntの。はまだsocket.emit（ "join"、onlineUsers）でなければなりません。 – Naomi

@Naomi Ok、素晴らしい。私はそれはユーザーリストのために別のイベントを持って、それは "ユーザーリスト"と呼ぶ方が良いと思った。とにかくあなたの答えのコードは、ユーザーリストは1つのクライアントに返信するだけですべてのクライアントに送信されません。上記の例を更新したので、ユーザーリストをすべてのクライアントにプッシュします。 – rckrd

Node.jsの配列にdivを追加する

答えて

関連する問題