socket.io - 存储在数据库中的消息被渲染了两次

socket.io - Messages stored in db are being rendered twice

我正在构建一个聊天室应用程序,我在其中将所有消息存储在数据库中。当用户再次加入同一个房间时,应用程序会呈现来自数据库的所有先前消息。但我不知道为什么所有这些消息都被打印了两次。

当用户尝试加入一个房间时,它会检查该房间是否存在于数据库中,如果不存在,它会创建一个。如果是,它会将所有以前的消息发送回房间

     //Join -room

      socket.on('join-room', async (room) => {
          socket.join(room);

          let roomInDB = await Room.findOne({ name: room });
          if (roomInDB === null) {
              io.emit('err', { message: "Creating New Room!" })
              let newRoom = new Room({ name: room })
              await newRoom.save();
          } else {
              Room.findOne({ name: room }).populate('chats').exec((err, chats) => {
                  io.to(room).emit('room_data', chats);
              })
          }
     })

我正在使用 displayMessage 函数在房间中呈现消息。

function displayMessage(messageData, senderClass) {
    // message, sender, time

    const msg_box = document.getElementById("messages");
    const { sender, time, message } = messageData;
    let card = document.createElement("div");
    card.classList.add(senderClass, 'msg_card');

    if (senderClass === 'sent') {
        card.innerHTML = `
        <div class="msg_text">
         ${message}
        </div>
        <div class="time">${time}</div>
        `
    } else {
        card.innerHTML = `
        <div class="msg_text">
        <span class="sent_by">${sender.username}</span> - ${message}
        </div>
        <div class="time">${time}</div>
        `
    }

    msg_box.appendChild(card);
}

因此,当用户加入房间时,socket io 会发回之前的消息,并使用 displayMessage 函数在房间中呈现这些消息,但由于某种原因它会发生两次。

我在呈现这些消息时尝试了控制台登录,但它记录了正确数量的消息,而不是两次。

我强烈建议您在不考虑客户端的情况下测试对服务器的调用,从而找出错误出在哪一边。您可以使用 Postman, which now has SocketIO support 来完成此操作。如果您将用户加入房间的事件发送到服务器一次并收到重复的消息,那么问题出在服务器端。否则,您可能在客户端调用了两次渲染。