如何实现聊天框中不同用户消息分左右两侧显示

问题描述 #

所有消息都显示在同一侧（通常是左侧），想要实现不同用户的消息分别显示在左右两侧（交替排列）。尝试用float属性调整位置，但消息框变成了并排显示。以下是原始代码：

原始JavaScript代码 #

const chatMessages = document.getElementById("chat-messages");
const chatInput = document.getElementById("chat-input");
const sendButton = document.getElementById("send-button");
const nameInput = document.getElementById("name-input");
const deleteButton = document.getElementById("delete-button");

let lastUser = null;

// 生成随机用户名
function generateUserName() {
    const adjectives = ["Homer", "Marge", "Bart", "Lisa", "Maggie"];
    const nouns = ["Simpson"];
    const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
    const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
    const userName = nameInput.value.trim();
    if (userName === "") {
        return { name: `${randomAdjective} ${randomNoun}`, color: getRandomColor() };
    } else {
        return { name: userName, color: getRandomColor() };
    }
}

// 生成随机颜色
function getRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function addMessage(message, color, position) {
    const p = document.createElement("p");
    p.textContent = message;

    const messageContainer = document.createElement("div");
    messageContainer.classList.add("message-container");
    messageContainer.style.backgroundColor = color;
    messageContainer.style.block = position;
    messageContainer.style.alignItems = position;

    messageContainer.appendChild(p);
    chatMessages.appendChild(messageContainer);
}

// 发送消息函数
function sendMessage() {
    const message = chatInput.value.trim();
    if (message !== "") {
        const user = generateUserName();
        let position = "right"
        if (lastUser !== null && lastUser !== user.name) {
            position = "left";
        }
        addMessage(`${user.name}: ${message}`, user.color, position);
        lastUser = user;
        chatInput.value = "";
    }
}

// 删除对话函数
function deleteConversation() {
    chatMessages.innerHTML = "";
    lastUser = null;
}

// 事件监听
sendButton.addEventListener("click", sendMessage);
chatInput.addEventListener("keyup", function (event) {
    if (event.key === "Enter" && chatInput.value.trim() !== "") {
        sendMessage();
    }
});
deleteButton.addEventListener("click", deleteConversation);

原始CSS代码 #

#chat-container {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #ccc;
    background-color: violet;
}

#chat-header {
    background-color: yellow;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

#chat-messages {
    height: 400px;
    overflow-y: scroll;
    margin-bottom: 15px;
    background-color: blue;
}

.message-container {
    background-color: rgb(22, 12, 12);
    max-width: 35%;
    margin-bottom: 5px;
    padding: 2px;
    border-radius: 5px;
    color: #fff;
    word-wrap: break-word;
    float: inline-start;
}

#chat-input-container {
    background-color: brown;
    display: flex;
    margin-bottom: 10px;
}

#chat-input {
    background-color: aqua;
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

修复步骤 #

1. 修正用户身份判断逻辑 #

原代码每次发送消息都会生成新用户，导致lastUser永远和当前用户不一致，所有消息都显示在左侧。修改后仅在用户输入变化或首次发送时生成新用户：

function sendMessage() {
    const message = chatInput.value.trim();
    if (message !== "") {
        let user;
        const inputName = nameInput.value.trim();
        // 仅在无历史用户或输入名称变化时生成新用户
        if (!lastUser || (inputName && lastUser.name !== inputName)) {
            user = generateUserName();
        } else {
            // 沿用历史用户信息
            user = lastUser;
        }
        // 不同用户切换位置，同一用户保持同侧
        let position = lastUser === null ? "right" : (lastUser.name !== user.name ? "left" : "right");
        
        addMessage(`${user.name}: ${message}`, user.color, position);
        lastUser = user;
        chatInput.value = "";
    }
}

2. 修复消息容器布局 #

移除无效的style设置，通过动态添加类名实现左右浮动，并添加clearfix解决换行问题：

function addMessage(message, color, position) {
    const p = document.createElement("p");
    p.textContent = message;

    const messageContainer = document.createElement("div");
    messageContainer.classList.add("message-container");
    // 根据位置添加对应类
    messageContainer.classList.add(position === "left" ? "message-left" : "message-right");
    messageContainer.style.backgroundColor = color;

    messageContainer.appendChild(p);
    chatMessages.appendChild(messageContainer);
    
    // 添加clearfix元素，确保每条消息独占一行
    const clearDiv = document.createElement("div");
    clearDiv.style.clear = "both";
    chatMessages.appendChild(clearDiv);
}

3. 更新CSS样式 #

调整浮动规则和消息样式，优化视觉效果：

#chat-messages {
    height: 400px;
    overflow-y: scroll;
    margin-bottom: 15px;
    background-color: blue;
    padding: 10px; /* 添加内边距避免消息贴边 */
}

.message-container {
    max-width: 35%;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 5px;
    color: #fff;
    word-wrap: break-word;
}

/* 左侧消息样式 */
.message-left {
    float: left;
    border-bottom-left-radius: 0; /* 调整圆角符合聊天习惯 */
}

/* 右侧消息样式 */
.message-right {
    float: right;
    border-bottom-right-radius: 0; /* 调整圆角符合聊天习惯 */
}

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