在NodeJS聊天应用程序中调整消息
Aligning messages in NodeJS chat app
我使用NodeJS和socket.io创建了一个聊天室。它允许多个用户使用不同的用户名连接到一个聊天室内。
它运行良好，但我希望我的消息与其他用户的消息颜色不同。我在CSS中使用了奇偶逻辑，但如果我同时发送两条消息，这显然不会起作用。
这是我的索引.html：
<div id="wrapper">
<div id="usernameWrap">
<p id="usernameError"></p>
<form id="setUsername">
<input class="message" id="username" placeholder="Enter your Username"/>
<input class="button" type="submit" value="SUBMIT"/>
</form>
</div>
<div id="chatWrapper">
<ul id="chat"></ul>
<form id="send-message">
<input class="message" type="text" id="message" placeholder="Type a message" autocomplete="off" />
<input class="button" type="submit" value="SEND"/>
</form>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<Script>
jQuery(function($){
var socket =io.connect();
var $usernameForm = $('#setUsername');
var $usernameError = $('#usernameError');
var $username = $('#username');
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $chat = $('#chat');
/* setting username */
$usernameForm.submit(function(e){
e.preventDefault();
socket.emit('new user',$username.val(),function(data){
if(data){
$('#usernameWrap').hide();
$('#chatWrapper').show();
} else{
$usernameError.html('Username is already Taken!');
}
});
$username.val('');
});
/* sending and receiving messages */
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message',$messageBox.val());
$messageBox.val('');
});
socket.on('new message',function(data){
$chat.append('<li><b>' + data.username + ': </b>' + data.message + "<br/></li>");
});
});
</Script>
这是我的App.js文件：
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
usernames=[];
app.use('/css', express.static(__dirname + '/css'));
server.listen(8081);
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html')
});
io.sockets.on('connection',function(socket){
socket.on('new user',function(data,callback){
if(usernames.indexOf(data) != -1){
callback(false);
} else{
callback(true);
socket.username = data;
usernames.push(socket.username);
io.sockets.emit('usernames',usernames);
}
});
socket.on('send message',function(data){
io.sockets.emit('new message',{message:data,username:socket.username});
});
socket.on('disconnect',function(data){
if(!socket.username) return;
usernames.splice(usernames.indexOf(socket.username),1);
});
});
谢谢你抽出时间。
这里有一个想法：在css中添加一些颜色类：
.blueText {
color: #00F;
}
.greenText {
color: #0F0;
}
现在让服务器根据用户名分配颜色类：
socket.on('send message',function(data){
var userColorClass = "greenText";
if( socket.username === "root" ) {
userColorClass = "blueText";
}
io.sockets.emit('new message',{
message:data,
colorClass: userColorClass,
username:socket.username
});
});
最后，在浏览器JavaScript代码中添加类名：
socket.on('new message',function(data){
$chat.append('<li class="' + data.colorClass + '"><b>' +
data.username + ': </b>' + data.message + "<br/></li>");
});
最终的结果是，您可以根据用户名或任何其他您喜欢的条件来指定颜色。
在聊天日志中添加消息时，请检查data.username是否等于当前用户。如果是，请将一个类添加到您正在创建的DOM元素中。使用CSS为该类指定一个特殊样式。
谢谢你的回答Hughes和Lee，我采纳了你的建议并解决了问题。
我将用户输入的用户名存储在一个变量中，并使用data.username.进行检查
我附上了新的index.html和app.js文件：
Index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<!-- styles -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- scripts -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="usernameWrap">
<p id="usernameError"></p>
<form id="setUsername">
<input class="message" id="username" placeholder="Enter your Username"/>
<input class="button" type="submit" value="SUBMIT"/>
</form>
</div>
<div id="chatWrapper">
<ul id="chat"></ul>
<form id="send-message">
<input class="message" type="text" id="message" placeholder="Type a message" autocomplete="off" />
<input class="button" type="submit" value="SEND"/>
</form>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<Script>
jQuery(function($){
var socket =io.connect();
var $usernameForm = $('#setUsername');
var $usernameError = $('#usernameError');
var $username = $('#username');
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $chat = $('#chat');
var $currentUser;
/* setting username */
$usernameForm.submit(function(e){
e.preventDefault();
socket.emit('new user',$username.val(),function(data){
if(data){
$('#usernameWrap').hide();
$('#chatWrapper').show();
} else{
$usernameError.html('Username is already Taken!');
}
});
$currentUser = $username.val();
$username.val('');
});
/* sending and receiving messages */
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message',$messageBox.val());
$messageBox.val('');
});
socket.on('new message',function(data){
if(data.username === $currentUser){
data.colorClass = "blueText";
} else{
data.colorClass = "greenText";
}
$chat.append('<li class="' + data.colorClass + '"><b>' + data.username + ': </b>' + data.message + "<br/></li>");
});
});
</Script>
</body>
</html>
App.js:
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
usernames=[];
app.use('/css', express.static(__dirname + '/css'));
server.listen(8081);
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html')
});
io.sockets.on('connection',function(socket){
socket.on('new user',function(data,callback){
if(usernames.indexOf(data) != -1){
callback(false);
} else{
callback(true);
socket.username = data;
usernames.push(socket.username);
io.sockets.emit('usernames',usernames);
}
});
socket.on('send message',function(data){
io.sockets.emit('new message',{message:data,username:socket.username});
});
socket.on('disconnect',function(data){
if(!socket.username) return;
usernames.splice(usernames.indexOf(socket.username),1);
});
});
这个解决方案对我很有效。我希望右对齐发送方消息，左对齐接收方消息。在其他人贡献的基础上，我提出了这个想法。它充满活力。
// initializing socket.io on the client
let socket = io();
// I will be storing a socket.id client side in this variable
// each client connected should have a unique socket.id
let clientSocketId;
// send the clientSocketId when you emit the event from the browser to the server.
$messageForm.submit(function(e){
e.preventDefault();
// storing the unique socket id
clientSocketId = socket.id;
// emit your data as usual
socket.emit('send message', {
message: $messageBox.val(),
username: $username.val(),
clientId: clientSocketId
});
$messageBox.val('');
});
// On the server now. I am using version 2.0.4
io.on('connection', function(socket){
console.log('a user is connected');
socket.on('send message', function(data) {
io.emit('new message', {
message: data.message,
username: data.username,
clientId: data.clientId
})
})
})
// back in the browser
socket.on('new message', function(data){
// check if the clientSocketId return from the server data.clientId is the same that was sent by browser/client clientSocketId
if(clientSocketId === data.clientId) {
$chat.append('<li class='blueText'><b>' + data.username + ': </b>' + data.message + "<br/></li>");
} else {
$chat.append('<li class='greenClass'><b>' + data.username + ': </b>' + data.message + "<br/></li>");
}
}).blueText {
color: #00F;
}
.greenText {
color: #0F0;
}相关文章：
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时，可拖动的对象会出现在容器外部
- ExtJS——在展开/折叠时调整面板高度
- Ajax聊天消息重复而不仅仅是更新
- 如果localstorage为空，则显示欢迎消息
- 绑定时将Parsley minlength消息作为选项传递时，未对其进行自定义
- 离开页面时弹出消息
- Chrome应用程序调整窗口大小保持纵横比
- 有没有一种方法可以在控制台关闭的情况下让console.log(）在IE中记录消息
- 消息显示之外的淘汰验证
- 选项卡侦听器未被来自后台脚本的消息激活
- 如何自动调整标签的高度以适应内容
- 导航栏没有调整到浏览器屏幕的大小
- 调整屏幕大小后不显示子菜单
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- jQuery在输入下验证post错误消息
- Scipt未在选定选项卡中执行以发送和接收消息
- 合并两个数组，重新调整循环js
- 三.js图像纹理调整大小消息
- 在NodeJS聊天应用程序中调整消息
