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

Posted 2023-03-08

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

【英文标题】：how to display send message on right side and recieved message on left side in nodejs using socket.io

【发布时间】：2018-09-27 11:05:24

【问题描述】：

我正在使用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);
    );

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

请大家给点建议。

提前感谢。

【问题讨论】：

你能显示一些代码吗？

@SmitRaval html 代码？

html 和 socket.

@SmitRaval 请检查。

你在哪里附加发送的消息？我找不到那个代码。

【参考方案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

【讨论】：

感谢您的回答，但我不知道如何区分两个用户。

好吧，当你附加消息时（当你收到它时）你有 data.text 和 data.user。现在，您应该为每条消息添加类似 data.userId 的内容（例如）。对于您的用户（“self”），应将其自己的 userId 存储在浏览器中的某处（对于（坏）示例 window.myUserId，或在浏览器的 LocalStorage/SessionStorage 中）。因此，每当您从套接字接收到带有 data.userId === window.myUserId 的消息时，您就把它放在右边，否则放在左边。有意义吗？

是的，我明白，但问题是例如（让 user1 = 1 和 user2 = 2 的 id 和 user2 加入房间到 user1 的 id=1 即 1，所以当我正在尝试向他们的特定 id 发送消息，例如 id=1 ，然后将消息发送给两个用户，因为他们都连接到 id=1。你对此有什么建议吗？

为简单起见，假设只有一个房间。现在，如果我加入只有你的房间，并发送一条消息，它会发送给两个用户。这很好。唯一的区别是您将（通过 userId）看到消息来自我并显示在左侧，如果您发送消息，您将看到（消息的）userId 与您的 userId 相同并将其显示在右侧。这样，我们俩在聊天对话框中都会有 2 条消息