当我从mongodb检索聊天时，如何在套接字实时通信时以完全相同的方式对齐聊天

Question

当套接字实时通信时，如何以相同的方式对齐聊天。 例如：当套接字发送消息时，它在右边对齐，而在其他套接字上，它在左边对齐。但是在这种情况下，考虑到我的CSS，所有消息都是正确的。

// server.js文件

chat.find().limit(100).sort({_id:1}).toArray((err,res) => {
            if(err) {
                throw err;
            }
            //Emit message
            console.log('res is ',res.length);          
            console.log('res is ',res);          
            socket.emit('output-right', res);           
        }); 


//index.html file
socket.on('output-right', function(data) {
          console.log('right data is ',data);

          if(data.length) {
              data.forEach(element => {
              var message = document.createElement('div');
              message.setAttribute('class', 'chat-message-right');
              message.textContent = element.name+": "+element.message;
              messages.appendChild(message);       
                   });
               } 
            });


//css
 .chat-message-right {
            text-align: right;
        }

Output I get:[enter image description here][1]

Output I want: [enter image description here][2]


  [1]: https://i.stack.imgur.com/HHc4W.png
  [2]: https://i.stack.imgur.com/5L0U4.png