Question

我正在创建一个聊天，其中会有一个显示已连接到服务器的用户的div。用户的名字来自提示。我已设法将每个连接的用户推送到阵列，但无法弄清楚如何显示该阵列。目前它只附加了具有单个用户名称的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对我来说是一个新手，并认为这可能是最简单的方法。

Answer 1

用户加入时将用户数组发送回客户端。这样，每次用户加入时，所有客户端都将拥有更新的用户列表。以下是关于如何实现此

的建议

服务器：

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]));
  }
});

在Node.js

1 个答案: