【work记录：c++web聊天服务器】解决了聊天窗口的问题|修复了"没有区分好友或者群聊的聊天窗口"的bug|修复了"群聊消息undefined"的bug

mmmm123

日期：2025.4.24

学习内容：

• 解决了聊天窗口的问题
  
• 修复了"没有区分好友或者群聊的聊天窗口"的bug
  
• 修复了"群聊消息undefined"的bug
  

个人总结：

我真的希望是最后的几次里去学习前端的一些知识，其实我更多的是能够感觉到前端的代码我不会写，有一些东西还不太了解，导致目前这些想法我不是太实现的出来，不过个人觉得其实上手确实不算慢的，关于实现修复了"没有区分好友或者群聊的聊天窗口"的bug这个内容，我是一开始想直接无脑AI，结果发现弱智AI解决不了，我只能静下心来去搞，发现其实并不是那么的困难 （当然也有可能是本来这个就不难，是我太傻)。
修复了聊天窗口的bug

其实这个并不麻烦，直接让AI给我跑一个 （还是借助了AI的力量。
/* 聊天区域 */      .chat-pane {        display: flex;        flex-direction: column;        height: 100vh; /* 占据全屏高度 */      }修复了"没有区分好友或者群聊的聊天窗口"的bug

有一些恶心了，首先我们肯定是要跟开一个map一样，存下来客户单和每一个用户的聊天记录
export const chatSessions = new Map();export const chatSessionsGruop = new Map();就像这样，开了两个，第一个是和用户的，第二个是和群聊的。
这里就展开讲一个了，毕竟几乎一模一样。
我们先把问题拆解一下：
我们肯定要实现，当我们发送消息or接收消息的时候，需要把这个消息存起来，那是发送还是接受的时候呢?应该是接收消息的时候，毕竟我们发送消息的时候，程序的设计里，我们相当于是给自己也发送了个消息。
先看一下handler的改动：
//处理接收到的消息  16: (data) => {    const messagesDiv = document.getElementById("chat-messages");    messagesDiv.appendChild(createMessageElement(data));    // 自动滚动到底部    messagesDiv.scrollTop = messagesDiv.scrollHeight;    //把消息放进session里;    if (data.hasOwnProperty("group_id")) {      const id = parseInt(data.group_id);      if (!chatSessionsGruop.has(id)) {        chatSessionsGruop.set(id, []);        console.log("set group good", id);      }      chatSessionsGruop.get(id).push(data);    } else {      //是自己给别人发送的消息，应该是记录在别人to_id的聊天里      const id =        parseInt(data.from_id) === parseInt(storedUser.id)          ? parseInt(data.to_id)          : parseInt(data.from_id);      if (!chatSessions.has(id)) {        chatSessions.set(id, []);        console.log("set user good", id, typeof id);      }      chatSessions.get(id).push(data);    }  },这里我挨个来讲一下，首先，前面三条和之前的一样，为了简略一些，把那些创建消息的内容写进去了一个函数里：
export function createMessageElement(data) {  const messageDiv = document.createElement("div");  messageDiv.className = `message ${    data.hasOwnProperty("from_id")      ? data.from_id === storedUser.id        ? "self"        : ""      : data.user_id === storedUser.id      ? "self"      : ""  }`;  messageDiv.innerHTML = `            <div class="content">${data.text}</div>            <div class="message-time">                 ${data.time}            </div>        `;  return messageDiv;}然后我们需要把接受到的消息放到session里，这里要区分一下，我们只讨论与用户的聊天：对于当前的客户端来说，如果发送消息的人是自己的话，那么我们就把消息记录到接收消息的人的聊天里，如果自己是接收消息的人，就要把消息记录到发送消息的人的聊天里。
        if (!chatSessions.has(id)) {        chatSessions.set(id, []);        console.log("set user good", id, typeof id);      }      chatSessions.get(id).push(data);这里是在说：如果我们的容器里没有id的话，那么我们就创建一个，log是我调试用的，然后get到id的key并且push。
群聊我们倒是不用太怎么判断了，毕竟都是存到群聊的聊天记录里。
现在我们已经把消息存好了，那消息的读取，是应该在我们点击好友或者群聊的时候处理的：
找到我们写的点击好友时发生的回调函数：
import { FriendListHandler } from "./friendListView.js";export const friendListView = new FriendListHandler(  "chat-list",  (selectedFriend) => {    // 这里处理选中好友后的逻辑    currentChat.value = {      type: "friend",      id: parseInt(selectedFriend.id),      name: selectedFriend.name,    };    // 清空聊天区域    const messagesDiv = document.getElementById("chat-messages");    messagesDiv.innerHTML = "";    const sessionid = parseInt(currentChat.value.id);    //  加载历史消息    if (chatSessions.has(sessionid)) {      console.log("YES");      chatSessions.get(sessionid).forEach((msg) => {        messagesDiv.appendChild(createMessageElement(msg));        messagesDiv.scrollTop = messagesDiv.scrollHeight;      });    } else {      console.log("NO", sessionid);    }    // 更新聊天窗口标题    document.querySelector(      ".chat-header"    ).textContent = `与 ${currentChat.value.name} 的对话`;  });这里多了中间的部分，分别是清空聊天区域，然后加载我们的历史消息。
如果存在历史消息的话，就把每一个消息给输出出来。
我们也用同样的办法来处理群聊就好了。
但是我们还要处理一个烂摊子，正如我们当时要加一个CHAT_TO_ONE_ACK一样，我们当时的偷懒，现在需要重新修改一下muduo服务端的内容，添加一个CHAT_TO_GROUP_ACK。
所以大概就是加了一些代码：
int user_id = js["user_id"].get<int>();        // std::string user_name = js["user_name"].get<std::string>();        int group_id = js["group_id"].get<int>();        Group group = _group_model.GetGroup(group_id);        User user = _user_modle.Query(user_id);        json response;        response["user_id"] = user_id;        response["user_name"] = user.GetName();        response["group_id"] = group_id;        response["group_name"] = group.GetName();//...                if (it != _conn_mp.end())                                {                                        auto to_conn = it->second.getConn();                                        response["uid"] = it->second.getUid();                                        Send(to_conn, response.dump());                                        continue;                                }与此同时，我们的前端也要改一下：
//处理接收到的好友发来的消息  16: (data) => {    if (      currentChat.value.type === "friend" &&      (data.from_id === storedUser.id || data.from_id === currentChat.value.id)    ) {      const messagesDiv = document.getElementById("chat-messages");      messagesDiv.appendChild(createMessageElement(data));      // 自动滚动到底部      messagesDiv.scrollTop = messagesDiv.scrollHeight;    }    //把消息放进session里;    //是自己给别人发送的消息，应该是记录在别人to_id的聊天里,否则就是记录到from_id里。    const id =      parseInt(data.from_id) === parseInt(storedUser.id)        ? parseInt(data.to_id)        : parseInt(data.from_id);    if (!chatSessions.has(id)) {      chatSessions.set(id, []);      console.log("set user good", id, typeof id);    }    chatSessions.get(id).push(data);  },  //处理接收到的群聊发来的消息  19: (data) => {    if (      currentChat.value.type === "group" &&      (parseInt(data.from_id) === parseInt(storedUser.id) ||        data.group_id === currentChat.value.id)    ) {      const messagesDiv = document.getElementById("chat-messages");      messagesDiv.appendChild(createMessageElement(data));      // 自动滚动到底部      messagesDiv.scrollTop = messagesDiv.scrollHeight;    }    //把消息放进session里;    const id = parseInt(data.group_id);    if (!chatSessionsGruop.has(id)) {      chatSessionsGruop.set(id, []);      console.log("set group good", id);    }    chatSessionsGruop.get(id).push(data);  },这里加了个东西，就是判断
if (      currentChat.value.type === "friend" &&      (data.from_id === storedUser.id || data.from_id === currentChat.value.id)    )如果当前的接受的消息是我们目前的聊天窗口，我们才会显示这条信息。
群聊那边也是如此。
至此，我们就实现了基本的好友聊天和群里聊天的功能。
but我现在发现，我实现了之后，群聊里接受的消息是undefined。
修复了群聊消息undefined的bug

ok，先说一下，在找bug的时候，突然发现，如果有一方的currentChat是null的话，那么对方发送的消息将不会记录到聊天记录里面。
于是我们要在push之前加一个判断是否为null
大概就是这样：
if (currentChat.value != null)      if (        currentChat.value.type === "group" &&        (parseInt(data.from_id) === parseInt(storedUser.id) ||          data.group_id === currentChat.value.id)      ) {        const messagesDiv = document.getElementById("chat-messages");        messagesDiv.appendChild(createMessageElement(data));        // 自动滚动到底部        messagesDiv.scrollTop = messagesDiv.scrollHeight;      }关于undefined，原来是因为我服务端的response里忘了装text和time了，怪不得undefined呢。
然后又对于消息的弹出做了一点点改变：
// 新增消息元素创建函数export function createMessageElement(data) {  const messageDiv = document.createElement("div");  if (data.hasOwnProperty("group_id")) {    messageDiv.className = `message ${      data.user_id === storedUser.id ? "self" : ""    }`;    messageDiv.innerHTML = `              <div class="content">${data.text}</div>              <div class="message-user ${                data.user_id === storedUser.id ? "self" : ""              }">${data.user_name}</div>              <div class="message-time">                   ${data.time}              </div>          `;  } else {    messageDiv.className = `message ${      data.from_id === storedUser.id ? "self" : ""    }`;    messageDiv.innerHTML = `              <div class="content">${data.text}</div>              <div class="message-time">                   ${data.time}              </div>          `;  }  return messageDiv;}直接分开讨论群聊还是好友了，毕竟群聊的显示内容和好友的不太一样，一直用三目运算符有点麻烦。
已经活成了一个码农
顺便加了个css：
         .message-user.self {        font-size: 16px;        color: #00fc2a;        margin-top: 4px;      }      .message-user {        font-size: 16px;        color: #ca2e2e;        margin-top: 4px;      }所以到这里为止，终于成功实现了群聊和好友的发消息的内容。
postscript

至此为止，我们已经完成了关于昨晚写的大部分的功能，除了那个状态刷新，但我觉得可能没必要吧。
所以暂时决定就完成到这里，后续的todo大概有这些：

• 添加好友
  
• 添加群聊
  
• 创建群聊
  
• 注册功能
  

完成这四个之后，目前来说就没有前端可以做的事情了。我们后续的重心将落在后端上。