如何向 socket.io 中的新客户端显示我连接的客户端？

Question

我目前正在做 socket.io 项目。当我连接到新套接字时，它会在“usersDiv”上显示我输入的用户名，所有客户端都应该在那里。但问题是当我打开另一个选项卡并输入我的名字时，它只有新客户端的名称但是当我切换到另一个选项卡时，有 2 个客户端名称。新客户端不显示最近连接的客户端输入。

这是我的代码：

app.js（服务器）

const app = express();
const socket = require('socket.io');
const server = app.listen(8001, function(){
    console.log('listening to port 8001')
});
const io = socket(server);
app.use(express.static('./views'));

app.set('views','./views');
app.set('view engine','ejs');
app.get('/', function(req, res){
    res.render('index');
});

io.on('connection', function(socket){
    console.log('Made Connection');


    socket.on('username', function(data){
        let users = [];
        users.push(data.userName);
        io.emit('joined', users)
        
    });
});

client.js（客户）

let username = prompt('What is your username?');
let usersDiv = document.getElementById('users');
let container = document.getElementById('container');
let socket = io();
let clear = document.getElementById('clear');
let circle = document.createElement('div');
    

    socket.emit('username', {
        userName: username
    })

    socket.on('joined', function(data){
        usersDiv.innerHTML += data + '<br>';
    })

Answer 1

正如 Chris G 所指出的，您需要在事件处理程序连接之外声明 let users = [];。

例如 app.js 将套接字与快速服务器一起使用：

const express = require('express');
const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static("public"));
app.set('view engine','ejs');

app.get('/', function(req, res){
    res.render('index');
});

let users = [];

io.on('connection', function(socket) {
  console.log('Made Connection');

  socket.on('username', function(data) {
    io.emit('joined', users);
    users.push(data.userName);
  });
});

const listener = server.listen(process.env.PORT, () => {
  console.log('app is running on port ' + listener.address().port);
});

然后对于客户端，您可以创建如下路径：public/client.js

let username = prompt('What is your username?');
let usersDiv = document.getElementById('users');
let container = document.getElementById('container');
let clear = document.getElementById('clear');
let circle = document.createElement('div');
let socket = io.connect();

socket.emit('username', {
  userName: username
});

socket.on('joined', function(data) {
  usersDiv.innerHTML = data.join('<br>');
});

此外，在附加用户名或消息时，您需要小心使用 html，否则有人可能会进行 xss 攻击。

如何向 socket.io 中的新客户端显示我连接的客户端？

How can I show my connected clients to the new client in socket.io?

javascript

websocket

node.js

express

socket.io