在 NodeJS 聊天应用程序中对齐消息

Question

我使用 NodeJS 和 socket.io 创建了一个聊天室。它允许多个用户使用不同的用户名连接到一个聊天室。

它工作正常，但我希望我的消息与其他用户的消息颜色不同。我在 CSS 中使用了偶数逻辑，但如果我同时发送 2 条消息，那显然不会起作用。

这是我的Index.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);
    });
});

感谢您的宝贵时间。

Answer 1

这是一个想法：为您的 css:

添加一些颜色 classes

.blueText {
    color: #00F;
}
.greenText {
    color: #0F0;
}

现在让服务器根据用户名分配颜色class:

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

最后，在浏览器中添加class名称JavaScript代码：

        socket.on('new message',function(data){
            $chat.append('<li class="' + data.colorClass + '"><b>' +
                data.username + ': </b>' + data.message + "<br/></li>");
        });

最终结果是您可以根据用户名或您喜欢的任何其他标准分配颜色。

Answer 2

添加消息到聊天记录时，检查data.username是否等于当前用户。如果是，请将 class 添加到您正在创建的 DOM 元素。使用 CSS 为 class 分配特殊样式。

Answer 3

感谢 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);
    });
});

Answer 4

这个解决方案对我有用。我希望右对齐发件人消息并左对齐接收消息。在其他人贡献的基础上，我想出了这个。它是完全动态的。

// 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;
}

在 NodeJS 聊天应用程序中对齐消息

Aligning messages in NodeJS chat app

html

javascript

css

jquery

chat