Aligning messages in NodeJS chat app

Question

I have created a chat room using NodeJS and socket.io. It allows multiple users to connect to a chatroom with different usernames.

It works fine, but I want my messages in a different color than other user's messages. I used the even odd logic in CSS but that wouldn't work obviously if I send 2 messages simultaneously.

Here is my 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>

and this is my App.js file:

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

Thank you for your time.

Answer 1

Here's an idea: add some color classes to your css:

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

Now let the server assign the color class based on the user name:

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

Finally, add the class name in your browser JavaScript code:

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

The end result is that you can assign colors based on user name or any other criteria that pleases you.

Answer 2

This solution worked for me. I was looking to right align the sender messages and left aligned the receiver messages. Building on top of what others contributed I came up with this. It's fully dynamic.

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

Answer 3

Thank you for your answers Hughes and Lee, I used your suggestions and solved the problem.

I stored the use name entered by the user in a variable and checked it with data.username.

I'm attaching the new index.html and app.js file:

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

When you add a message to the chat log, check if data.username is equal to the current user. If it is, add a class to the DOM element you're creating. Use CSS to assign a special style to that class.