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}

如何使用socket.io

1 个答案: