日期：2025.4.24

学习内容：

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

个人总结：

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

修复了聊天窗口的bug

其实这个并不麻烦，直接让AI给我跑一个（还是借助了AI的力量。

JavaScript 复制代码

 /* 聊天区域 */
      .chat-pane {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 占据全屏高度 */
      }

修复了"没有区分好友或者群聊的聊天窗口"的bug

有一些恶心了，首先我们肯定是要跟开一个map一样，存下来客户单和每一个用户的聊天记录

JavaScript 复制代码

export const chatSessions = new Map();
export const chatSessionsGruop = new Map();

就像这样，开了两个，第一个是和用户的，第二个是和群聊的。

这里就展开讲一个了，毕竟几乎一模一样。

我们先把问题拆解一下：

我们肯定要实现，当我们发送消息or接收消息的时候，需要把这个消息存起来，那是发送还是接受的时候呢?应该是接收消息的时候，毕竟我们发送消息的时候，程序的设计里，我们相当于是给自己也发送了个消息。

先看一下handler的改动：

JavaScript 复制代码

 //处理接收到的消息
  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);
    }
  },

这里我挨个来讲一下，首先，前面三条和之前的一样，为了简略一些，把那些创建消息的内容写进去了一个函数里：

JavaScript 复制代码

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里，这里要区分一下，我们只讨论与用户的聊天：对于当前的客户端来说，如果发送消息的人是自己的话，那么我们就把消息记录到接收消息的人的聊天里，如果自己是接收消息的人，就要把消息记录到发送消息的人的聊天里。

JavaScript 复制代码

 	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。

群聊我们倒是不用太怎么判断了，毕竟都是存到群聊的聊天记录里。

现在我们已经把消息存好了，那消息的读取，是应该在我们点击好友或者群聊的时候处理的：

找到我们写的点击好友时发生的回调函数：

JavaScript 复制代码

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。

所以大概就是加了一些代码：

c++ 复制代码

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;
				}

与此同时，我们的前端也要改一下：

JavaScript 复制代码

 //处理接收到的好友发来的消息
  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);
  },

这里加了个东西，就是判断

JavaScript 复制代码

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

大概就是这样：

JavaScript 复制代码

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呢。

然后又对于消息的弹出做了一点点改变：

JavaScript 复制代码

// 新增消息元素创建函数
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：

css 复制代码

	 .message-user.self {
        font-size: 16px;
        color: #00fc2a;
        margin-top: 4px;
      }
      .message-user {
        font-size: 16px;
        color: #ca2e2e;
        margin-top: 4px;
      }

所以到这里为止，终于成功实现了群聊和好友的发消息的内容。

postscript

至此为止，我们已经完成了关于昨晚写的大部分的功能，除了那个状态刷新，但我觉得可能没必要吧。

所以暂时决定就完成到这里，后续的todo大概有这些：

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

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

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

日期：2025.4.24

学习内容：

个人总结：

修复了聊天窗口的bug

修复了"没有区分好友或者群聊的聊天窗口"的bug

修复了群聊消息undefined的bug

postscript