Javascript 如何显示在线用户'；使用Socket.io聊天的姓名_Javascript_Socket.io

Javascript 如何显示在线用户'；使用Socket.io聊天的姓名

javascript socket.io

Javascript 如何显示在线用户'；使用Socket.io聊天的姓名,javascript,socket.io,Javascript,Socket.io,我在谷歌上搜索了很多，但我找不到任何关于我具体情况的答案。我只想显示聊天室中在线用户的姓名。我的代码分为两页： index.js： var express = require('express'); var socket = require('socket.io'); //app setup var app = express(); var server = app.listen(8080, function(){ console.log('ascoltando la richiesta all

我在谷歌上搜索了很多，但我找不到任何关于我具体情况的答案。我只想显示聊天室中在线用户的姓名。我的代码分为两页：

index.js：

var express = require('express');
var socket = require('socket.io');
//app setup
var app = express();
var server = app.listen(8080, function(){
console.log('ascoltando la richiesta alla porta 8080');
});
//static 
app.use(express.static('public'));
//socket setup
var io = socket(server);
io.on('connection', function(socket){
console.log('fatta la connessione socket', socket.id);
socket.on('chat', function(data) {
  io.emit('chat', data); 
});
socket.on('typing', function(data) {
    socket.broadcast.emit('typing', data);
});
});

chat.js（链接到html页面的文件）：

//连接
var socket=io.connect（'http://localhost:8080'); // index.js中的可变窝潜水员
//质疑
var message=document.getElementById（'message'）；
var handle=document.getElementById（'handle'）；
var button=document.getElementById（'send'）；
var output=document.getElementById（'output'）；
var feedback=document.getElementById（'feedback'）；
//巴索滚动条
函数updateScroll（）{
var元素=document.getElementById（“输出”）；
element.scrollTop=element.scrollHeight；
}
//发射事件
addEventListener（'click'，function（）{
socket.emit（'chat'{
message:message.value，
句柄：handle.value
}); 
});
message.addEventListener（'keypress'，function（）{
emit（'typing'，handle.value）；
});
//听着，eventi
socket.on（'chat'，函数（数据）{
if（data.message！==“”&data.handle！==“”）{
if（handle.value==data.handle）{
反馈。innerHTML=“”；
output.innerHTML+=''+'+'+'Tu'+'
'+data.message+'

'；
updateScroll（）；
document.getElementById（'message'）。值=“”；
}否则{
反馈。innerHTML=“”；
output.innerHTML+=''+'+data.handle+'
'+data.message+'

'；
updateScroll（）；
document.getElementById（'message'）。值=“”；
}
} 
});
socket.on（'typing'，函数（数据）{
feedback.innerHTML=''+data+'sta scrivendo…'+io.engine.clientscont；
});

编辑：我添加了html代码，因此您可以理解我使用的元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MEETY - Torino</title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="icona.ico">

</head>
<body id="index-body">


        <div id="output"></div>

        <script src="/chat.js"></script>
        <input type="text" id="message" placeholder="Cosa vorresti fare..." maxlength="100"  required>
        <button id="send" ><i class="fa fa-send-o"></i></button>




<aside>
    <input id="handle" type="text" placeholder="Il tuo nome" maxlength="18" required>
    <p>Sei a Torino <br> <br> Vai a <a href="milano.html">Milano</a> </p>
    <p id="home"><a href="home.html"><i class="fa fa-home"></i></a></p>  
    <div id="feedback"><div id="segnaposto"></div></div> 
    <div id="numero"></div>
</aside>
<script src="/chat.js"></script>
</body>
</html>


米蒂-都灵

你看到了什么？此外，与用户名没有任何关系，因此您应该如何显示它？用户名是“handle”，我更新了我的问题，添加了您给我的信息。我可以看到您正在进行聊天部分，但是您在哪里尝试显示所有用户名的列表我还没有创建div，因为我不知道如何创建，但是，如果它帮助你，我们可以考虑div“NUMO”作为用户名列表显示的地方。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MEETY - Torino</title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="icona.ico">

</head>
<body id="index-body">


        <div id="output"></div>

        <script src="/chat.js"></script>
        <input type="text" id="message" placeholder="Cosa vorresti fare..." maxlength="100"  required>
        <button id="send" ><i class="fa fa-send-o"></i></button>




<aside>
    <input id="handle" type="text" placeholder="Il tuo nome" maxlength="18" required>
    <p>Sei a Torino <br> <br> Vai a <a href="milano.html">Milano</a> </p>
    <p id="home"><a href="home.html"><i class="fa fa-home"></i></a></p>  
    <div id="feedback"><div id="segnaposto"></div></div> 
    <div id="numero"></div>
</aside>
<script src="/chat.js"></script>
</body>
</html>