如何在Node.js+Socket.IO聊天框中实现发件消息居右、收件消息居左

我来帮你搞定这个Socket.IO聊天框的消息分栏问题！核心思路就是通过给发送/接收的消息元素添加不同的CSS类，再用样式控制它们的对齐位置，具体实现步骤如下：

一、完善HTML结构 #

你现有的聊天容器可以保留，咱们补充上消息输入的表单区域（如果还没加的话）：

<div class="panel-body">
  <ul class="chat" id="chat"></ul>
</div>
<!-- 消息输入表单 -->
<form id="messageForm">
  <input type="text" id="messageInput" placeholder="输入消息...">
  <button type="submit">发送</button>
</form>

二、编写CSS实现左右对齐 #

这一步是关键，通过CSS类区分消息类型，用Flexbox布局实现左右排列，同时做些基础美化：

/* 重置聊天列表的默认样式 */
.chat {
  list-style: none;
  padding: 15px;
  margin: 0;
  /* 用flex垂直布局，方便控制消息对齐 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 通用消息样式 */
.chat li {
  padding: 10px 14px;
  border-radius: 18px;
  max-width: 75%;
  word-wrap: break-word;
  line-height: 1.4;
}

/* 接收的消息：左对齐、浅灰色背景 */
.chat li.received {
  background-color: #e5e5ea;
  align-self: flex-start;
}

/* 发送的消息：右对齐、蓝色背景、白色文字 */
.chat li.sent {
  background-color: #0084ff;
  color: #fff;
  align-self: flex-end;
}

三、客户端Socket.IO逻辑处理 #

修改你的JS代码，在发送和接收消息时，给对应的消息元素加上sent或received类：

// 初始化Socket.IO连接
const socket = io();

// 获取DOM元素
const $messageForm = document.getElementById('messageForm');
const $messageInput = document.getElementById('messageInput');
const $chatList = document.getElementById('chat');

// 发送消息的处理逻辑
$messageForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const messageContent = $messageInput.value.trim();
  
  // 空消息不发送
  if (!messageContent) return;

  // 发送消息到服务器
  socket.emit('chat message', messageContent);

  // 把自己发送的消息添加到聊天框（右对齐）
  appendMessage(messageContent, 'sent');

  // 清空输入框并聚焦
  $messageInput.value = '';
  $messageInput.focus();
});

// 接收服务器转发的消息
socket.on('chat message', function(message) {
  // 接收的消息左对齐显示
  appendMessage(message, 'received');
});

// 通用的消息添加函数
function appendMessage(text, messageType) {
  const messageItem = document.createElement('li');
  messageItem.textContent = text;
  messageItem.classList.add(messageType);
  $chatList.appendChild(messageItem);
  
  // 自动滚动到最新消息位置
  $chatList.scrollTop = $chatList.scrollHeight;
}

这样处理后，就能实现你要的效果：接收的消息靠左显示，自己发送的消息靠右显示，完全符合「接收消息、接收消息、发送消息、接收消息」的排版需求。

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