如何使用socket.io在节点js的右侧显示发送消息并在左侧显示接收消息

Question

我正在使用socket.io 制作一个聊天框。但是当我尝试在他们各自的一侧显示消息时，就会出现问题。

我想在右侧显示发送消息，在左侧显示接收消息。

我想要-

received message
received message
                  send message
received message

HTML 文件代码是 -

   <div class="panel-body">
           <ul class="chat" id="chat"></ul>
   </div>

我的客户端代码是-

       $messageForm.click(function (e) {
            e.preventDefault();
            socket.emit('send message', $message.val());
            $message.val('');
        });

        socket.on('new message', function (data) {
                $("#chat").append('<div style="text-align: right"><strong>' + data.user + '</strong> : ' + data.msg + '</div>').scrollTop(1E10);
        });

我的服务器端代码是 -

 //send message
    socket.on('send message', function (data) {
        io.sockets.in(socket.room).emit('new message', {msg: data, user: socket.username});
    });

我尝试了很多方法，但我不知道该怎么做。

请大家给点建议。

提前感谢。

Answer 1

嗯， 您需要做的就是跟踪谁是“这个”用户（您）以及谁是其他用户。 所以，保存你用来识别用户的“id”、“name”（名字是个坏主意）。 然后，在渲染消息时，为这些元素添加不同的 html 类。

例子：

<div class="message other-user"> {message.text} </div>
<div class="message this-user"> {message.text} </div>

然后，只需在 css 中创建类

例子：

.message.other-user { text-align: left }
.message.this-user {text-align: right}