微服务即时通讯系统的实现（客户端）----（4）

[1. 单聊消息会话详细信息界面逻辑](#1. 单聊消息会话详细信息界面逻辑)
- [1.1 判定会话详情为单聊还是群聊](#1.1 判定会话详情为单聊还是群聊)
- [1.2 获取对方好友详情](#1.2 获取对方好友详情)
- [1.3 删除好友](#1.3 删除好友)
[2. 选择好友界面逻辑](#2. 选择好友界面逻辑)
- [2.1 选择联系人](#2.1 选择联系人)
- [2.2 创建群聊会话](#2.2 创建群聊会话)
- [2.3 收到群聊会话创建通知](#2.3 收到群聊会话创建通知)
[3. 实现群聊消息会话详细信息界面当中的获取群聊成员列表](#3. 实现群聊消息会话详细信息界面当中的获取群聊成员列表)
[4. 添加好友界面逻辑](#4. 添加好友界面逻辑)
- [4.1 搜索用户](#4.1 搜索用户)
- [4.2 发送好友申请](#4.2 发送好友申请)
[5. 历史消息界面逻辑 (1)](#5. 历史消息界面逻辑 (1))
- [5.1 搜索历史消息 (1) - 按查询词搜索](#5.1 搜索历史消息 (1) - 按查询词搜索)
- [5.2 搜索历史消息(2) - 按时间范围搜索](#5.2 搜索历史消息(2) - 按时间范围搜索)
[6. 用户名登录/注册界面](#6. 用户名登录/注册界面)
- [6.1 生成验证码](#6.1 生成验证码)
- [6.2 登录逻辑](#6.2 登录逻辑)
- [6.3 注册逻辑](#6.3 注册逻辑)
[7. 手机号登录/注册界面](#7. 手机号登录/注册界面)
- [7.1 获取短信验证](#7.1 获取短信验证)
- [7.2 登录逻辑](#7.2 登录逻辑)
- [7.3 注册逻辑](#7.3 注册逻辑)
[8. 聊天界面逻辑 (2)](#8. 聊天界面逻辑 (2))
- [8.1 异步获取文件内容](#8.1 异步获取文件内容)
- [8.2 图片消息的实现](#8.2 图片消息的实现)
- [8.3 文件消息的实现](#8.3 文件消息的实现)
- [8.4 语音消息的实现](#8.4 语音消息的实现)
- [8.5 语音识别文字](#8.5 语音识别文字)
[9. 历史消息界面逻辑 (2)](#9. 历史消息界面逻辑 (2))
- [9.1 适配图片消息](#9.1 适配图片消息)
- [9.2 适配文件消息](#9.2 适配文件消息)
- [9.3 适配语音消息](#9.3 适配语音消息)
[10. 重定向日志到文件中](#10. 重定向日志到文件中)
[11. 发布程序](#11. 发布程序)
[12. 客户端总结](#12. 客户端总结)

1. 单聊消息会话详细信息界面逻辑

1.1 判定会话详情为单聊还是群聊

（1）在 MainWidget 的 extraButton 的槽函数中做⼀个条件判断即可，不需要和服务器通信：

cpp 复制代码

/
/// 点击会话详情按钮, 弹出会话详情窗口
/
connect(extraBtn, &QPushButton::clicked, this, [=]()
{
	// 判定当前会话是单聊还是群聊
	// 获取到当前会话详细信息, 通过会话中的 userId 属性
	ChatSessionInfo* chatSessionInfo = dataCenter->findChatSessionById(dataCenter->getCurrentChatSessionId());
	if(chatSessionInfo == nullptr)
	{
		LOG() << "当前会话不存在, 无法弹出会话详情对话框";
		return;
	}

	bool isSingleChat  = chatSessionInfo->userId != "";
	if(isSingleChat )
	{
		// 单聊, 弹出这个窗口
		UserInfo* userInfo = dataCenter->findFriendById(chatSessionInfo->userId);
		if(userInfo == nullptr)
		{
			LOG() << "单聊会话对应的用户不存在, 无法弹出会话详情窗口";
			return;
		}

		SessionDetailWidget* sessiondetailwidget = new SessionDetailWidget(this, *userInfo);
		sessiondetailwidget->exec();
	}
	else
	{
		GroupSessionDetailWidget* groupsessiondetailwidget = new GroupSessionDetailWidget(this);
		groupsessiondetailwidget->exec();
	}
});

1.2 获取对方好友详情

（1）通过 friendList 查询即可。不需要和服务器通信，在 SessionDetailWidget 构造函数中，添加数据加载逻辑：

cpp 复制代码

#if LOAD_DATA_FROM_NETWORK
 	// 获取到当前的对⽅⽤⼾信息. 对⽅⼀定是咱们的好友.
 	DataCenter* dataCenter = DataCenter::getInstance();
 	UserInfo* userInfo = dataCenter->getFriendById(chatSessionInfo.userId);
 	if(userInfo != nullptr) 
 	{
 		AvatarItem* currentUser = new AvatarItem(userInfo->avatar, userInfo->nickname);
 		layout->addWidget(currentUser, 0, 1);
 	}
 	
#endif

1.3 删除好友

（1）和UserInfoWidget 中的删除好友是⼀样的逻辑：

在 SessionDetailWidget 构造函数中，绑定信号槽：

cpp 复制代码

connect(deleteFriendBtn, &QPushButton::clicked, this, &SessionDetailWidget::clickDeleteFriendBtn);

实现 SessionDetailWidget::clickDeleteFriendBtn函数：

cpp 复制代码

void SessionDetailWidget::clickDeleteFriendBtn()
{
    // 1. 弹出一个对话框让用户确认是否真的要删除
    auto result = QMessageBox::warning(this, "确认删除", "确认删除该好友?", QMessageBox::Ok | QMessageBox::Cancel);
    if(result != QMessageBox::Ok)
    {
        LOG() << "用户取消了好友删除";
        return;
    }

    // 2. 发送好友删除的请求
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    dataCenter->deleteFriendAsync(this->userInfo.userId);

    // 3. 关闭当前窗口
    this->close();
}

后续的 deleteFriendAsync 以及响应的处理已经在前⾯实现过了。此处直接复⽤即可。

2. 选择好友界面逻辑

2.1 选择联系人

（1）弹出选择联系人界面：

在 SessionDetailWidget 构造函数中，给 addBtn 注册槽函数：

cpp 复制代码

addBtn->setClicked([=](){ChooseFriendDialog* dialog = newChooseFriendDialog(chatSessionInfo.userId);
 	// 弹出模态对话框
 	auto result = dialog->exec();
 	if(result == QDialog::Accepted) 
 	{
 		// 关闭当前窗⼝
 		this->close();
 	}
 	
 	delete dialog;
});

实现 AvatarItem::setClicked

cpp 复制代码

void AvatarItem::setClicked(std::function<void ()> slotFunc)
{
 connect(avatarBtn, &QPushButton::clicked, this, slotFunc);
}

（2）初始化待选择好友列表：

在 ChooseFriendDialog 构造函数中，新增加载数据逻辑：

cpp 复制代码

void ChooseFriendDialog::initData()
{
    // 遍历 好友列表, 把好友列表中的所有的元素, 添加到这个窗口界面上.
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    QList<model::UserInfo>* friendList = dataCenter->getFriendList();
    if(friendList == nullptr)
    {
        LOG() << "加载数据时发现好友列表为空!";
        return;
    }

    for(auto iter = friendList->begin(); iter != friendList->end(); ++iter)
    {
        if(iter->userId == userId)
        {
            this->addSelectedFriend(iter->userId, iter->avatar, iter->nickname);
            this->addFriend(iter->userId, iter->avatar, iter->nickname, true);
        }
        else
        {
            this->addFriend(iter->userId, iter->avatar, iter->nickname, false);
        }
    }
}

（3）在待选择好友列表中勾选某个元素，添加到已选择列表。

2.2 创建群聊会话

（1）客户端发送请求：

点击 "完成" 按钮，发送创建会话请求，在 ChooseFriendDialog::initRight 中连接信号槽：

cpp 复制代码

connect(okBtn, &QPushButton::clicked, this, &ChooseFriendDialog::clickOkBtn);

实现 ChooseFriendDialog::clickOkBtn函数：

cpp 复制代码

void ChooseFriendDialog::clickOkBtn()
{
    // 1. 根据选中的好友列表中的元素, 得到所有的要创建群聊会话的用户 id 列表
    QList<QString> userIdList = generateMemberList();
    if(userIdList.size() < 3)
    {
        Toast::showMessage("群聊中的成员不足三个, 无法创建群聊");
        return;
    }

    // 2. 发送网络请求, 创建群聊
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    dataCenter->createGroupChatSessionAsync(userIdList);

    // 3. 关闭当前窗口
    this->close();
}

实现 ChooseFriendDialog::generateMemberList函数：

cpp 复制代码

QList<QString> ChooseFriendDialog::generateMemberList()
{
    QList<QString> result;

    // 1. 把自己添加到结果中
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    if(dataCenter->getMyself() == nullptr)
    {
        LOG() << "个人信息尚未加载!";
        return result;
    }

    result.push_back(dataCenter->getMyself()->userId);

    // 2. 遍历选中的列表
    QVBoxLayout* layout = dynamic_cast<QVBoxLayout*>(selectedContainer->layout());
    for(int i = 0; i < layout->count(); i++)
    {
        auto* item = layout->itemAt(i);
        if(item == nullptr || item->widget() == nullptr)
        {
            continue;
        }

        auto* chooseFriendItem = dynamic_cast<ChooseFriendItem*>(item->widget());
        result.push_back(chooseFriendItem->getUserId());
    }

    return result;
}

实现 DataCenter::createChatSessionAsync函数：

cpp 复制代码

void DataCenter::createGroupChatSessionAsync(const QList<QString>& userIdList)
{
    netClient.createGroupChatSession(loginSessionId, userIdList);
}

实现 NetClient::createChatSession函数和接口定义：

cpp 复制代码

//创建会话
message ChatSessionCreateReq {
 	string request_id = 1;
 	optional string session_id = 2;
 	optional string user_id = 3;
 	string chat_session_name = 4;
 	//需要注意的是，这个列表中也必须包含创建者⾃⼰的⽤⼾ID
 	repeated string member_id_list = 5;
}
message ChatSessionCreateRsp {
 	string request_id = 1;
	bool success = 2;
 	string errmsg = 3; 
 	//这个字段属于后台之间的数据，给前端回复的时候不需要这个字段，会话信息通过通知进⾏发送
 	optional ChatSessionInfo chat_session_info = 4; 
}

// 函数实现
void NetClient::createGroupChatSession(const QString& loginSessionId, const QList<QString>& userIdList)
{
    // 1. 构造请求 body
    bite_im::ChatSessionCreateReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setChatSessionName("新的群聊");
    pbReq.setMemberIdList(userIdList);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[创建群聊会话] 发送请求 requestId=" << pbReq.requestId() << ", loginSessionId=" << loginSessionId
          << ", userIdList=" << userIdList;

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/friend/create_chat_session", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::ChatSessionCreateRsp>(resp, &ok, &reason);

        // b) 判定结果是否正确
        if(!ok)
        {
            LOG() << "[创建群聊会话] 响应失败! reason=" << reason;
            return;
        }

        // c) 往 DataCenter 存储数据. 由于此处创建好的会话, 是 websocket 推送过来的.
        //    在这里无需更新 DataCenter. 后续通过 websocket 的逻辑来更新即可.

        // d) 通知调用者, 响应处理完毕了
        emit dataCenter->createGroupChatSessionDone();

        // e) 打印日志
        LOG() << "[创建群聊会话] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

定义 DataCenter 信号

cpp 复制代码

void createChatSessionDone();

在 MainWidget::initData 中处理上述信号：

cpp 复制代码

connect(dataCenter, &DataCenter::createChatSessionDone, this, [=]() {
	// 发送全局通知
	Toast::showMessage("创建群聊会话请求已经发送!");
});

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/friend/create_chat_session", [=](const QHttpServerRequest& req) 
{
 	return this->createChatSession(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::createChatSession(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::ChatSessionCreateReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 创建会话] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", userIdList=" << pbReq.memberIdList();

    // 构造响应 body
    bite_im::ChatSessionCreateRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");
    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

（4）客户端实现 "取消" 按钮：

cpp 复制代码

connect(cancelBtn, &QPushButton::clicked, this, [=]()
{
	// 关闭窗口
	this->close();
});

2.3 收到群聊会话创建通知

当有用户创建会话时服务器会通过 websocket给所有会话成员的客户端发送会话创建通知。

（1）客户端处理推送：

实现 NetClient::handleWsSessionCreate函数：

cpp 复制代码

void NetClient::handleWsSessionCreate(const model::ChatSessionInfo &chatSessionInfo)
{
    // 把这个 ChatSessionInfo 添加到会话列表中即可
    QList<model::ChatSessionInfo>* chatSessionList = dataCenter->getChatSessionList();
    if(chatSessionList == nullptr)
    {
        LOG() << "客户端没有加载会话列表";
        return;
    }

    // 新的元素添加到列表头部.
    chatSessionList->push_front(chatSessionInfo);

    // 发送一个信号, 通知界面更新
    emit dataCenter->receiveSessionCreateDone();
}

定义 DataCenter 信号：

cpp 复制代码

void receiveSessionCreateDone();

处理 receiveSessionCreateDone 信号。在 MainWidget::initSignalSlot中处理信号：

cpp 复制代码

connect(dataCenter, &DataCenter::receiveSessionCreateDone, this, [=]()
{
	this->updateChatSessionList();
	// 通知用户, 入群
	Toast::showMessage("您被拉入到新的群聊中!");
});

（2）服务器实现逻辑：

创建按钮 "发送创建会话通知"并定义槽函数：

cpp 复制代码

void Widget::on_pushButton_5_clicked()
{
 	WebsocketServer* websocketServer = WebsocketServer::getInstance();
 	emit websocketServer->sendCreateChatSession();
}

定义 WebsocketServer 信号：

cpp 复制代码

void sendCreateChatSession();

在 websocket 处理逻辑中, 处理上述信号：

cpp 复制代码

connect(this, &WebsocketServer::sendCreateChatSession, this, [=]()
{
	if(socket == nullptr || !socket->isValid())
	{
		LOG() << "socket 对象无效!";
		return;
	}

	QByteArray avatar = loadFileToByteArray(":/resource/image/groupAvatar.png");

	bite_im::NotifyMessage notifyMessage;
	notifyMessage.setNotifyEventId("");
	notifyMessage.setNotifyType(bite_im::NotifyTypeGadget::NotifyType::CHAT_SESSION_CREATE_NOTIFY);

	bite_im::MessageInfo messageInfo = makeTextMessageInfo(0, "2100", avatar);

	bite_im::ChatSessionInfo chatSessionInfo;
	chatSessionInfo.setChatSessionId("2100");
	chatSessionInfo.setSingleChatFriendId("");
	chatSessionInfo.setChatSessionName("新的群聊");
	chatSessionInfo.setPrevMessage(messageInfo);
	chatSessionInfo.setAvatar(avatar);

	bite_im::NotifyNewChatSession newChatSession;
	newChatSession.setChatSessionInfo(chatSessionInfo);
	notifyMessage.setNewChatSessionInfo(newChatSession);

	// 序列化操作
	QByteArray body = notifyMessage.serialize(&serializer);

	// 通过 websocket 推送数据
	socket->sendBinaryMessage(body);
	LOG() << "通知创建会话!";
});

在 websocket 断开连接时, 断开信号槽连接：

cpp 复制代码

disconnect(this, &WebsocketServer::sendCreateChatSession, this, nullptr);

3. 实现群聊消息会话详细信息界面当中的获取群聊成员列表

（1）客户端发送请求：

在 GroupSessionDetailWidget 构造函数中加载数据：

cpp 复制代码

void GroupSessionDetailWidget::initData()
{
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::getMemberListDone, this, &GroupSessionDetailWidget::initMembers);
    dataCenter->getMemberListAsync(dataCenter->getCurrentChatSessionId());
}

实现 DataCenter::getMemberListAsync函数：

cpp 复制代码

void DataCenter::getMemberListAsync(const QString &chatSessionId)
{
 	netClient.getMemberList(loginSessionId, chatSessionId);
}

实现 NetClient::getMemberList函数和接口定义：

cpp 复制代码

//获取会话成员列表
message GetChatSessionMemberReq {
 	string request_id = 1;
 	optional string session_id = 2;
 	optional string user_id = 3;
 	string chat_session_id = 4;
}
message GetChatSessionMemberRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	repeated UserInfo member_info_list = 4;
}

// 函数实现：
void NetClient::getMemberList(const QString& loginSessionId, const QString &chatSessionId)
{
    // 1. 构造请求 body
    bite_im::GetChatSessionMemberReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setChatSessionId(chatSessionId);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[获取会话成员列表] 发送请求 requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", chatSessionId=" << pbReq.chatSessionId();

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/friend/get_chat_session_member", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::GetChatSessionMemberRsp>(resp, &ok, &reason);

        // b) 判定响应结果是否正确
        if(!ok)
        {
            LOG() << "[获取会话成员列表] 响应失败 reason=" << reason;
            return;
        }

        // c) 把结果记录到 DataCenter
        dataCenter->resetMemberList(chatSessionId, pbResp->memberInfoList());

        // d) 发送信号
        emit dataCenter->getMemberListDone(chatSessionId);

        // e) 打印日志
        LOG() << "[获取会话成员列表] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

实现 DataCenter::resetMemberList函数：

cpp 复制代码

void DataCenter::resetMemberList(const QString& chatSessionId, const QList<bite_im::UserInfo>& memberList)
{
    // 根据 chatSessionId, 这个 key, 得到对应的 value (QList)
    QList<UserInfo>& currentMemberList = (*this->memberList)[chatSessionId];
    currentMemberList.clear();

    for(const auto& m : memberList)
    {
        model::UserInfo userInfo;
        userInfo.load(m);
        currentMemberList.push_back(userInfo);
    }
}

定义 DataCenter 信号：

cpp 复制代码

void getMemberListDone();

处理 getMemberListDone 信号。实现 GroupSessionDetailWidget::initMembers函数：

cpp 复制代码

void GroupSessionDetailWidget::initMembers(const QString& chatSessionId)
{
    // 根据刚才拿到的成员列表, 把成员列表渲染到界面上.
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    QList<UserInfo>* memberList = dataCenter->getMemberList(chatSessionId);
    if(memberList == nullptr)
    {
        LOG() << "获取的成员列表为空! chatSessionId=" << chatSessionId;
        return;
    }

    for(const auto& u : *memberList)
    {
        AvatarItem* avatarItem = new AvatarItem(u.avatar, u.nickname);
        this->addMember(avatarItem);
    }

    // 群聊名称, 此处先设成固定名称.
    groupNameLabel->setText("新的群聊");
}

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/friend/get_chat_session_member", [=](const QHttpServerRequest& req) 
{
 	return this->getChatSessionMember(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::getChatSessionMember(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::GetChatSessionMemberReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 获取会话成员列表] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", chatSessionId=" << pbReq.chatSessionId();

    // 构造响应
    bite_im::GetChatSessionMemberRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");

    // 循环的构造多个 userInfo, 添加到 memberInfoList 中
    QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
    for(int i = 0; i < 10; ++i)
    {
        bite_im::UserInfo userInfo = makeUserInfo(i, avatar);
        pbResp.memberInfoList().push_back(userInfo);
    }

    // 序列化
    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

（4）扩展功能：

点击群成员头像查看详情。
新增群聊成员。
退出群聊。
修改群聊名称。
修改群聊名称。

4. 添加好友界面逻辑

4.1 搜索用户

（1）客户端发送请求：

在 AddFriendDialog 构造函数中连接信号槽：

cpp 复制代码

connect(searchBtn, &QPushButton::clicked, this, 
&AddFriendDialog::clickSearchBtn);

实现 clickSearchBtn函数：

cpp 复制代码

void AddFriendDialog::clickSearchBtn()
{
    const QString& text = searchEdit->text();
    if(text == nullptr)
    {
        return;
    }

    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::searchUserDone, this, &AddFriendDialog::clickSearchBtnDone, Qt::UniqueConnection);
    dataCenter->searchUserAsync(text);
}

实现 DataCenter::searchUserAsync函数：

cpp 复制代码

void DataCenter::searchUserAsync(const QString &searchKey)
{
 	netClient.searchUser(loginSessionId, searchKey);
}

实现 NetClient::searchUser函数和接口定义：

cpp 复制代码

//好友搜索
message FriendSearchReq {
 	string request_id = 1;
 	string search_key = 2;//就是名称模糊匹配关键字
 	optional string session_id = 3;
 	optional string user_id = 4;
}
message FriendSearchRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	repeated UserInfo user_info = 4;
}

// 函数实现
void NetClient::searchUser(const QString& loginSessionId, const QString& searchKey)
{
    // 1. 构造请求 body
    bite_im::FriendSearchReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setSearchKey(searchKey);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[搜索用户] 发送请求 requestId=" << pbReq.requestId() << ", loginSessionId=" << loginSessionId
          << ", searchKey=" << searchKey;

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/friend/search_friend", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::FriendSearchRsp>(resp, &ok, &reason);

        // b) 判定响应成功
        if(!ok)
        {
            LOG() << "[搜索用户] 响应失败 reason=" << reason;
            return;
        }

        // c) 把得到的结果, 记录到 DataCenter
        dataCenter->resetSearchUserResult(pbResp->userInfo());

        // d) 发送信号, 通知调用者
        emit dataCenter->searchUserDone();

        // e) 打印日志
        LOG() << "[搜索用户] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

实现 DataCenter::resetSearchUserResult 和 getSearchUserResult函数：

cpp 复制代码

QList<UserInfo>* DataCenter::getSearchUserResult()
{
    return searchUserResult;
}

void DataCenter::resetSearchUserResult(const QList<bite_im::UserInfo>& userList)
{
    if(searchUserResult == nullptr)
    {
        searchUserResult = new QList<model::UserInfo>();
    }

    this->searchUserResult->clear();
    for(auto& u : userList)
    {
        model::UserInfo userInfo;
        userInfo.load(u);
        searchUserResult->push_back(userInfo);
    }
}

定义 DataCenter 的信号：

cpp 复制代码

void searchUserDone();

处理 searchUserDone 信号。实现 AddFriendDialog::clickSearchBtnDone函数：

cpp 复制代码

void AddFriendDialog::clickSearchBtnDone()
{
    // 1. 拿到 DataCenter 中的搜索结果列表
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    QList<UserInfo>* searchResult = dataCenter->getSearchUserResult();
    if(searchResult == nullptr)
    {
        return;
    }

    this->clear();
    for(const auto& u : *searchResult)
    {
        this->addResult(u);
    }
}

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/friend/search_friend", [=](const QHttpServerRequest& req) 
{
 	return this->searchFriend(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::searchFriend(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::FriendSearchReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 搜索好友] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", searchKey=" << pbReq.searchKey();

    // 构造响应 body
    bite_im::FriendSearchRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");

    QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
    for(int i = 0; i < 30; ++i)
    {
        bite_im::UserInfo userInfo = makeUserInfo(i, avatar);
        pbResp.userInfo().push_back(userInfo);
    }
    QByteArray body = pbResp.serialize(&serializer);

    // 发送响应给客户端
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

4.2 发送好友申请

（1）客户端发送请求：

"添加好友" 按钮在 FriendResultItem 的构造函数中添加信号槽：

cpp 复制代码

connect(addBtn, &QPushButton::clicked, this, &FriendResultItem::clickAddBtn);

实现 FriendResultItem::clickAddBtn函数：

cpp 复制代码

void FriendResultItem::clickAddBtn()
{
    // 1. 发送好友申请
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    // 申请好友的逻辑, 都已经编写过了, 此处只需要在这里进行一个调用之前代码即可.
    dataCenter->addFriendApplyAsync(this->userInfo.userId);

    // 2. 设置按钮为禁用状态
    addBtn->setEnabled(false);
    addBtn->setText("已申请");
    addBtn->setStyleSheet("QPushButton { border:none; color: rgb(255, 255, 255); background-color: rgb(200, 200, 200); border-radius: 10px;}");
}

实现 DataCenter::addFriendApplyAsync函数：前面已经实现过了。此处直接调用。

（2）客户端处理响应：前面已经实现过了。此处直接调用。

（3）服务器实现逻辑：前面已经实现过了。此处直接调用。

5. 历史消息界面逻辑 (1)

5.1 搜索历史消息 (1) - 按查询词搜索

（1）添加弹出对话框条件：当前会话id 不为 "" 才弹出。在MessageEditArea::initSignalSlot当中实现：

cpp 复制代码

// 1. 关联 "显示历史消息窗口" 信号槽
connect(showHistoryBtn, &QPushButton::clicked, this, [=]()
{
	if(dataCenter->getCurrentChatSessionId().isEmpty())
	{
		return;
	}
	
	HistoryMessageWidget* historyMessageWidget = new HistoryMessageWidget(this);
	historyMessageWidget->exec();
});

（2）客户端发送请求：

在 HistoryMessageWidget 构造函数中连接信号槽：

cpp 复制代码

connect(searchBtn, &QPushButton::clicked, this, &HistoryMessageWidget::clickSearchBtn);

实现 HistoryMessageWidget::clickSearchBtn函数：

cpp 复制代码

void HistoryMessageWidget::clickSearchBtn()
{
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::searchMessageDone, this, &HistoryMessageWidget::clickSearchBtnDone, Qt::UniqueConnection);

    if(keyRadioBtn->isChecked())
    {
        // 按照关键词搜索
        // 获取到输入框的关键词
        const QString& searchKey = searchEdit->text();
        if(searchKey.isEmpty())
        {
            return;
        }

        dataCenter->searchMessageAsync(searchKey);
    }
    else
    {
        // 按照时间搜索
        // TODO
    }
}

实现 DataCenter::searchMessageAsync函数：

cpp 复制代码

void DataCenter::searchMessageAsync(const QString &searchKey)
{
 	netClient.searchMessage(loginSessionId, currentChatSessionId, searchKey);
}

实现 NetClient::searchMessage函数和接口定义：

cpp 复制代码

message MsgSearchReq {
 	string request_id = 1;
 	optional string user_id = 2;
 	optional string session_id = 3;
 	string chat_session_id = 4;
 	string search_key = 5;
}
message MsgSearchRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	repeated MessageInfo msg_list = 4;
}

// 函数实现
void NetClient::searchMessage(const QString& loginSessionId, const QString& chatSessionId, const QString& searchKey)
{
    // 1. 构造请求 body
    bite_im::MsgSearchReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setChatSessionId(chatSessionId);
    pbReq.setSearchKey(searchKey);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[按关键词搜索历史消息] 发送请求 requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", chatSessionId=" << pbReq.chatSessionId() << ", searchKey=" << searchKey;

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/message_storage/search_history", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::MsgSearchRsp>(resp, &ok, &reason);

        // b) 判定响应是否正确
        if(!ok)
        {
            LOG() << "[按关键词搜索历史消息] 响应失败! reason=" << reason;
            return;
        }

        // c) 把响应结果写入到 DataCenter
        dataCenter->resetSearchMessageResult(pbResp->msgList());

        // d) 发送信号
        emit dataCenter->searchMessageDone();

        // e) 打印日志
        LOG() << "[按关键词搜索历史消息] 响应完成 requestId=" << pbResp->requestId();
    });
}

（3）客户端处理响应：

实现 DataCenter::resetSearchMessageResult函数：

cpp 复制代码

void DataCenter::resetSearchMessageResult(const QList<bite_im::MessageInfo>& msgList)
{
    if(searchMessageResult == nullptr)
    {
        searchMessageResult = new QList<model::Message>();
    }

    this->searchMessageResult->clear();
    for(const auto& u : msgList)
    {
        model::Message message;
        message.load(u);
        searchMessageResult->push_back(message);
    }
}

定义 DataCenter 信号：

cpp 复制代码

void searchMessageDone();

处理 searchMessageDone 信号。实现 HistoryMessageWidget::clickSearchBtnDone函数：

cpp 复制代码

void HistoryMessageWidget::clickSearchBtnDone()
{
    // 1. 从 DataCenter 中拿到消息搜索的结果列表
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    QList<Message>* messageResult = dataCenter->getSearchMessageResult();
    if(messageResult == nullptr)
    {
        return;
    }

    // 2. 把结果列表的数据, 显示到界面上
    this->clear();

    for(const Message& m : *messageResult)
    {
        this->addHistoryMessage(m);
    }
}

（4）服务器实现逻辑：

注册路由

cpp 复制代码

httpServer.route("/service/message_storage/search_history", [=](const QHttpServerRequest& req) 
{
 	return this->searchHistory(req);
});

实现处理函数

cpp 复制代码

QHttpServerResponse HttpServer::searchHistory(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::MsgSearchReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 搜索历史消息] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", chatSessionId=" << pbReq.chatSessionId() << ", searchKey=" << pbReq.searchKey();

    // 构造响应 body
    bite_im::MsgSearchRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");

    QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
    for (int i = 0; i < 10; ++i)
    {
        bite_im::MessageInfo message = makeTextMessageInfo(i, pbReq.chatSessionId(), avatar);
        pbResp.msgList().push_back(message);
    }

    // 构造图片消息
    bite_im::MessageInfo message = makeImageMessageInfo(10, pbReq.chatSessionId(), avatar);
    pbResp.msgList().push_back(message);

    // 构造文件消息
    message = makeFileMessageInfo(11, pbReq.chatSessionId(), avatar);
    pbResp.msgList().push_back(message);

    // 构造语音消息
    message = makeSpeechMessageInfo(12, pbReq.chatSessionId(), avatar);
    pbResp.msgList().push_back(message);

    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

5.2 搜索历史消息(2) - 按时间范围搜索

（1）客户端发送请求：

实现 HistoryMessageWidget::clickSearchBtn函数：

cpp 复制代码

void HistoryMessageWidget::clickSearchBtn()
{
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::searchMessageDone, this, &HistoryMessageWidget::clickSearchBtnDone, Qt::UniqueConnection);

    if(keyRadioBtn->isChecked())
    {
        // 按照关键词搜索
        // 获取到输入框的关键词
    }
    else
    {
        // 按照时间搜索
        auto begTime = begTimeEdit->dateTime();
        auto endTime = endTimeEdit->dateTime();
        if(begTime >= endTime)
        {
            Toast::showMessage("时间错误! 开始时间大于结束时间!");
            return;
        }

        dataCenter->searchMessageByTimeAsync(begTime, endTime);
    }
}

实现 DataCenter::searchMessageByTimeAsync函数：

cpp 复制代码

void DataCenter::searchMessageByTimeAsync(const QDateTime &begTime, const QDateTime &endTime)
{
 	netClient.searchMessageByTime(loginSessionId, currentChatSessionId, begTime, endTime);
}

实现 NetClient::searchMessageByTime函数和接口定义：

cpp 复制代码

message GetHistoryMsgReq {
 	string request_id = 1;
 	string chat_session_id = 2;
 	int64 start_time = 3;
 	int64 over_time = 4;
 	optional string user_id = 5;
 	optional string session_id = 6;
}
message GetHistoryMsgRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	repeated MessageInfo msg_list = 4;
}

// 函数实现
void NetClient::searchMessageByTime(const QString &loginSessionId, const QString &chatSessionId, const QDateTime &begTime, const QDateTime &endTime)
{
    // 1. 构造请求 body
    bite_im::GetHistoryMsgReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setChatSessionId(chatSessionId);
    pbReq.setStartTime(begTime.toSecsSinceEpoch());
    pbReq.setOverTime(endTime.toSecsSinceEpoch());
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[按时间搜索历史消息] 发送请求 requestId=" << pbReq.requestId() << ", loginSessionId=" << loginSessionId
          << ", chatSessionId=" << chatSessionId << ", begTime=" << begTime << ", endTime=" << endTime;

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/message_storage/get_history", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::GetHistoryMsgRsp>(resp, &ok, &reason);

        // b) 判定响应结果是否正确
        if(!ok)
        {
            LOG() << "[按时间搜索历史消息] 响应失败! reason=" << reason;
            return;
        }

        // c) 把响应结果记录到 DataCenter 中
        dataCenter->resetSearchMessageResult(pbResp->msgList());

        // d) 发送信号通知调用者
        emit dataCenter->searchMessageDone();

        // e) 打印日志
        LOG() << "[按时间搜索历史消息] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：此处已经实现过了直接复用。

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/message_storage/get_history", [=](const QHttpServerRequest& req) 
{
 	return this->getHistory(req);
});

实现处理函数

cpp 复制代码

QHttpServerResponse HttpServer::getHistory(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::GetHistoryMsgReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 按时间搜索历史消息] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          << ", chatSessionId=" << pbReq.chatSessionId() << ", begTime=" << pbReq.startTime() << ", endTime=" << pbReq.overTime();

    // 构造响应
    bite_im::GetHistoryMsgRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");

    QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
    for(int i = 0; i < 10; ++i)
    {
        bite_im::MessageInfo message = makeTextMessageInfo(i, pbReq.chatSessionId(), avatar);
        pbResp.msgList().push_back(message);
    }

    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

6. 用户名登录/注册界面

6.1 生成验证码

（1）创建 VerifyCodeWidget 类：

cpp 复制代码

class VerifyCodeWidget : public QWidget
{
    Q_OBJECT

public:
    explicit VerifyCodeWidget(QWidget *parent = nullptr);

    // 通过这个函数, 生成随机的验证码字符串
    QString generateVerifyCode();

    // 重新生成验证码并显示到界面上
    void refreshVerifyCode();

    // 检验验证码是否匹配
    bool checkVerifyCode(const QString& verifyCode);

    void paintEvent(QPaintEvent* event) override;

    // 用户点击的时候, 刷新验证码, 并重新显示.
    void mousePressEvent(QMouseEvent* event) override;

private:
    // 随机数生成器
    QRandomGenerator randomGenerator;

    // 保存验证码的值
    QString verifyCode = "";

signals:
};

（2）生成验证码核心逻辑：

生成随机字符串。
按照随机的颜色和位置绘制。
引入噪点和噪线。

cpp 复制代码

VerifyCodeWidget::VerifyCodeWidget(QWidget *parent)
    : QWidget(parent)
{
    verifyCode = generateVerifyCode();
}

QString VerifyCodeWidget::generateVerifyCode()
{
    QString code;
    for(int i = 0; i < 4; i++)
    {
        int init = 'A';
        init += randomGenerator.generate() % 26;
        code += static_cast<QChar>(init);
    }

    return code;
}

void VerifyCodeWidget::refreshVerifyCode()
{
    verifyCode = generateVerifyCode();

    // 通过 update 就可以起到 "刷新界面" , 本身就是触发 paintEvent
    this->update();
}

bool VerifyCodeWidget::checkVerifyCode(const QString& verifyCode)
{
    // 此处比较验证码的时候, 需要忽略大小写.
    return this->verifyCode.compare(verifyCode, Qt::CaseInsensitive) == 0;
}

void VerifyCodeWidget::paintEvent(QPaintEvent *event)
{
    (void) event;
    const int width = 180;
    const int height = 80;

    QPainter painter(this);
    QPen pen;
    QFont font("楷体",25,QFont::Bold,true);
    painter.setFont(font);

    // 画点: 添加随机噪点
    for(int i = 0; i < 100; i++)
    {
        pen = QPen(QColor(randomGenerator.generate() % 256, randomGenerator.generate() % 256, randomGenerator.generate() % 256));
        painter.setPen(pen);
        painter.drawPoint(randomGenerator.generate() % width, randomGenerator.generate() % height);
    }

    // 画线: 添加随机干扰线
    for(int i = 0; i < 5; i++)
    {
        pen = QPen(QColor(randomGenerator.generate() % 256, randomGenerator.generate() % 256, randomGenerator.generate() % 256));
        painter.setPen(pen);
        painter.drawLine(randomGenerator.generate() % width, randomGenerator.generate() % height,
                         randomGenerator.generate() % width, randomGenerator.generate() % height);
    }

    // 绘制验证码
    for(int i = 0; i < verifyCode.size(); i++)
    {
        pen = QPen(QColor(randomGenerator.generate() % 255, randomGenerator.generate() % 255, randomGenerator.generate() % 255));
        painter.setPen(pen);
        painter.drawText(5+20*i, randomGenerator.generate() % 10, 30, 30, Qt::AlignCenter, QString(verifyCode[i]));
    }
}

void VerifyCodeWidget::mousePressEvent(QMouseEvent *event)
{
    (void) event;
    this->refreshVerifyCode();
}

6.2 登录逻辑

（1）客户端发送请求：

在 LoginWidget 构造函数中注册信号槽：

cpp 复制代码

connect(submitBtn, &QPushButton::clicked, this, &LoginWidget::clickSubmitBtn);

实现 LoginWidget::clickSubmitBtn函数：

cpp 复制代码

void LoginWidget::clickSubmitBtn()
{
    // 1. 先从输入框拿到必要的内容
    const QString& username = usernameEdit->text();
    const QString& password = passwordEdit->text();
    const QString& verifyCode = verifyCodeEdit->text();
    if(username.isEmpty())
    {
        Toast::showMessage("用户名不能为空!");
        return;
    }

    if(password.isEmpty())
    {
        Toast::showMessage("密码不能为空!");
        return;
    }

    if(verifyCode.isEmpty())
    {
        Toast::showMessage("验证码不能为空!");
        return;
    }

    // 2. 对比验证码是否正确
    if(!verifyCodeWidget->checkVerifyCode(verifyCode))
    {
        Toast::showMessage("验证码不正确!");
        return;
    }

    // 3. 真正去发送网络请求.
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    if(isLoginMode)
    {
        // 登录
        connect(dataCenter, &model::DataCenter::userLoginDone, this, &LoginWidget::userLoginDone);
        dataCenter->userLoginAsync(username, password);
    }
    else
    {
        // 注册
        connect(dataCenter, &model::DataCenter::userRegisterDone, this, &LoginWidget::userRegisterDone);
        dataCenter->userRegisterAsync(username, password);
    }
}

实现 DataCenter::userLoginAsync函数：

cpp 复制代码

void DataCenter::userLoginAsync(const QString &username, const QString &password)
{
 	netClient.userLogin(username, password);
}

实现 NetClient::userLogin函数和接口定义：

cpp 复制代码

//⽤⼾名登录
message UserLoginReq {
 	string request_id = 1;
 	string nickname = 2;
 	string password = 3;
 	string verify_code_id = 4;
 	string verify_code = 5;
}
message UserLoginRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3;
 	string login_session_id = 4;
}

// 函数实现
void NetClient::userLogin(const QString& username, const QString& password)
{
    // 1. 构造请求 body
    bite_im::UserLoginReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setNickname(username);
    pbReq.setPassword(password);
    pbReq.setVerifyCodeId("");
    pbReq.setVerifyCode("");
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[用户名登录] 发送请求 requestId=" << pbReq.requestId() << ", username=" << pbReq.nickname() << ", password=" << pbReq.password();

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/user/username_login", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应内容
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::UserLoginRsp>(resp, &ok, &reason);

        // b) 判定响应结果是否正确
        if(!ok)
        {
            LOG() << "[用户名登录] 处理失败 reason=" << reason;
            emit dataCenter->userLoginDone(false, reason);
            return;
        }

        // c) 记录一下当前返回的数据
        dataCenter->resetLoginSessionId(pbResp->loginSessionId());

        // d) 发送信号, 通知调用者, 处理完毕了.
        emit dataCenter->userLoginDone(true, "");

        // e) 打印日志
        LOG() << "[用户名登录] 处理响应 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

实现 DataCenter::resetLoginSessionId函数：

cpp 复制代码

void DataCenter::resetLoginSessionId(const QString &loginSessionId)
{
 	this->loginSessionId = loginSessionId;
 	saveDataFile();
}

定义 DataCenter 信号：

cpp 复制代码

// 用户名登录完成, 参数表⽰成功失败
void userLoginDone(bool ok, const QString reason);

处理 userLoginDone 信号和实现 LoginWidget::userLoginDone函数：

cpp 复制代码

void LoginWidget::userLoginDone(bool ok, const QString& reason)
{
    // 此处区分一下是否登录成功.
    // 登录失败, 给用户反馈失败原因.
    if(!ok)
    {
        Toast::showMessage("登录失败! " + reason);
        return;
    }

    // 登录成功, 需要跳转到主界面.
    MainWidget* mainWidget = MainWidget::getInstance();
    mainWidget->show();

    this->close();
}

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/user/username_login", [=](const QHttpServerRequest& req) 
{
 	return this->usernameLogin(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::usernameLogin(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::UserLoginReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 用户名密码登录] requestId=" << pbReq.requestId() << ", username=" << pbReq.nickname()
          << ", password=" << pbReq.password();

    // 构造响应 body
    bite_im::UserLoginRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");
    pbResp.setLoginSessionId("testLoginSessionId");
    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

6.3 注册逻辑

（1）客户端发送请求：

在LoginWidget::clickSubmitBtn当中调用注册逻辑后实现 DataCenter::userRegisterAsync函数：

cpp 复制代码

void DataCenter::userRegisterAsync(const QString &username, const QString &password)
{
 	netClient.userRegister(username, password);
}

实现 NetClient::userRegister函数和接口定义：

cpp 复制代码

//⽤⼾名注册 
message UserRegisterReq {
 	string request_id = 1;
 	string nickname = 2;
 	string password = 3;
 	string verify_code_id = 4;
 	string verify_code = 5;
}
message UserRegisterRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3;
}

// 函数实现
void NetClient::userRegister(const QString& username, const QString& password)
{
    // 1. 构造请求 body
    bite_im::UserRegisterReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setNickname(username);
    pbReq.setPassword(password);
    pbReq.setVerifyCodeId("");
    pbReq.setVerifyCode("");
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[用户名注册] 发送请求 requestId=" << pbReq.requestId() << ", username=" << pbReq.nickname() << ", password=" << pbReq.password();

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/user/username_register", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应 body
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::UserRegisterRsp>(resp, &ok, &reason);

        // b) 判定响应结果是否正确
        if(!ok)
        {
            LOG() << "[用户名注册] 响应失败! reason=" << reason;
            emit dataCenter->userRegisterDone(false, reason);
            return;
        }

        // c) 把返回的数据保存到 DataCenter 中
        // 对于注册来说, 不需要保存任何信息, 直接跳过这个环节.

        // d) 通知调用者响应处理完成
        emit dataCenter->userRegisterDone(true, "");

        // e) 打印日志
        LOG() << "[用户名注册] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

定义 DataCenter 信号：

cpp 复制代码

// 用户名注册完成, 参数表⽰成功失败
void userRegisterDone(bool ok, const QString reason);

实现 LoginWidget::userRegisterDone函数：

cpp 复制代码

void LoginWidget::userRegisterDone(bool ok, const QString& reason)
{
    if(!ok)
    {
        Toast::showMessage("注册失败! " + reason);
        return;
    }

    Toast::showMessage("注册成功! " + reason);

    // 切换到登录界面
    this->switchMode();

    // 输入框清空一下.
    // 主要是要清空用户名和密码, 验证码输入框的内容的.
    // 但是此处, 只清空一下验证码. 用户名密码这里的情况大概率还是同样的内容.
    verifyCodeEdit->clear();

    // 更新验证码
    verifyCodeWidget->refreshVerifyCode();
}

（3）实现服务器逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/user/username_register", [=](const QHttpServerRequest& req) 
{
 	return this->usernameRegister(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::usernameRegister(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::UserRegisterReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 用户名密码注册] requestId=" << pbReq.requestId() << ", username=" << pbReq.nickname()
          << ", password=" << pbReq.password();

    // 构造响应 body
    bite_im::UserRegisterRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");
    QString body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

7. 手机号登录/注册界面

7.1 获取短信验证

（1）直接调用之前封装好的接口即可。客户端发送请求：

在 PhoneLoginWidget 构造函数中连接信号槽：

cpp 复制代码

connect(sendVerifyCodeBtn, &QPushButton::clicked, this, &PhoneLoginWidget::sendVerifyCode);

实现 PhoneLoginWidget::sendVerifyCode函数：

cpp 复制代码

void PhoneLoginWidget::sendVerifyCode()
{
    // 1. 获取到手机号码
    const QString phone = this->phoneEdit->text();
    if(phone.isEmpty())
    {
        return;
    }

    this->currentPhone = phone;

    // 2. 发送网络请求, 获取验证码
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::getVerifyCodeDone, this, &PhoneLoginWidget::sendVerifyCodeDone, Qt::UniqueConnection);
    dataCenter->getVerifyCodeAsync(phone);

    // 3. 开启定时器, 开始倒计时
    timer->start(1000);
}

实现 DataCenter::getVerifyCodeAsync函数：前面已经实现过。

（2）客户端处理响应：

实现 PhoneLoginWidget::sendVerifyCodeDone函数：

cpp 复制代码

void PhoneLoginWidget::sendVerifyCodeDone()
{
 	// 给出提⽰即可
 	Toast::showMessage("验证码请求已发送!");
}

（3）服务器实现逻辑：前面已经实现过。

7.2 登录逻辑

（2）客户端发送请求：

在 PhoneLoginWidget 构造函数中连接信号槽：

cpp 复制代码

connect(submitBtn, &QPushButton::clicked, this, &PhoneLoginWidget::clickSubmitBtn);

实现 PhoneLoginWidget::clickSubmitBtn 处理函数：

cpp 复制代码

void PhoneLoginWidget::clickSubmitBtn()
{
    const QString& phone = phoneEdit->text();
    const QString& verifyCode = verifyCodeEdit->text();
    if(phone.isEmpty())
    {
        Toast::showMessage("电话不应该为空");
        return;
    }

    if(verifyCode.isEmpty())
    {
        Toast::showMessage("验证码不应该为空");
        return;
    }

    // 2. 发送请求
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    if(isLoginMode)
    {
        // 登录
        connect(dataCenter, &model::DataCenter::phoneLoginDone, this, &PhoneLoginWidget::phoneLoginDone, Qt::UniqueConnection);
        dataCenter->phoneLoginAsync(phone, verifyCode);
    }
    else
    {
        // 注册
        connect(dataCenter, &model::DataCenter::phoneRegisterDone, this, &PhoneLoginWidget::phoneRegisterDone, Qt::UniqueConnection);
        dataCenter->phoneRegisterAsync(phone, verifyCode);
    }
}

实现 DataCenter::phoneLoginAsync函数：

cpp 复制代码

void DataCenter::phoneLoginAsync(const QString &phone, const QString &verifyCode)
{
 	netClient.phoneLogin(phone, verifyCode);
}

实现 NetClient::phoneLogin函数和接口定义：

cpp 复制代码

//⼿机号登录
message PhoneLoginReq {
 	string request_id = 1;
 	string phone_number = 2;
 	string verify_code_id = 3;
 	string verify_code = 4;
}
message PhoneLoginRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	string login_session_id = 4;
}

// 函数实现
void NetClient::phoneLogin(const QString &phone, const QString &verifyCodeId, const QString &verifyCode)
{
    // 1. 构造请求 body
    bite_im::PhoneLoginReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setPhoneNumber(phone);
    pbReq.setVerifyCodeId(verifyCodeId);
    pbReq.setVerifyCode(verifyCode);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[手机号登录] 发送请求 requestId=" << pbReq.requestId() << ", phone=" << pbReq.phoneNumber()
          << ", verifyCodeId=" << pbReq.verifyCodeId() << ", verifyCode=" << pbReq.verifyCode();

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/user/phone_login", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::PhoneLoginRsp>(resp, &ok, &reason);

        // b) 判定响应是否成功
        if(!ok)
        {
            LOG() << "[手机号登录] 响应出错! reason=" << reason;
            emit dataCenter->phoneLoginDone(false, reason);
            return;
        }

        // c) 把响应结果记录到 DataCenter
        dataCenter->resetLoginSessionId(pbResp->loginSessionId());

        // d) 发送信号
        emit dataCenter->phoneLoginDone(true, "");

        // e) 打印日志
        LOG() << "[手机号登录] 响应完毕 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

实现 DataCenter::resetLoginSessionId函数：前面已经实现过了。
定义 DataCenter 信号：

cpp 复制代码

// 电话登录完成, 参数表⽰成功失败
void phoneLoginDone(bool ok, const QString reason);

实现 PhoneLoginWidget::phoneLoginDone函数：

cpp 复制代码

void PhoneLoginWidget::phoneLoginDone(bool ok, const QString& reason)
{
    if(!ok)
    {
        Toast::showMessage("登录失败! " + reason);
        return;
    }

    // 跳转到主窗口
    MainWidget* mainWidget = MainWidget::getInstance();
    mainWidget->show();

    // 关闭自己
    this->close();
}

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/user/phone_login", [=](const QHttpServerRequest& req) 
{
 	return this->phoneLogin(req);
});

实现处理逻辑：

cpp 复制代码

QHttpServerResponse HttpServer::phoneLogin(const QHttpServerRequest &req)
{
    // 解析请求
    bite_im::PhoneLoginReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 手机号登录] requestId=" << pbReq.requestId() << ", phone=" << pbReq.phoneNumber()
          << ", verifyCodeId=" << pbReq.verifyCodeId() << ", verifyCode=" << pbReq.verifyCode();

    // 构造响应
    bite_im::PhoneLoginRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");
    pbResp.setLoginSessionId("testLoginSessionId");
    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

7.3 注册逻辑

（1）客户端发送请求：

实现 DataCenter::phoneRegisterAsync函数：

cpp 复制代码

void DataCenter::phoneRegisterAsync(const QString& phone, const QString& verifyCode)
{
    netClient.phoneRegister(phone, currentVerifyCodeId, verifyCode);
}

实现 NetClient::phoneRegister函数：

cpp 复制代码

void NetClient::phoneRegister(const QString &phone, const QString &verifyCodeId, const QString &verifyCode)
{
    // 1. 构造请求 body
    bite_im::PhoneRegisterReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setPhoneNumber(phone);
    pbReq.setVerifyCodeId(verifyCodeId);
    pbReq.setVerifyCode(verifyCode);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[手机号注册] 发送请求 requestId=" << pbReq.requestId() << ", phone=" << pbReq.phoneNumber()
          << ", verifyCodeId=" << pbReq.verifyCodeId() << ", verifyCode=" << pbReq.verifyCode();

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/user/phone_register", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::PhoneRegisterRsp>(resp, &ok, &reason);

        // b) 判定响应是否成功
        if(!ok)
        {
            LOG() << "[手机号注册] 响应失败! reason=" << reason;
            emit dataCenter->phoneRegisterDone(false, reason);
            return;
        }

        // c) 让 DataCenter 记录结果, 注册操作不需要记录

        // d) 发送信号
        emit dataCenter->phoneRegisterDone(true, "");

        // e) 打印日志
        LOG() << "[手机号注册] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

定义 DataCenter 信号

cpp 复制代码

// 电话注册完成, 参数表⽰成功失败
void phoneRegisterDone(bool ok, const QString reason);

处理 phoneRegisterDone 信号。实现 PhoneLoginWidget::phoneRegisterDone函数：

cpp 复制代码

void PhoneLoginWidget::phoneRegisterDone(bool ok, const QString& reason)
{
    if(!ok)
    {
        Toast::showMessage("注册失败! " + reason);
        return;
    }

    Toast::showMessage("注册成功!");
    // 跳转到登录界面
    switchMode();

    // 清空一下输入框
    verifyCodeEdit->clear();

    // 处理一下倒计时的按钮
    leftTime = 1;
}

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/user/phone_register", [=](const QHttpServerRequest& req) 
{
 	return this->phoneRegister(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::phoneRegister(const QHttpServerRequest &req)
{
    // 解析请求
    bite_im::PhoneRegisterReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 手机号注册] requestId=" << pbReq.requestId() << ", phone=" << pbReq.phoneNumber()
          << ", verifyCodeId=" << pbReq.verifyCodeId() << ", verifyCode=" << pbReq.verifyCode();

    // 构造响应 body
    bite_im::PhoneRegisterRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");
    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    return resp;
}

8. 聊天界面逻辑 (2)

8.1 异步获取文件内容

（1）客户端发送请求：

如果 content 为空 (比如这个消息是服务器推送来的)，还需要异步的从服务器获取到图片内容。实现 DataCenter::getSingleFileAsync函数：

cpp 复制代码

void DataCenter::getSingleFileAsync(const QString &fileId)
{
 	netClient.getSingleFile(loginSessionId, fileId);
}

实现 NetClient::getSingleFile函数和接口定义：

cpp 复制代码

message GetSingleFileReq {
 	string request_id = 1;
 	string file_id = 2;
 	optional string user_id = 3;
 	optional string session_id = 4;
}
message GetSingleFileRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	FileDownloadData file_data = 4;
}
message FileDownloadData {
 	string file_id = 1;
 	bytes file_content = 2;
}

// 函数实现
void NetClient::getSingleFile(const QString &loginSessionId, const QString &fileId)
{
    // 1. 构造请求 body
    bite_im::GetSingleFileReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setFileId(fileId);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[获取文件内容] 发送请求 requestId=" << pbReq.requestId() << ", fileId=" << fileId;

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/file/get_single_file", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::GetSingleFileRsp>(resp, &ok, &reason);

        // b) 判定响应结果
        if(!ok)
        {
            LOG() << "[获取文件内容] 响应失败 reason=" << reason;
            return;
        }

        // c) 响应结果保存下来. 之前都是把结果保存到 DataCenter 的.
        //    这里涉及到的文件可能会很多. 不使用 DataCenter 保存.
        //    直接通过信号把文件数据, 投送到调用者的位置上.

        // d) 发送信号
        emit dataCenter->getSingleFileDone(fileId, pbResp->fileData().fileContent());

        // e) 打印日志
        LOG() << "[获取文件内容] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端响应：会在接下来的图片消息/文件消息/语音消息中分别实现。

（3）服务器实现逻辑：

注册路由：

cpp 复制代码

httpServer.route("/service/file/get_single_file", [=](const QHttpServerRequest& req) 
{
 	return this->getSingleFile(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::getSingleFile(const QHttpServerRequest& req)
{
    // 解析请求
    bite_im::GetSingleFileReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 获取单个文件] requestId=" << pbReq.requestId() << ", fileId=" << pbReq.fileId();

    // 构造响应 body
    bite_im::GetSingleFileRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");

    bite_im::FileDownloadData fileDownloadData;
    fileDownloadData.setFileId(pbReq.fileId());
    // 此处后续要能够支持三个情况, 图片文件, 普通文件, 语音文件.
    // 直接使用 fileId 做区分
    if(pbReq.fileId() == "testImage")
    {
        fileDownloadData.setFileContent(loadFileToByteArray(":/resource/image/logo.png"));
        // fileDownloadData.setFileContent(loadFileToByteArray(":/resource/image/defaultAvatar.png"));
    }
    else if(pbReq.fileId() == "testFile")
    {
        fileDownloadData.setFileContent(loadFileToByteArray(":/resource/file/test.txt"));
    }
    else if(pbReq.fileId() == "testSpeech")
    {
        // 由于此处暂时还没有音频文件. 得后面写了 录音功能 才能生成.
        fileDownloadData.setFileContent(loadFileToByteArray(":/resource/file/speech.pcm"));
    }
    else
    {
        pbResp.setSuccess(false);
        pbResp.setErrmsg("fileId 不是预期的测试 fileId");
    }

    pbResp.setFileData(fileDownloadData);

    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

8.2 图片消息的实现

（1）客户端发送请求：

在 MessageEditArea::initSignalSlot 中连接信号槽：

cpp 复制代码

// 4. 关联 "发送图片" 信号槽
connect(sendImageBtn, &QPushButton::clicked, this, &MessageEditArea::clickSendImageBtn);

实现 MessageEditArea::clickSendImageBtn函数：

cpp 复制代码

void MessageEditArea::clickSendImageBtn()
{
    model::DataCenter* dataCenter = model::DataCenter::getInstance();

    // 1. 判定当前是否有选中的会话
    if(dataCenter->getCurrentChatSessionId().isEmpty())
    {
        // 没有选中会话
        Toast::showMessage("您尚未选择任何会话, 不能发送图片!");
        return;
    }

    // 2. 弹出文件对话框
    QString filter = "Image Files (*.png *.jpg *.jpeg)";
    QString imagePath = QFileDialog::getOpenFileName(this, "选择图片", QDir::homePath(), filter);
    if(imagePath.isEmpty())
    {
        LOG() << "用户取消选择图片";
        return;
    }

    // 3. 读取图片的内容
    QByteArray imageContent = model::loadFileToByteArray(imagePath);

    // 4. 发送请求
    dataCenter->sendImageMessageAsync(dataCenter->getCurrentChatSessionId(), imageContent);
}

实现 DataCenter::sendImageMessageAsync函数：

cpp 复制代码

void DataCenter::sendImageMessageAsync(const QString &chatSessionId, const QByteArray &content)
{
 	netClient.sendMessage(loginSessionId, chatSessionId, MessageType::IMAGE_TYPE, content);
}

（2）客户端处理响应：发送消息之后，服务器的相应最终会通过信号槽，调用到 addSelfMessage。此处重点是在 addSelfMessage 中MessageShowArea::addMessage 内部对图片消息的适配

实现 MessageShowArea 中的 MessageImageLabel类：

cpp 复制代码

class MessageImageLabel : public QWidget
{
    Q_OBJECT

public:
    MessageImageLabel(const QString& fileId, const QByteArray& content, bool isLeft);

    void updateUI(const QString& fileId, const QByteArray& content);
    void paintEvent(QPaintEvent* event);

private:
    QPushButton* imageBtn;

    QString fileId;  		// 该图片在服务器对应的文件 id.
    QByteArray content;		// 图片的二进制数据
    bool isLeft;
};

// 具体实现
MessageImageLabel::MessageImageLabel(const QString& fileId, const QByteArray& content, bool isLeft)
    :fileId(fileId)
    ,content(content)
    ,isLeft(isLeft)
{
    this->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    imageBtn = new QPushButton(this);
    imageBtn->setStyleSheet("QPushButton { border: none; }");

    if(content.isEmpty())
    {
        // 此处这个控件, 是针对 "从服务器拿到图片消息" 这种情况.
        // 拿着 fileId, 去服务器获取图片内容
        model::DataCenter* dataCenter = model::DataCenter::getInstance();
        connect(dataCenter, &model::DataCenter::getSingleFileDone, this, &MessageImageLabel::updateUI);
        dataCenter->getSingleFileAsync(fileId);
    }
}

void MessageImageLabel::updateUI(const QString& fileId, const QByteArray& content)
{
    if(this->fileId != fileId)
    {
        // 没对上 fileId, 当前响应的图片是其他的 图片消息 请求的.
        return;
    }

    // 对上了, 真正显示图片内容
    this->content = content;

    // 进行绘制图片到界面上的操作.
    this->update();
}

void MessageImageLabel::paintEvent(QPaintEvent* event)
{
    (void)event;

    // 1. 先拿到该元素的父元素, 看父元素的宽度是多少.
    //    此处显示的图片宽度的上限 父元素宽度的 60% .
    QObject* object = this->parent();
    if(!object->isWidgetType())
    {
        // 这个逻辑理论上来说是不会存在的.
        return;
    }

    QWidget* parent = dynamic_cast<QWidget*>(object);
    int width = parent->width() * 0.6;

    // 2. 加载二进制数据为图片对象
    QImage image;
    if(content.isEmpty())
    {
        // 此时图片的响应数据还没回来.
        // 此处先拿一个 "固定默认图片" 顶替一下.
        QByteArray tmpContent = model::loadFileToByteArray(":/resource/image/image.png");
        image.loadFromData(tmpContent);
    }
    else
    {
        // 此处的 load 操作 QImage 能够自动识别当前图片是啥类型的 (png, jpg....)
        image.loadFromData(content);
    }

    // 3. 针对图片进行缩放.
    int height = 0;
    if(image.width() > width)
    {
        // 发现图片更宽, 就需要把图片缩放一下, 使用 width 作为实际的宽度
        // 等比例缩放.
        height = ((double)image.height() / image.width()) * width;
    }
    else
    {
        // 图片本身不太宽, 不需要缩放.
        width = image.width();
        height = image.height();
    }

    // pixmap 只是一个中间变量. QImage 不能直接转成 QIcon, 需要 QPixmap 中转一下
    QPixmap pixmap = QPixmap::fromImage(image);
    // imageBtn->setFixedSize(width, height);
    imageBtn->setIconSize(QSize(width, height));
    imageBtn->setIcon(QIcon(pixmap));

    // 4. 由于图片高度是计算算出来的. 该元素的父对象的高度, 能够容纳下当前的元素.
    //    此处 + 50 是为了能够容纳下 上方的 "名字" 部分. 同时留下一点 冗余 空间.
    parent->setFixedHeight(height + 50);

    // 5. 确定按钮所在的位置.
    //    左侧消息, 和右侧消息, 要显示的位置是不同的.
    if(isLeft)
    {
        imageBtn->setGeometry(10, 0, width, height);
    }
    else
    {
        int leftPos = this->width() - width - 10;
        imageBtn->setGeometry(leftPos, 0, width, height);
    }
}

（3）服务器实现逻辑：

在界面上添加按钮"发送图片消息"并实现槽函数：

cpp 复制代码

void Widget::on_pushButton_7_clicked()
{
 	WebsocketServer* websocketServer = WebsocketServer::getInstance();
 	emit websocketServer->sendImageResp();
}

定义 WebsocketServer 信号：

cpp 复制代码

void sendImageResp();

在 websocket 逻辑中, 添加发送图片逻辑：

cpp 复制代码

connect(this, &WebsocketServer::sendImageResp, this, [=]()
{
	// 此处就可以捕获到 socket 对象, 从而可以通过 socket 对象给客户端返回数据.
	if(socket == nullptr || !socket->isValid())
	{
		LOG() << "socket 对象无效!";
		return;
	}
	// 构造响应数据
	QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
	bite_im::MessageInfo messageInfo = makeImageMessageInfo(this->messageIndex++, "2000", avatar);

	bite_im::NotifyNewMessage notifyNewMessage;
	notifyNewMessage.setMessageInfo(messageInfo);

	bite_im::NotifyMessage notifyMessage;
	notifyMessage.setNotifyEventId("");
	notifyMessage.setNotifyType(bite_im::NotifyTypeGadget::NotifyType::CHAT_MESSAGE_NOTIFY);
	notifyMessage.setNewMessageInfo(notifyNewMessage);

	// 序列化
	QByteArray body = notifyMessage.serialize(&this->serializer);

	// 发送消息给客户端
	socket->sendBinaryMessage(body);
	LOG() << "发送图片消息响应";
});

在断开 websocket 连接的逻辑中断开上述信号槽

cpp 复制代码

disconnect(this, &WebsocketServer::sendImageResp, this, nullptr);

8.3 文件消息的实现

（1）客户端发送请求：

在 MessageEditArea::initSignalSlot 添加信号槽

cpp 复制代码

// 处理点击发送⽂件
connect(sendFileBtn, &QPushButton::clicked, this, &MessageEditArea::clickSendFileBtn);

实现 MessageEditArea::clickSendFileBtn函数：

cpp 复制代码

void MessageEditArea::clickSendFileBtn()
{
    model::DataCenter* dataCenter = model::DataCenter::getInstance();

    // 1. 判定当前是否有选中的会话
    if(dataCenter->getCurrentChatSessionId().isEmpty())
    {
        // 没有选中会话
        Toast::showMessage("您尚未选择任何会话, 不能发送图片!");
        return;
    }

    // 2. 弹出文件对话框
    QString filter = "*";
    QString path = QFileDialog::getOpenFileName(this, "选择文件", QDir::homePath(), filter);
    if(path.isEmpty())
    {
        // 如果用户弹框之后, 没有真正选择文件, 而是取消了. 返回值就是 ""
        LOG() << "用户取消选择文件";
        return;
    }

    // 3. 读取文件内容
    //    此处暂时不考虑大文件的情况
    //    比如有的文件, 几百 MB, 或者几个 GB.
    //    如果是针对大文件的话, 编写专门的网络通信接口, 实现 "分片传输" 效果.
    QByteArray content = model::loadFileToByteArray(path);

    // 4. 传输文件, 还需要获取到 文件名
    QFileInfo fileInfo(path);
    const QString& fileName = fileInfo.fileName();

    // 5. 发送消息
    dataCenter->sendFileMessageAsync(dataCenter->getCurrentChatSessionId(), fileName, content);
}

实现 DataCenter::sendFileMessageAsync函数：

cpp 复制代码

void DataCenter::sendFileMessageAsync(const QString &chatSessionId, constQString &fileName, const QByteArray &content)
{
	netClient.sendMessage(loginSessionId, chatSessionId, MessageType::FILE_TYPE, content, fileName);
}

（2）客户端处理响应：发送消息之后服务器的相应最终会通过信号槽，调用到 addSelfMessage。此处重点是在 addSelfMessage 中MessageShowArea::addMessage 内部对文件消息的适配。

在 MessageContentLabel 构造函数中添加逻辑，异步加载文件内容：

cpp 复制代码

// 针对文件消息, 并且 content 为空的情况下, 通过网络来加载数据
if(messageType == model::TEXT_TYPE)
{
	return;
}

if(this->content.isEmpty())
{
	model::DataCenter* dataCenter = model::DataCenter::getInstance();
	connect(dataCenter, &model::DataCenter::getSingleFileDone, this, &MessageContentLabel::updateUI);
	dataCenter->getSingleFileAsync(this->fileId);
}
else
{
	// content 不为空, 说明当前的这个数据就是已经现成. 直接就把 表示加载状态的变量设为 true
	this->loadContentDone = true;
}

实现 MessageContentLabel::updateUI函数：

cpp 复制代码

void MessageContentLabel::updateUI(const QString& fileId, const QByteArray& fileContent)
{
    // 也和刚才图片消息的处理一样, 就需要判定收到的数据属于哪个 fileId 的.
    if(fileId != this->fileId)
    {
        return;
    }

    this->content = fileContent;
    this->loadContentDone = true;

    // 对于文件消息来说, 要在界面上显示 "[文件] test.txt" 这样形式. 这个内容和文件 content 无关.
    // 在从服务器拿到文件正文之前, 界面内容应该就是绘制好了. 此时拿到正文之后, 界面应该也不必做出任何实质性的调整.
    // 所以下列的 this->update(), 没有也行.
    this->update();
}

实现鼠标左键点击文件消息，触发文件另存为：

cpp 复制代码

void MessageContentLabel::mousePressEvent(QMouseEvent* event)
{
    // 实现鼠标点击之后, 触发文件另存为
    if(event->button() == Qt::LeftButton)
    {
        if(this->messageType == model::MessageType::FILE_TYPE)
        {
            // 真正触发另存为
            if(!this->loadContentDone)
            {
                Toast::showMessage("数据尚未加载成功, 请稍后重试");
                return;
            }

            saveAsFile(this->content);
        }
        else if(this->messageType == model::MessageType::SPEECH_TYPE)
        {
            // 语言处理
        }
    }
}

void MessageContentLabel::saveAsFile(const QByteArray& content)
{
    // 弹出对话框, 让用户选择路径
    QString filePath = QFileDialog::getSaveFileName(this, "另存为", QDir::homePath(), "*");
    if(filePath.isEmpty())
    {
        LOG() << "用户取消了文件另存为";
        return;
    }

    model::writeByteArrayToFile(filePath, content);
}

（3）服务器实现逻辑：

在界面上添加按钮，"发送⽂件消息"并实现槽函数：

cpp 复制代码

void Widget::on_pushButton_8_clicked()
{
 	WebsocketServer* websocketServer = WebsocketServer::getInstance();
 	emit websocketServer->sendFileResp();
}

定义 WebsocketServer 信号：

cpp 复制代码

void sendFileResp();

在 websocket 逻辑中，添加发送文件逻辑：

cpp 复制代码

connect(this, &WebsocketServer::sendFileResp, this, [=]()
{
	// 此处就可以捕获到 socket 对象, 从而可以通过 socket 对象给客户端返回数据.
	if(socket == nullptr || !socket->isValid())
	{
		LOG() << "socket 对象无效!";
		return;
	}
	// 构造响应数据
	QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
	bite_im::MessageInfo messageInfo = makeFileMessageInfo(this->messageIndex++, "2000", avatar);

	bite_im::NotifyNewMessage notifyNewMessage;
	notifyNewMessage.setMessageInfo(messageInfo);
	bite_im::NotifyMessage notifyMessage;
	notifyMessage.setNotifyEventId("");
	notifyMessage.setNotifyType(bite_im::NotifyTypeGadget::NotifyType::CHAT_MESSAGE_NOTIFY);
	notifyMessage.setNewMessageInfo(notifyNewMessage);

	// 序列化
	QByteArray body = notifyMessage.serialize(&this->serializer);

	// 发送消息给客户端
	socket->sendBinaryMessage(body);

	LOG() << "发送文件消息响应";
});

// 构造⼀个⽂件消息对象
bite_im::MessageInfo makeFileMessageInfo(int index, const QString& chatSessionId, const QByteArray& avatar)
{
    bite_im::MessageInfo messageInfo;
    messageInfo.setMessageId(QString::number(3000 + index));
    messageInfo.setChatSessionId(chatSessionId);
    messageInfo.setTimestamp(getTime());
    messageInfo.setSender(makeUserInfo(index, avatar));

    bite_im::FileMessageInfo fileMessageInfo;
    fileMessageInfo.setFileId("testFile");
    // 真实服务器推送的消息数据里, 本身也就不带图片的正文. 只是 fileId.
    // 需要通过 fileId, 二次发起请求, 通过 getSingleFile 接口来获取到内容.
    fileMessageInfo.setFileName("test.txt");
    // 此处文件大小, 无法设置. 由于 fileSize 属性, 不是 optional , 此处先设置一个 0 进来
    fileMessageInfo.setFileSize(0);

    bite_im::MessageContent messageContent;
    messageContent.setMessageType(bite_im::MessageTypeGadget::MessageType::FILE);
    messageContent.setFileMessage(fileMessageInfo);
    messageInfo.setMessage(messageContent);
    return messageInfo;
}

在 websocket 断开连接时释放信号槽：

cpp 复制代码

disconnect(this, &WebsocketServer::sendFileResp, this, nullptr);

8.4 语音消息的实现

（1）录制语音：Qt 录制语音提供两个方案：

QMediaRecorder
QAudioSource

其中 QMediaRecorder 方案是 Qt6 新增方案，目前使用体验感觉存在⼀些不好处理的 bug (比如设置采样率，声道等参数不生效)。因此我们使用 QAudioSource 实现。考虑到语音识别需求，需要使咱们录制的声音符合百度语音识别 SDK 的要求。

（2）创建 SoundRecorder 类以及实现。录制的语音文件是 pcm 格式的原始音频数据。还不能通过第三方播放器播放。只能通过下列代码来实现播放功能。所以以下是语音的录制和播放：

cpp 复制代码

class SoundRecorder : public QObject
{
    Q_OBJECT
public:
    const QString RECORD_PATH = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation) + "/sound/tmpRecord.pcm";
    const QString PLAY_PATH = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation) + "/sound/tmpPlay.pcm";

public:
    static SoundRecorder* getInstance();

    /
    /// 录制语音语音
    /
    // 开始录制
    void startRecord();
    // 停止录制
    void stopRecord();

private:
    static SoundRecorder* instance;
    explicit SoundRecorder(QObject *parent = nullptr);

    QFile soundFile;
    QAudioSource* audioSource;

    /
    /// 播放语音
    /
public:
    // 开始播放
    void startPlay(const QByteArray& content);
    // 停止播放
    void stopPlay();

private:
    QAudioSink *audioSink;
    QMediaDevices *outputDevices;
    QAudioDevice outputDevice;
    QFile inputFile;

signals:
    // 录制完毕后发送这个信号
    void soundRecordDone(const QString& path);
    // 播放完毕发送这个信号
    void soundPlayDone();

};

// 具体实现
/
/// 单例模式
/
SoundRecorder* SoundRecorder::instance = nullptr;

SoundRecorder *SoundRecorder::getInstance()
{
    if (instance == nullptr)
    {
        instance = new SoundRecorder();
    }

    return instance;
}

// 播放参考 https://www.cnblogs.com/tony-yang-flutter/p/16477212.html
// 录制参考 https://doc.qt.io/qt-6/qaudiosource.html
SoundRecorder::SoundRecorder(QObject *parent)
    : QObject{parent}
{
    // 1. 创建目录
    QDir soundRootPath(QStandardPaths::writableLocation(QStandardPaths::AppDataLocation));
    soundRootPath.mkdir("sound");

    // 2. 初始化录制模块
    soundFile.setFileName(RECORD_PATH);

    QAudioFormat inputFormat;
    inputFormat.setSampleRate(16000);
    inputFormat.setChannelCount(1);
    inputFormat.setSampleFormat(QAudioFormat::Int16);

    QAudioDevice info = QMediaDevices::defaultAudioInput();
    if (!info.isFormatSupported(inputFormat))
    {
        LOG() << "录制设备, 格式不支持!";
        return;
    }

    audioSource = new QAudioSource(inputFormat, this);
    connect(audioSource, &QAudioSource::stateChanged, this, [=](QtAudio::State state)
    {
        if (state == QtAudio::StoppedState)
        {
            // 录制完毕
            if (audioSource->error() != QAudio::NoError)
            {
                LOG() << audioSource->error();
            }
        }
    });

    // 3. 初始化播放模块
    outputDevices = new QMediaDevices(this);
    outputDevice = outputDevices->defaultAudioOutput();
    QAudioFormat outputFormat;
    outputFormat.setSampleRate(16000);
    outputFormat.setChannelCount(1);
    outputFormat.setSampleFormat(QAudioFormat::Int16);
    if (!outputDevice.isFormatSupported(outputFormat))
    {
        LOG() << "播放设备, 格式不支持";
        return;
    }
    audioSink = new QAudioSink(outputDevice, outputFormat);

    connect(audioSink, &QAudioSink::stateChanged, this, [=](QtAudio::State state)
    {
        if (state == QtAudio::IdleState)
        {
            LOG() << "IdleState";
            this->stopPlay();
            emit this->soundPlayDone();
        }
        else if (state == QAudio::ActiveState)
        {
            LOG() << "ActiveState";
        }
        else if (state == QAudio::StoppedState)
        {
            LOG() << "StoppedState";
            if (audioSink->error() != QtAudio::NoError)
            {
                LOG() << audioSink->error();
            }
        }
    });
}

void SoundRecorder::startRecord()
{
    soundFile.open( QIODevice::WriteOnly | QIODevice::Truncate );
    audioSource->start(&soundFile);
}

void SoundRecorder::stopRecord()
{
    audioSource->stop();
    soundFile.close();
    emit this->soundRecordDone(RECORD_PATH);
}

void SoundRecorder::startPlay(const QByteArray& content)
{
    if (content.isEmpty())
    {
        Toast::showMessage("数据加载中, 请稍后播放");
        return;
    }
    // 1. 把数据写入到临时文件
    model::writeByteArrayToFile(PLAY_PATH, content);

    // 2. 播放语音
    inputFile.setFileName(PLAY_PATH);
    inputFile.open(QIODevice::ReadOnly);
    audioSink->start(&inputFile);
}

void SoundRecorder::stopPlay()
{
    audioSink->stop();
    inputFile.close();
}

（3）客户端发送请求：

在 MessageEditArea::initSignalSlot 注册信号槽。按下录音按钮开始录制，释放录音按钮则停止录制：

cpp 复制代码

// 处理录制语⾳
SoundRecorder* soundRecorder = SoundRecorder::getInstance();
connect(sendSoundBtn, &QPushButton::pressed, this, &MessageEditArea::soundRecordPressed);
connect(sendSoundBtn, &QPushButton::released, this, &MessageEditArea::soundRecordReleased);
connect(soundRecorder, &SoundRecorder::soundRecordDone, this, &MessageEditArea::sendSpeech);

实现 MessageEditArea::soundRecordPressed函数：

cpp 复制代码

void MessageEditArea::soundRecordPressed()
{
    // 判定当前是否选中会话.
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    if(dataCenter->getCurrentChatSessionId().isEmpty())
    {
        LOG() << "未选中任何会话, 不能发送语音消息";
        return;
    }

    // 切换语音按钮的图标
    sendSpeechBtn->setIcon(QIcon(":/resource/image/sound_active.png"));

    // 开始录音
    SoundRecorder* soundRecorder = SoundRecorder::getInstance();
    soundRecorder->startRecord();

    tipLabel->show();
    textEdit->hide();
}

实现 MessageEditArea::soundRecordReleased函数：

cpp 复制代码

void MessageEditArea::soundRecordReleased()
{
    // 判定当前是否选中会话.
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    if(dataCenter->getCurrentChatSessionId().isEmpty())
    {
        LOG() << "未选中任何会话, 不能发送语音消息";
        return;
    }

    // 切换语音按钮的图标
    sendSpeechBtn->setIcon(QIcon(":/resource/image/sound.png"));

    // 停止录音
    SoundRecorder* soundRecorder = SoundRecorder::getInstance();
    soundRecorder->stopRecord();

    tipLabel->hide();
    textEdit->show();
}

在 stopRecord 中会触发 soundRecordDone 信号，进⼀步的触发MessageEditArea::sendSound函数。

实现 MessageEditArea::sendSpeech函数：

cpp 复制代码

void MessageEditArea::sendSpeech(const QString &path)
{
    model::DataCenter* dataCenter = model::DataCenter::getInstance();

    // 1. 读取到语音文件的内容
    QByteArray content = model::loadFileToByteArray(path);
    if(content.isEmpty())
    {
        LOG() << "语音文件加载失败";
        return;
    }

    dataCenter->sendSpeechMessageAsync(dataCenter->getCurrentChatSessionId(), content);
}

实现 DataCenter::sendSpeechMessageAsync函数：

cpp 复制代码

void DataCenter::sendSpeechMessageAsync(const QString& chatSessionid, const QByteArray& content)
{
    netClient.sendMessage(loginSessionId, chatSessionid, MessageType::SPEECH_TYPE, content, "");
}

（4）客户端处理响应：

发送消息之后服务器的相应最终会通过信号槽调用到 addSelfMessage。此处重点是在 addSelfMessage 中 MessageShowArea::addMessage 内部对语言消息的适配。在 MessageContentLabel 的 mousePressEvent 实现点击播放语音。此处要考虑到文本提示的切换。点击播放切换为 "播放中...", 播放完毕切换回 "[语音]"

cpp 复制代码

void MessageContentLabel::mousePressEvent(QMouseEvent* event)
{
    // 实现鼠标点击之后, 触发文件另存为
    if(event->button() == Qt::LeftButton)
    {
        if(this->messageType == model::MessageType::FILE_TYPE)
        {
            // 文件处理
        }
        else if(this->messageType == model::MessageType::SPEECH_TYPE)
        {
            if(!this->loadContentDone)
            {
                Toast::showMessage("数据尚未加载成功, 请稍后重试");
                return;
            }

            SoundRecorder* soundRecorder = SoundRecorder::getInstance();
            this->label->setText("播放中...");
            connect(soundRecorder, &SoundRecorder::soundPlayDone, this, &MessageContentLabel::playDone, Qt::UniqueConnection);
            soundRecorder->startPlay(this->content);
        }
    }
}

（4）服务器实现逻辑：

在界面上添加按钮"发送语音消息"并实现槽函数：

cpp 复制代码

void Widget::on_pushButton_6_clicked()
{
 	WebsocketServer* websocketServer = WebsocketServer::getInstance();
	emit websocketServer->sendSoundResp();
}

定义 WebsocketServer 信号：

cpp 复制代码

void sendSoundResp();

在 websocket 逻辑中添加发送语言逻辑：

cpp 复制代码

connect(this, &WebsocketServer::sendSpeechResp, this, [=]()
{
	// 此处就可以捕获到 socket 对象, 从而可以通过 socket 对象给客户端返回数据.
	if(socket == nullptr || !socket->isValid())
	{
		LOG() << "socket 对象无效!";
		return;
	}
	
	// 构造响应数据
	QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");
	bite_im::MessageInfo messageInfo = makeSpeechMessageInfo(this->messageIndex++, "2000", avatar);

	bite_im::NotifyNewMessage notifyNewMessage;
	notifyNewMessage.setMessageInfo(messageInfo);

	bite_im::NotifyMessage notifyMessage;
	notifyMessage.setNotifyEventId("");
	notifyMessage.setNotifyType(bite_im::NotifyTypeGadget::NotifyType::CHAT_MESSAGE_NOTIFY);
	notifyMessage.setNewMessageInfo(notifyNewMessage);

	// 序列化
	QByteArray body = notifyMessage.serialize(&this->serializer);

	// 发送消息给客户端
	socket->sendBinaryMessage(body);
	LOG() << "发送语音消息响应";
});

// 制造语音数据
bite_im::MessageInfo makeSpeechMessageInfo(int index, const QString& chatSessionId, const QByteArray& avatar)
{
    bite_im::MessageInfo messageInfo;
    messageInfo.setMessageId(QString::number(3000 + index));
    messageInfo.setChatSessionId(chatSessionId);
    messageInfo.setTimestamp(getTime());
    messageInfo.setSender(makeUserInfo(index, avatar));

    bite_im::SpeechMessageInfo speechMessageInfo;
    // 真实服务器推送的消息数据里, 本身也就不带图片的正文. 只是 fileId.
    // 需要通过 fileId, 二次发起请求, 通过 getSingleFile 接口来获取到内容.
    speechMessageInfo.setFileId("testSpeech");

    bite_im::MessageContent messageContent;
    messageContent.setMessageType(bite_im::MessageTypeGadget::MessageType::SPEECH);
    messageContent.setSpeechMessage(speechMessageInfo);
    messageInfo.setMessage(messageContent);
    return messageInfo;
}

在 websocket 断开连接时释放信号槽

cpp 复制代码

disconnect(this, &WebsocketServer::sendSoundResp, this, nullptr);

8.5 语音识别文字

（1）客户端发送请求：

给 MessageContentLabel 添加右键菜单。只针对语音消息才生效：

cpp 复制代码

void MessageContentLabel::contextMenuEvent(QContextMenuEvent *event)
{
    (void) event;
    if (messageType != model::MessageType::SPEECH_TYPE)
    {
        LOG() << "非语音消息暂时不支持右键菜单";
        return;
    }

    QMenu* menu = new QMenu(this);
    QAction* action = menu->addAction("语音转文字");
    menu->setStyleSheet("QMenu { color: rgb(0, 0, 0); }");
    connect(action, &QAction::triggered, this, [=]()
    {
        model::DataCenter* dataCenter = model::DataCenter::getInstance();
        connect(dataCenter, &model::DataCenter::speechConvertTextDone, this, &MessageContentLabel::speechConvertTextDone, Qt::UniqueConnection);
        dataCenter->speechConvertTextAsync(this->fileId, this->content);
    });

    // 此处弹出 "模态对话框" 显示菜单/菜单项. exec 会在用户进一步操作之前, 阻塞.
    menu->exec(event->globalPos());
    delete menu;
}

实现 DataCenter::speechConvertTextAsync函数：

cpp 复制代码

void DataCenter::speechConvertTextAsync(const QString& fileId, const QByteArray &content)
{
 	netClient.speechConvertText(loginSessionId, fileId, content);
}

实现 NetClient::speechConvertText函数和接口定义：

cpp 复制代码

message SpeechRecognitionReq {
 	string request_id = 1;
 	bytes speech_content = 2;
 	optional string user_id = 3;
 	optional string session_id = 4;
}
message SpeechRecognitionRsp {
 	string request_id = 1;
 	bool success = 2;
 	string errmsg = 3; 
 	string recognition_result = 4;
}

// 函数实现
void NetClient::speechConvertText(const QString &loginSessionId, const QString &fileId, const QByteArray &content)
{
    // 1. 构造请求 body
    bite_im::SpeechRecognitionReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setSpeechContent(content);
    QByteArray body = pbReq.serialize(&serializer);
    LOG() << "[语音转文字] 发送请求 requestId=" << pbReq.requestId() << ", loginSessonId=" << pbReq.sessionId();

    // 2. 发送 HTTP 请求
    QNetworkReply* resp = this->sendHttpRequest("/service/speech/recognition", body);

    // 3. 处理响应
    connect(resp, &QNetworkReply::finished, this, [=]()
    {
        // a) 解析响应
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::SpeechRecognitionRsp>(resp, &ok, &reason);

        // b) 判定响应结果
        if(!ok)
        {
            LOG() << "[语音转文字] 响应错误! reason=" << reason;
            return;
        }

        // c) 把结果写入到 DataCenter 中. 此处不打算通过 DataCenter 表示这里的语音识别结果. 直接通过 信号 通知结果即可.

        // d) 发送信号, 通知调用者
        emit dataCenter->speechConvertTextDone(fileId, pbResp->recognitionResult());

        // e) 打印日志
        LOG() << "[语音转文字] 响应完成 requestId=" << pbResp->requestId();
    });
}

（2）客户端处理响应：

定义 DataCenter 信号

cpp 复制代码

// 语音识别完成
void speechConvertTextDone(const QString& fileId, bool ok, const QString reason, const QString text);

处理 speechConvertTextDone信号。实现 MessageContentLabel::speechConvertTextDone函数：

cpp 复制代码

void MessageContentLabel::speechConvertTextDone(const QString &fileId, const QString &text)
{
    if(this->fileId != fileId)
    {
        // 直接跳过, 此时的结果不是针对这一条语音消息的结果.
        return;
    }

    // 修改界面内容
    this->label->setText("[语音转文字] " + text);
    this->update();
}

（3）服务器实现逻辑：

注册路由

cpp 复制代码

httpServer.route("/service/speech/recognition", [=](const QHttpServerRequest& req) 
{
 	return this->recognition(req);
});

实现处理函数：

cpp 复制代码

QHttpServerResponse HttpServer::recognition(const QHttpServerRequest &req)
{
    // 解析请求 body
    bite_im::SpeechRecognitionReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 语音转文字] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId();

    // 构造响应 body
    bite_im::SpeechRecognitionRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");
    pbResp.setRecognitionResult("你好你好, 这是一段语音消息, 你好你好, 这是一段语音消息");
    QByteArray body = pbResp.serialize(&serializer);

    // 构造 HTTP 响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-type", "application/x-protobuf");
    return resp;
}

9. 历史消息界面逻辑 (2)

9.1 适配图片消息

（1）定义 ImageButton 类：此处要针对拿到的图片适当缩放，使图片能正确显示：

cpp 复制代码

class ImageButton : public QPushButton
{
    Q_OBJECT

public:
    ImageButton(const QString& fileId, const QByteArray& content);

    void updateUI(const QString& fileId, const QByteArray& content);

private:
    QString fileId;

};

// 具体实现
ImageButton::ImageButton(const QString& fileId, const QByteArray& content)
    :fileId(fileId)
{
    this->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
    this->setStyleSheet("QPushButton { border: none; }");

    if(!content.isEmpty())
    {
        // 直接显示到界面上
        this->updateUI(fileId, content);
    }
    else
    {
        // 通过网络来获取
        model::DataCenter* dataCenter = model::DataCenter::getInstance();
        connect(dataCenter, &model::DataCenter::getSingleFileDone, this, &ImageButton::updateUI);
        dataCenter->getSingleFileAsync(fileId);
    }
}

void ImageButton::updateUI(const QString& fileId, const QByteArray& content)
{
    if(this->fileId != fileId)
    {
        return;
    }

    // 如果图片尺寸太大, 需要进行缩放.
    QImage image;
    image.loadFromData(content);

    int width = image.width();
    int height = image.height();
    if(image.width() >= 300)
    {
        // 进行缩放, 缩放之后, 宽度就是固定的 300
        width = 300;
        height = ((double)image.height() / image.width()) * width;
    }

    this->resize(width, height);
    this->setIconSize(QSize(width, height));
    QPixmap pixmap = QPixmap::fromImage(image);
    this->setIcon(QIcon(pixmap));
}

（2）修改 HistoryMessageItem::makeHistoryMessageItem函数：

cpp 复制代码

// 5. 创建消息体
QWidget* contentWidget = nullptr;
if (message.messageType == TEXT_TYPE) 
{
 	// ......
} 
else if (message.messageType == IMAGE_TYPE) 
{
 	contentWidget = new ImageButton(message.fileId, message.content);
} 
else if (message.messageType == FILE_TYPE)
{
 	// TODO
} 
else if (message.messageType == SPEECH_TYPE) 
{
 	// TODO
} 
else 
{
 	LOG() << "错误的 messageType = " << message.messageType;
}

9.2 适配文件消息

（1）创建 FileLabel 类：此处要实现点击另存为的功能。

cpp 复制代码

class FileLabel : public QLabel
{
    Q_OBJECT

public:
    FileLabel(const QString &fileId, const QString &fileName);

    void getContentDone(const QString& fileId, const QByteArray& fileContent);

    // 通过这个函数, 来处理鼠标点击操作.
    void mousePressEvent(QMouseEvent* event) override;

private:
    QString fileId;
    QByteArray content;
    QString fileName;
    bool loadDone = false;

};

// 具体实现
FileLabel::FileLabel(const QString &fileId, const QString &fileName)
    :fileId(fileId)
    ,fileName(fileName)
{
    this->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    this->setText("[文件] " + fileName);
    this->setWordWrap(true);
    // 自动调整尺寸让能够显示下文字内容
    this->adjustSize();
    this->setAlignment(Qt::AlignTop | Qt::AlignLeft);

    // 需要从网络加载数据了
    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::getSingleFileDone, this, &FileLabel::getContentDone);
    dataCenter->getSingleFileAsync(this->fileId);
}

void FileLabel::getContentDone(const QString& fileId, const QByteArray& fileContent)
{
    if(fileId != this->fileId)
    {
        return;
    }

    this->content = fileContent;
    this->loadDone = true;
}

void FileLabel::mousePressEvent(QMouseEvent* event)
{
    (void)event;

    if(!this->loadDone)
    {
        // 说明数据还没准备好.
        Toast::showMessage("文件内容加载中, 请稍后尝试!");
        return;
    }

    // 弹出一个对话框, 让用户来选择当前要保存的位置
    QString filePath = QFileDialog::getSaveFileName(this, "另存为", QDir::homePath(), "*");
    if(filePath.isEmpty())
    {
        // 用户取消了保存
        LOG() << "用户取消了保存";
        return;
    }

    model::writeByteArrayToFile(filePath, content);
}

（2）修改 HistoryMessageItem::makeHistoryMessageItem函数：

cpp 复制代码

// 5. 创建消息体
QWidget* contentWidget = nullptr;
if (message.messageType == TEXT_TYPE) 
{
 	// ......
} 
else if (message.messageType == IMAGE_TYPE) 
{
 	// ......
} 
else if (message.messageType == FILE_TYPE)
{
 	contentWidget = new FileLabel(message.fileId, message.content, message.fileName);
} 
else if (message.messageType == SPEECH_TYPE) 
{
 	// TODO
} 
else 
{
 	LOG() << "错误的 messageType = " << message.messageType;
}

9.3 适配语音消息

（1）创建 SoundLabel 类：

cpp 复制代码

class SpeechLabel : public QLabel
{
    Q_OBJECT

public:
    SpeechLabel(const QString& fileId);

    void getContentDone(const QString& fileId, const QByteArray& content);

    // 通过这个函数处理鼠标点击
    void mousePressEvent(QMouseEvent* event) override;

private:
    QString fileId;
    QByteArray content;
    bool loadDone = false;

};

// 具体实现
SpeechLabel::SpeechLabel(const QString& fileId)
{
    this->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    this->setText("[语音]");
    this->setAlignment(Qt::AlignLeft | Qt::AlignTop);
    // 这两个操作不太需要了. 此处只有 语音 两个字
    this->setWordWrap(true);
    this->adjustSize();

    model::DataCenter* dataCenter = model::DataCenter::getInstance();
    connect(dataCenter, &model::DataCenter::getSingleFileDone, this, &SpeechLabel::getContentDone);
    dataCenter->getSingleFileAsync(this->fileId);
}

void SpeechLabel::getContentDone(const QString& fileId, const QByteArray& content)
{
    if(fileId != this->fileId)
    {
        return;
    }

    this->content = content;
    this->loadDone = true;
}

void SpeechLabel::mousePressEvent(QMouseEvent* event)
{
    (void)event;
    if (!this->loadDone)
    {
        Toast::showMessage("文件内容加载中, 稍后重试");
        return;
    }

    SoundRecorder* soundRecorder = SoundRecorder::getInstance();
    soundRecorder->startPlay(this->content);
}

（2）修改 HistoryMessageItem::makeHistoryMessageItem函数：

cpp 复制代码

// 5. 创建消息体
QWidget* contentWidget = nullptr;
if (message.messageType == TEXT_TYPE) 
{
 	// ......
} 
else if (message.messageType == IMAGE_TYPE) 
{
 	// ......
} 
else if (message.messageType == FILE_TYPE)
{
 	// ......
} 
else if (message.messageType == SPEECH_TYPE) 
{
 	contentWidget = new SoundLabel(message.fileId, message.content);
} 
else 
{
 	LOG() << "错误的 messageType = " << message.messageType;
}

10. 重定向日志到文件中

cpp 复制代码

FILE* output = nullptr;

void msgHandler(QtMsgType type, const QMessageLogContext& context, const QString& msg)
{
    (void)type;
    (void)context;

    const QByteArray& log = msg.toUtf8();
    fprintf(output, "%s\n", log.constData());
    fflush(output);		// 确保数据落入硬盘
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

#if DEPOLY
    output = fopen("./log.txt", "a");
    qInstallMessageHandler(msgHandler);
    // ......
}

11. 发布程序

（1）按照 release 的方式构建程序：

（2）找到 exe （也就是构建的程序）所在的目录，并单独拷贝到一个单独的目录上：

（3）使用 windeployqt 获取到依赖的 dll：windeployqt 是 Qt SDK 自带的工具。注意 windeployqt 所在的路径, 根据个人机器的实际路径来设置：

（4）利用命令行进行windeployqt的操作。进入到exe拷贝的目录后按住Shift点击右键进行如下操作：

（5）进入命令行后：

12. 客户端总结

使用Qt的常用组件/布局管理器，实现界面的布局。
使用QSS针对界面做样式上的优化。
通过自定义控件，实现比较复杂的界面效果。
通过信号槽，实现了各种需要的人机交互。
通过protobuf实现了通信数据的序列化和反序列化。
基于HTTP/Websocket实现和服务器之间的异步通信。
还是用了多媒体组件，实现语音的录制和发送。
应用了单例模式和工厂模式，进行代码的组织. 观察者模式(Qt信号槽机制) 。
基于QPainter API实现了本地随机验证码的生成。
搭建了MockServer辅助客户端进行各个功能点的测试。

客户端整体代码链接 ：https://gitee.com/liu-yechi/new_code/tree/master/chat_system/client。