国外能下载模板的网站展厅设计展览设计公司

加载指定会话最近消息

前言

上一集我们就把三个标签页的加载列表的任务给完成啦！那么我们这一集就来完成加载指定绘画最近消息的任务。

需求分析

我们点击了某个会话之后，我们就会去显示我们的会话的最近的N条消息。请看下图。

我们这里涉及到两个区域，一个是中间的区域，一个是右边的消息展示区域。

当然这里我们只展示N条消息记录，我们不多去展示，不然影响我们的程序的效率和用户的体验感。这里和我们的返回历史消息记录查询是完全不同的东西！

我们还是先来看一下我们的URL

再来看一眼我们的请求和响应的定义。

这就是我们这一集的任务要求！

客户端

常规操作，分两端，这里是客户端的代码操作！

loadRecentMessage

SessionItem::active

我们要考虑这个加载指定会话的最近消息要在哪里进行调用？

我们应该在这个会话被点击的时候就加载这个函数，那么我们就应该把这个函数放到我们SessionItem的active这个成员函数当中。

由于又要涉及到我们主界面的消息展示区，那么这个函数必须放置在我们的主界面的代码当中。

那么我们就要获取到MainWidget的实例，之后调用这个函数。

void SessionItem::active()
{LOG() << "点击 SessionItem 触发的逻辑 chatSessionId=" << chatSessionId;//加载会话历史消息会涉及到当前内存的数据操作，又会涉及到网络通信，还会涉及到界面的变更//使用到主窗口的方法进行调用MainWidget* mainWidget = MainWidget::getInstance();mainWidget->loadRecentMessage(chatSessionId);}

loadRecentMessage的具体实现

我们需要传入需要加载的会话id，因为我们不是加载整个最近消息，所以我们要去传入会话id。

那么我们还是分为了两个部分，一个是从内存进行加载，一个是从网络进行加载。

我们判定的是这个会话的最近消息列表，而不是整个最近的消息列表，所以我们应该去访问key为chatSessionId的最近消息列表。我们判定整个会话的最近消息列表是没有什么用的！

getRecentMessageList

QList<Message> *DataCenter::getRecentMessageList(const QString &chatSessionId)
{if(!recentMessage->contains(chatSessionId)){return nullptr;}return &(*recentMessage)[chatSessionId];
}

我们先完成这个判定的函数，这里我们要先去访问这个哈希表是否存在这个chatSessionId的列表，如果没有就直接返回一个nullptr即可，如果有，就返回这个列表的指针即可。

void MainWidget::loadRecentMessage(const QString &chatSessionId)
{//先判定本地是否存有数据DataCenter* dataCenter = DataCenter::getInstance();//判定的是这个会话的最近消息列表，不是整个最近消息列表if(dataCenter->getRecentMessageList(chatSessionId) != nullptr){//本地数据加载updateRecentMessage(chatSessionId);}else{//网络数据加载connect(dataCenter, &DataCenter::getRecentMessageListDone, this, &MainWidget::updateRecentMessage, Qt::UniqueConnection);dataCenter->getRecentMessageListAsync(chatSessionId);}}

本地数据加载

updateRecentMessage

这个代码也是分为两个部分，我们先讲这个本地数据加载的内容。

我们这里不要忘了，这个内容是展示到我们的消息展示区的，不是我们的好友列表上！

我们先从DataCenter中获取这个列表，之后清空我们整个消息展示区，之后头插我们的消息内容。我们判定我们的消息是靠左还是靠右，只需要去看这个消息的发送者的userId，和我们DataCenter里面保存的Myself的userId即可。

之后我们要设置我们的会话标题，再把我们当前选中的会话保存到我们的DataCenter当中。最后我们再来一个滚动条设置滑动到我们的消息的末尾即可。

void MainWidget::updateRecentMessage(const QString &chatSessionId)
{//获取最近的消息列表DataCenter* dataCenter = DataCenter::getInstance();auto* recentMessageList = dataCenter->getRecentMessageList(chatSessionId);//这里不要把内容添加到会话了，这里是要添加到消息展示区上//清空原有界面上的消息列表messageShowArea->clear();//遍历//要先看到最近消息，那就是用头插for(int i = recentMessageList->size() - 1; i >= 0; --i){const Message& message = recentMessageList->at(i);bool isLeft = message.sender.userId != dataCenter->getMyself()->userId;//用这个消息的发送者的用户id和数据中心的自身信息的用户id对比即可messageShowArea->addFrontMessage(isLeft, message);}//设置会话标题ChatSessionInfo* chatSessionInfo =  dataCenter->findChatSessionById(chatSessionId);if(chatSessionInfo != nullptr){//把会话的名称显示到界面上sessionTitleLabel->setText(chatSessionInfo->chatSessionName);}//保存当前选中的会话dataCenter->setCurrentChatSessionId(chatSessionId);//自动把滚动条滚动到末尾，就可以先看到最近的第一条消息messageShowArea->scrollToEnd();}

这里我们还要去是完成获取会话消息，保存当前选中会话，以及自动滑动滚动条到末尾的三个重要函数。

findChatSessionById

我们通过chatSessionId从DataCenter当中寻找会话列表中的指定会话的信息。

ChatSessionInfo *DataCenter::findChatSessionById(const QString &chatSessionId)
{//判断会话列表是否为空if(chatSessionList == nullptr){return nullptr;}for(auto& info : *chatSessionList){if(info.chatSessionId == chatSessionId){return &info;}}//没找到return nullptr;
}

set/getCurrentChatSessionId

void DataCenter::setCurrentChatSessionId(const QString &chatSessionId)
{this->currentChatSessionId = chatSessionId;
}const QString &DataCenter::getCurrentChatSessionId()
{return currentChatSessionId;
}

scrollToEnd

void MessageShowArea::scrollToEnd()
{//获取垂直滚动条//获取到最大值//延时操作QTimer* timer = new QTimer();connect(timer, &QTimer::timeout, this, [=](){int maxValue = this->verticalScrollBar()->maximum();this->verticalScrollBar()->setValue(maxValue);timer->stop();timer->deleteLater();});timer->start(500);
}

使用延时操作，等会话里的消息都加载到界面上，我们再去获取到我们的具体滚动区域最大值，之后滑动即可。

这样我们就可以通过本地数据进行加载我们指定会话的最近消息列表了！

网络通信加载

getRecentMessageListAsync

我们不仅仅要传到NetClient的有loginSessionId，我们还有指定的chatSessionId。

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

getRecentMessageList

我们还是老步骤啊，构造请求body，序列化，之后发送请求到我们指定的URL，之后处理我们的响应，之后就是把我们的数据放置到我们的数据中心，之后发送信号，之后触发我们的信号槽从本地数据再获取数据即可！

void NetClient::getRecentMessageList(const QString &loginSessionId, const QString &chatSessionId)
{//构造请求bodybite_im::GetRecentMsgReq req;req.setRequestId(makeRequestId());req.setChatSessionId(chatSessionId);req.setMsgCount(50);//固定获取50条req.setSessionId(loginSessionId);//序列化QByteArray body = req.serialize(&serializer);LOG() << "[获取最近消息] 发送请求 requestId=" << req.requestId() << ", loginSessionId=" << loginSessionId;//发送http请求QNetworkReply* resp = this->sendHttpRequest("/service/message_storage/get_recent", body);//处理响应connect(resp, &QNetworkReply::finished, this, [=](){//解析响应bool ok = false;QString reason;auto pbResp = this->handleHttpResponse<bite_im::GetRecentMsgRsp>(resp, &ok, &reason);//判定响应是否okif(!ok){LOG() << "[获取最近消息] 失败! requestId=" << req.requestId() << ", reason=" << reason;return;}//设置到DataCenter中dataCenter->resetRecentMessageList(chatSessionId, pbResp);//发送信号告知界面进行更新emit dataCenter->getRecentMessageListDone(chatSessionId);});
}

resetRecentMessageList

这里我们不需要判定是否为空，因为哈希的特性！我们不存在就会直接创建，我们记得清空一下这个指定会话的最近消息列表，之后通过遍历，我们把获得的数据设置到我们的recentMessage，记住一定要用引用！！！

void DataCenter::resetRecentMessageList(const QString &chatSessionId, std::shared_ptr<bite_im::GetRecentMsgRsp> resp)
{//哈希的特性存在就使用，不存在就创建新的，清空QList<Message>& messageList = (*recentMessage)[chatSessionId];messageList.clear();//遍历for(auto& m : resp->msgList()){Message message;message.load(m);messageList.push_back(message);}
}

之后触发我们的信号就可以返回到我们的主界面那边了。

 connect(dataCenter, &DataCenter::getRecentMessageListDone, this, &MainWidget::updateRecentMessage, Qt::UniqueConnection);

记得我们的第五个参数，是为了防止一个信号触发我们多个这个槽函数。

到这里我们的客户端就完成了，我们继续完成测试服务端！

测试服务端

配置路由

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

基本操作，我们直接到getRecent函数当中！

getRecent

也是基本操作，我们构造了一堆假数据放置到我们的界面上。

QHttpServerResponse HttpServer::getRecent(const QHttpServerRequest &req)
{//解析请求bite_im::GetRecentMsgReq pbReq;pbReq.deserialize(&serializer, req.body());LOG() << "[REQ 获取最近消息列表] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId();//构造响应bite_im::GetRecentMsgRsp pbResp;pbResp.setRequestId(pbReq.requestId());pbResp.setSuccess(true);pbResp.setErrmsg("");QByteArray avatar = loadFileToByteArray(":/resource/image/defaultAvatar.png");for(int i = 0; i < 20; ++i){bite_im::MessageInfo messageInfo = makeTextMessageInfo(i, "2000", avatar);pbResp.msgList().push_back(messageInfo);}//序列化QByteArray body = pbResp.serialize(&serializer);//构造http响应对象QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);resp.setHeader("Content-Type", "application/x-protobuf");return resp;
}

这里我们就完成了整个加载指定会话最近消息的内容了。