如何将基于Socket.IO的多人实时聊天应用改造为一对一双向聊天

嘿，我明白你的需求啦！你现在用HTML/CSS/JS加Socket.IO做了个实时聊天，但目前是所有人都能收到消息，想改成只能和特定一个用户一对一聊天对吧？别担心，咱们一步步来调整：

• 第一步：给每个用户分配唯一标识
  当用户连接到Socket.IO服务器时，服务器可以直接用Socket.IO自带的socket.id作为用户的唯一标识（这个ID是自动生成的，不会重复），也可以让用户自定义用户名。服务器要把这个标识返回给前端，让前端存起来，方便后续配对和发消息。
  服务器端示例代码：

  io.on('connection', (socket) => {
    // 把当前用户的ID发给前端
    socket.emit('user-id', socket.id);
    console.log(`用户 ${socket.id} 上线啦`);
  });
  

• 第二步：维护在线用户列表
  你需要在服务器端记录当前在线的用户，这样才能知道对方是否在线，也方便前端选择聊天对象。可以用Map来存储在线用户的ID和对应的socket实例：

  const onlineUsers = new Map();
  
  io.on('connection', (socket) => {
    onlineUsers.set(socket.id, socket);
    socket.emit('user-id', socket.id);
    // 把在线用户列表同步给前端（可选，方便用户选择）
    socket.emit('online-users', Array.from(onlineUsers.keys()));
  
    // 用户断开连接时移除
    socket.on('disconnect', () => {
      onlineUsers.delete(socket.id);
      io.emit('online-users', Array.from(onlineUsers.keys()));
    });
  });
  

• 第三步：实现定向消息发送
  之前你可能用的是io.emit()给所有用户发消息，现在要改成只给目标用户发。前端发送消息时，要带上目标用户的ID，服务器收到后找到对应的socket，用目标socket的emit方法发送：
  前端发送消息的示例：

  // 假设前端已经保存了自己的userId，并且用户选择了targetId
  const sendBtn = document.getElementById('send-btn');
  const messageInput = document.getElementById('message-input');
  
  sendBtn.addEventListener('click', () => {
    const content = messageInput.value.trim();
    if (content && targetId) {
      socket.emit('private-chat', {
        from: userId,
        to: targetId,
        content: content
      });
      // 自己的聊天框里先显示消息
      addMessage(`我: ${content}`);
      messageInput.value = '';
    }
  });
  
  // 接收来自对方的消息
  socket.on('private-chat', (data) => {
    addMessage(`${data.from}: ${data.content}`);
  });
  

  服务器端处理私有消息：

  socket.on('private-chat', (data) => {
    const targetSocket = onlineUsers.get(data.to);
    if (targetSocket) {
      // 给目标用户发消息
      targetSocket.emit('private-chat', {
        from: data.from,
        content: data.content
      });
    } else {
      // 对方不在线，给发送者提示
      socket.emit('chat-error', '抱歉，对方不在线哦');
    }
  });
  

• 第四步：调整前端UI
  你可以在前端加一个区域，比如下拉菜单显示在线用户列表，或者输入框让用户输入对方的ID，用户选择后就把这个ID设为targetId，之后所有消息都发给这个用户。同时聊天框只显示和这个用户的对话记录就好啦。

内容来源于stack exchange