JS在线聊天功能开发求助：实现用户名绑定及消息署名功能

嘿，我来帮你搞定这个用户名功能！看起来你已经有了一个基础的WebSocket聊天服务，现在只需要给它加上用户名的存储和显示逻辑就行，分客户端和服务端两部分来改：

1. 前端（客户端）修改 #

首先得给用户提供设置用户名的入口，还要把用户名存起来避免刷新丢失，最后发送消息时带上用户名，接收消息时区分自己和他人的消息样式。

第一步：添加HTML结构 #

在聊天界面顶部加个用户名设置区域：

<!-- 用户名设置区 -->
<div class="username-box">
  <input type="text" id="usernameInput" placeholder="请输入你的用户名">
  <button onclick="saveUsername()">确认设置</button>
</div>

<!-- 原有聊天区域 -->
<div id="chatMessages"></div>
<input type="text" id="msgInput" placeholder="输入消息...">
<button onclick="sendMsg()">发送</button>

第二步：编写前端JS逻辑 #

修改原有的聊天交互代码，加上用户名相关逻辑：

// 加载本地保存的用户名，默认显示"匿名用户"
let currentUser = localStorage.getItem('chatUsername') || '匿名用户';
document.getElementById('usernameInput').value = currentUser;

// 保存用户名到本地存储
function saveUsername() {
  const inputVal = document.getElementById('usernameInput').value.trim();
  if (inputVal) {
    currentUser = inputVal;
    localStorage.setItem('chatUsername', inputVal);
    alert(`用户名已设置为：${inputVal}`);
  } else {
    alert('请输入有效的用户名哦！');
  }
}

// 修改发送消息函数，带上用户名
function sendMsg() {
  const msgInput = document.getElementById('msgInput');
  const content = msgInput.value.trim();
  if (content && currentUser) {
    // 把用户名和消息打包成JSON发送
    ws.send(JSON.stringify({
      username: currentUser,
      content: content
    }));
    msgInput.value = '';
  }
}

// 修改接收消息逻辑，显示用户名并区分自己的消息
ws.onmessage = function(event) {
  const msgData = JSON.parse(event.data);
  const msgContainer = document.getElementById('chatMessages');
  const msgElement = document.createElement('div');

  // 判断是否是自己发送的消息，加不同样式类
  const isSelfMsg = msgData.username === currentUser;
  msgElement.className = isSelfMsg ? 'msg self-msg' : 'msg other-msg';

  // 渲染用户名和消息内容
  msgElement.innerHTML = `<strong>${msgData.username}</strong>: ${msgData.content}`;
  msgContainer.appendChild(msgElement);
  // 自动滚动到最新消息
  msgContainer.scrollTop = msgContainer.scrollHeight;
};

第三步：添加样式（可选） #

给不同消息加样式，让聊天界面更友好：

.username-box {
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.msg {
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  max-width: 70%;
}
.self-msg {
  background-color: #dcf8c6;
  margin-left: auto;
}
.other-msg {
  background-color: #fff;
  margin-right: auto;
}

2. 服务端（chat.js）修改 #

服务端需要处理带用户名的JSON消息，转发给所有客户端，同时兼容可能存在的旧格式消息：

var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({port:3030});
var msgArray = new Array();

wss.on("connection", function(client) {
  // 连接时发送历史消息（如果有的话）
  if (msgArray.length > 0) {
    client.send(JSON.stringify(msgArray));
  }

  client.on("message", function(message) {
    try {
      const msgData = JSON.parse(message);
      // 验证消息格式是否合法
      if (msgData.username && msgData.content) {
        // 保存到历史消息数组
        msgArray.push(msgData);
        // 转发给所有在线客户端
        wss.clients.forEach(function each(client) {
          if (client.readyState === client.OPEN) {
            client.send(JSON.stringify(msgData));
          }
        });
      }
    } catch (err) {
      // 兼容旧的纯文本消息格式（如果之前是这么实现的）
      const legacyMsg = {
        username: '匿名用户',
        content: message.toString()
      };
      msgArray.push(legacyMsg);
      wss.clients.forEach(function each(client) {
        if (client.readyState === client.OPEN) {
          client.send(JSON.stringify(legacyMsg));
        }
      });
    }
  });

  // 原有用户计数逻辑（这里保留你已实现的部分，比如更新并广播在线人数）
  let onlineCount = wss.clients.size;
  broadcastUserCount(onlineCount);

  client.on("close", function() {
    onlineCount = wss.clients.size;
    broadcastUserCount(onlineCount);
  });
});

// 封装广播在线人数的函数（复用代码）
function broadcastUserCount(count) {
  wss.clients.forEach(function each(client) {
    if (client.readyState === client.OPEN) {
      client.send(JSON.stringify({type: 'userCount', count: count}));
    }
  });
}

关键说明 #

• 用localStorage存储用户名，确保页面刷新后不会丢失设置
• 消息用JSON格式传递，同时兼容旧的纯文本消息，避免历史功能失效
• 通过样式区分自己和他人的消息，提升聊天体验
• 服务端新增格式验证，保证消息数据的合法性

这样改完，用户就能设置自己的用户名，并且在发送的消息旁显示名字啦，同时也不会影响你原有的消息收发和在线计数功能~

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