如何使用Socket将新接收消息添加至对应联系人的独立消息列表？

问题根源 #

你的代码始终固定获取id="messagess"的元素作为消息容器，没有根据消息的发送者/接收者匹配对应的联系人聊天列表，导致所有新消息都只会追加到当前打开的聊天框内。

修复步骤 #

• 给每个联系人的聊天容器设置唯一标识：创建联系人聊天列表时，用联系人ID作为容器的ID（比如message-list-${contactId}），确保每个联系人的聊天框有独一无二的标识。
• 接收消息时匹配对应容器：从Socket传回的data中提取发送方/会话目标ID，用这个ID查找对应的聊天容器——容器存在就直接追加消息；若不存在（用户没打开过该联系人聊天框），可先创建容器或给联系人标记未读。

修改后的代码示例 #

io.on("new_message", function(data) {
    // 从data中获取发送方ID，假设data包含senderId字段
    const targetContactId = data.senderId;
    // 构建对应联系人的消息容器ID
    const messageListId = `message-list-${targetContactId}`;
    let messagelist = document.getElementById(messageListId);

    // 若容器不存在，创建容器并添加未读标记
    if (!messagelist) {
        messagelist = document.createElement("div");
        messagelist.id = messageListId;
        // 给未打开的聊天容器添加隐藏类
        messagelist.classList.add("chat-container", "hidden");
        document.body.appendChild(messagelist);
        
        // 给对应联系人项添加未读标记
        const contactItem = document.getElementById(`contact-${targetContactId}`);
        if (contactItem) {
            const unreadBadge = document.createElement("span");
            unreadBadge.className = "unread-badge";
            unreadBadge.innerText = "1";
            contactItem.appendChild(unreadBadge);
        }
    }

    // 创建消息元素
    let messagebox = document.createElement("div");
    let message = document.createElement("p");
    let id = document.createElement("p");
    id.innerText = targetContactId;
    message.innerText = data.msg;
    messagebox.appendChild(id);
    messagebox.appendChild(message);
    
    // 将消息追加到对应容器
    messagelist.appendChild(messagebox);
})

额外优化点 #

• 用户打开联系人聊天框时，移除该联系人的未读标记并显示对应聊天容器
• 将聊天容器的创建逻辑封装成独立函数，减少重复代码
• 确保Socket传输的data包含足够的会话标识信息（如会话ID、发送方/接收方ID）

内容的提问来源于stack exchange，提问作者Manish Bhardwaj