如何在Node.js聊天中通过CSS为特定用户设置文本颜色

要实现自身发送的消息显示白色、他人消息显示黑色的效果，核心是让消息携带发送者的用户名信息，前端通过判断消息所属用户来添加不同的CSS类，再用样式控制颜色。具体步骤如下：

1. 修改前端消息发送逻辑 #

不再将用户名和消息内容拼接成字符串发送，改为发送包含用户名和内容的对象，这样后端转发后前端能准确识别发送者：

form.addEventListener('submit', function(e){
  e.preventDefault();
  if(input.value){
    <?php last_action(); ?>
    // 发送对象而非拼接字符串
    socket.emit('PosljiSporocilo', { 
      username: uporabnik, 
      content: input.value 
    });
    input.value = '';
  }
});

2. 后端转发消息（需同步修改） #

确保后端收到消息对象后，原样转发给所有客户端（假设后端用Node.js + Socket.IO）：

// 后端代码示例
socket.on('PosljiSporocilo', (msg) => {
  io.emit('DobiSporocilo', msg);
});

3. 前端接收消息时添加区分类 #

收到消息后，判断发送者是否为当前用户，给对应的<li>元素添加不同的CSS类：

socket.on('DobiSporocilo', msg => {
  var item = document.createElement('li');
  // 拼接显示文本
  item.textContent = `${msg.username}: ${msg.content}`;
  // 根据发送者添加类
  if (msg.username === uporabnik) {
    item.classList.add('self-message');
  } else {
    item.classList.add('other-message');
  }
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

4. 添加CSS样式控制颜色 #

在页面的<style>标签或外部CSS文件中添加样式：

/* 自身消息白色 */
.self-message {
  color: #ffffff;
  /* 可选：添加右对齐、背景色增强区分 */
  text-align: right;
  background-color: #2c3e50;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
}

/* 他人消息黑色 */
.other-message {
  color: #000000;
  text-align: left;
  background-color: #ecf0f1;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
}

这样就能实现你要的颜色区分效果，同时通过背景色和对齐方式能让聊天界面更直观。

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