NodeJS 如何过滤< li>具有相同值的元素?

rekjcdws  于 2023-08-04  发布在  Node.js
关注(0)|答案(1)|浏览(130)

我有一个聊天应用程序,在这个应用程序中加入房间的用户列在左边。但当用户登录到另一个浏览器并进入房间时,它会重复自己。我该怎么解决?示例屏幕截图:下面是代码的一部分:

socket.on('room_users', (msg) => {
    document.getElementById("txtRoomUserCount").innerHTML = msg.length;
    TXT_ROOM_USERS.innerHTML = ""
    msg.forEach(element => {
        var item = document.createElement('li');
        item.textContent = element.username;
        item.className = "list-group-item";
        if (element.id == socket.id) {
            item.textContent += " (Siz)";
        }
        TXT_ROOM_USERS.appendChild(item);
    });
});

字符串

0vvn1miw

0vvn1miw1#

您面临的问题是,当用户登录到另一个浏览器并进入聊天室时,聊天应用程序左侧的用户列表会重复出现。这可能是因为您将新用户列表附加到现有用户列表而没有清除它。
您面临的重复用户问题可能是由于socket.on('room_users ')事件在同一用户从不同浏览器登录时被多次触发。要处理这种情况,您可以维护一个单独的数据结构来跟踪唯一用户并相应地更新用户列表。

// Create an empty object to store unique user information
const usersMap = {};

socket.on('room_users', (msg) => {
  document.getElementById("txtRoomUserCount").innerHTML = msg.length;
  TXT_ROOM_USERS.innerHTML = ""; // Clear the existing list of users

  msg.forEach(element => {
    // Check if the user is already in the usersMap to avoid duplication
    if (!usersMap[element.id]) {
      usersMap[element.id] = element;
    }
  });

  // Convert the object values back to an array of unique users
  const uniqueUsers = Object.values(usersMap);

  uniqueUsers.forEach(element => {
    var item = document.createElement('li');
    item.textContent = element.username;
    item.className = "list-group-item";
    if (element.id == socket.id) {
      item.textContent += " (Siz)";
    }
    TXT_ROOM_USERS.appendChild(item);
  });
});

字符串
通过此修改,usersMap对象用于跟踪使用ID作为键的唯一用户。当socket.on('room_users ')事件被触发时,它会检查用户是否已经存在于usersMap中。如果没有,则将用户添加到Map。
在确保usersMap中用户的唯一性之后,我们将对象值转换回一个数组(uniqueUsers),然后在聊天应用程序中创建用户列表,不进行任何重复。这将解决从不同浏览器登录时重复用户的问题。

相关问题