node.js - 如何显示所有客户端，包括连接到 socket.io 房间的发件人？
问题描述
下面是连接名为chat1的房间的代码。通过单击index.html的Active Users Window 中的Chat Room 1按钮，我可以显示除发件人之外的已连接客户端。我想显示发件人的姓名也与其他客户端一起显示在活动用户窗口中。
socket.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
usernames1 = [];
usernames2 = [];
usernames3 = [];
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
// var nsp = io.of('/chatroom');
// nsp.on('connection', function(socket) {
// console.log('ChatRoom namespace is created');
// // socket.on('hi',function(data){
// // console.log("Hi incoming")
// // })
// // nsp.emit('hi', 'Hello everyone!');
// });
io.of('/chatroom').on('connection', function(socket){ console.log("Connection establied")
socket.on('new user1',function(data, callback){
if(usernames1.indexOf(data)!=-1){
callback(false);
}
else
{
callback(true);
socket.username = data;
usernames1.push(socket.username);
socket.join('chat1',function(data)
{
console.log("In username "+usernames1)
console.log("\nIn socket.username "+socket.username+"\n")
updateUsernames();
});
}
// socket.join('chat1',function(data){
// console.log("Chat room 1 connected")
// });
})
function updateUsernames(){
console.log(usernames1);
socket.in('chat1').emit('comeon',usernames1)
}
});
http.listen(3000, function() {
console.log('listening on localhost:3000');
});
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<style>
#inp{
height:30px;
border:solid 1px #ccc;
}
.button1,.button2,.button3
{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#mainWrapper{
display:none;
}
#chatWrapper{
float:left;
border:1px #ccc solid;
border-radius:10px;
background:#f4f4f4;
padding:10px;
}
#chatWindow{
height:300px;
}
#userWrapper{
float:left;
border:1px #ccc solid;
border-radius:10px;
background:#f4f4f4;
padding:10px;
margin-left:20px;
width:150px;
max-height:200px;
}
body{
background:#f9f9f9;
}
#form2,#form1,#form3{
display: inline-block;
margin-top:30px;
margin-left: 5%;
padding-left: 12px;
height: 140px;
width: 325px;
border:solid rgb(0, 0, 0)
}
error{
border:#101999
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<script src = "/socket.io/socket.io.js"></script>
<script>
$(function () {
var socket = io('/chatroom');
var $form1= $('#form1');
var $form2= $('#form2');
var $form3= $('#form3');
var $username1=$('#username1');
var $username2=$('#username2');
var $username3=$('#username3')
var $users = $('#users');
var $error = $('#error');
$form1.submit(function(e){
e.preventDefault();
socket.emit('new user1', $username1.val(), function(data){
if(data){
// alert("Clicked")
$('.button1').hide();
$('.button2').hide();
$('.button3').hide();
$('#mainWrapper').show();
$form1.hide();
$form2.hide();
$form3.hide();
}
else
{
$('#error1 ').html("UserName is taken").effect("shake");
$('#error1 ').hide()
}
});
});
$form2.submit(function(e){
e.preventDefault();
socket.emit('new user2', $username.val(), function(data){
if(data){
// alert("Clicked")
$('.button1').hide();
$('.button2').hide();
$('.button3').hide();
$('#mainWrapper').show();
$form1.hide();
$form2.hide();
$form3.hide();
}
else
{
$('#error1').html("UserName is taken").effect("shake");
$('#error1').hide()
}
});
});
$form3.submit(function(e){
e.preventDefault();
$('.button1').hide();
$('.button2').hide();
$('.button3').hide();
$('#mainWrapper').show();
$form1.hide();
$form2.hide();
$form3.hide();
socket.emit('ch3');
});
socket.on('comeon', function(data){
alert("reached here")
var html = '';
for(i = 0; i < data.length; i++){
html += data[i] + '<br>';
}
console.log("Reached in usernames1")
console.log(data)
$users.html(html);
});
socket.on('comeon2', function(data){
alert("reached here")
var html = '';
for(i = 0; i < data.length; i++){
html += data[i] + '<br>';
}
console.log("Reached in usernames1")
$users.html(html);
});
})
</script> <div id="mainWrapper">
<h2>ChatIO</h2>
<body>
<div id="chatWrapper">
<div id="chatWindow"></div>
<form id="messageForm">
<input id="inp" type="text" size="35" id="message" placeholder="Say Something...">
<input id="inp" type="submit" value="Submit">
</form>
<button type="submit">Leave Room</button>
</div>
<div id="userWrapper"><strong>List of Active users</strong>
<div id="users"></div>
</div>
</div>
<div id="namesWrapper">
<div id="error1"></div>
<form id="form1">
Enter a username<input type="text" size="35" id="username1">
<input type="submit" class="button1" value="Chat Room 1">
</form></div><br>
<div id="namesWrapper">
<div id="error2"></div>
<form id="form2">
Enter a username<input type="text" size="35" id="username2">
<input type="submit" class="button2" value="Chat Room 2">
</form></div><br>
<div id="namesWrapper">
<div id="error3"></div>
<form id="form3">
Enter a username<input type="text" size="35" id="username3">
<input type="submit" class="button3" value="Chat Room 3">
</form></div>
</body>
</html>
解决方案
推荐阅读
- yaml - 如何在 YAML 中的另一个多行字符串中引用一个多行字符串？
- javascript - 在通过 flex 重新排序时从视觉上选择第一个元素
- python-3.x - 删除最小 numpy 数组的 p%
- node.js - 错误：无法在视图目录中查找视图“students/addEdit.hbs”
- c# - 如何在 UWP 或 WPF 应用程序中显示自定义警报？
- redis - Redis 集群上的 Redis 命令批处理
- state - 从观察到的对象初始化状态变量
- android - Firebase 令牌在讲义上无效，但依赖项（QuickBlox）具有正确的令牌
- java - 我添加了 java 类来调试（ STRDBG ），但源代码不可用
- reactjs - 更新动态加载的字段