恋恋风辰的官方博客

聊天图片资源续传和进度显示
Posted on 2026-01-03 18:29:49 by 恋恋风辰 | In C++ | 原文链接

增加上传可视化进度

之前我们传输图片的时候，只能通过服务器查看上传进度。客户端无法感知上传进度，所以考虑在图片传输基础上，显示上传进度。

封装可点击标签

  1. #pragma once
  2. #include <QLabel>
  3. #include <QWidget>
  4. #include <QIcon>
  6. class ClickableLabel :
  7.     public QLabel
  8. {
  9.     Q_OBJECT
  10. public:
  11.     explicit ClickableLabel(QWidget* parent = nullptr);
  12.     void setIconOverlay(const QIcon& icon); //设置遮罩图标
  13.     void showIconOverlay(bool show);  //显示/隐藏遮罩图标
  14. protected:
  15.     void mousePressEvent(QMouseEvent* event) override;
  16.     void enterEvent(QEvent* event) override;
  17.     void leaveEvent(QEvent* event) override;
  18.     void paintEvent(QPaintEvent* event) override;
  20. signals:
  21.     void clicked();
  23. private:
  24.     QIcon m_overlayIcon;
  25.     bool m_showOverlay;
  26.     bool m_hovered;
  27. };

具体实现

  1. #include "ClickableLabel.h"
  2. #include <QMouseEvent>
  3. #include <QPainter>
  4. // ClickableLabel.cpp
  5. ClickableLabel::ClickableLabel(QWidget* parent)
  6.     : QLabel(parent)
  7.     , m_showOverlay(false)
  8.     , m_hovered(false)
  9. {
  10.     setCursor(Qt::PointingHandCursor);
  11.     setMouseTracking(true);
  12. }
  14. void ClickableLabel::mousePressEvent(QMouseEvent* event)
  15. {
  16.     if (event->button() == Qt::LeftButton) {
  17.         emit clicked();
  18.     }
  19.     QLabel::mousePressEvent(event);
  20. }
  22. void ClickableLabel::enterEvent(QEvent* event)
  23. {
  24.     m_hovered = true;
  25.     update();
  26.     QLabel::enterEvent(event);
  27. }
  29. void ClickableLabel::leaveEvent(QEvent* event)
  30. {
  31.     m_hovered = false;
  32.     update();
  33.     QLabel::leaveEvent(event);
  34. }
  36. void ClickableLabel::paintEvent(QPaintEvent* event)
  37. {
  38.     QLabel::paintEvent(event);
  40.     if (m_showOverlay && !m_overlayIcon.isNull()) {
  41.         QPainter painter(this);
  43.         // 绘制半透明遮罩
  44.         if (m_hovered) {
  45.             painter.fillRect(rect(), QColor(0, 0, 0, 100));
  46.         }
  47.         else {
  48.             painter.fillRect(rect(), QColor(0, 0, 0, 60));
  49.         }
  51.         // 绘制图标
  52.         int iconSize = qMin(width(), height()) / 3; // 图标大小为图片的1/3
  53.         QRect iconRect(
  54.             (width() - iconSize) / 2,
  55.             (height() - iconSize) / 2,
  56.             iconSize,
  57.             iconSize
  58.         );
  60.         m_overlayIcon.paint(&painter, iconRect);
  61.     }
  62. }
  64. void ClickableLabel::setIconOverlay(const QIcon& icon)
  65. {
  66.     m_overlayIcon = icon;
  67.     update();
  68. }
  70. void ClickableLabel::showIconOverlay(bool show)
  71. {
  72.     m_showOverlay = show;
  73.     update();
  74. }

图片设置可点击和进度条

image-20260102111204491

在图片中添加可点击的标签，并且添加进度条

  1. #ifndef PICTUREBUBBLE_H
  2. #define PICTUREBUBBLE_H
  4. #include "BubbleFrame.h"
  5. #include <QHBoxLayout>
  6. #include <QPixmap>
  7. #include "ClickableLabel.h"
  8. #include <QProgressBar>
  9. #include "global.h"
  10. class PictureBubble : public BubbleFrame
  11. {
  12.     Q_OBJECT
  13. public:
  16.     PictureBubble(const QPixmap& picture, ChatRole role,int total, QWidget* parent = nullptr);
  18.     void setProgress(int value);
  19.     void showProgress(bool show);
  20.     void setState(TransferState state);
  21.     void resumeState();
  22.     void setMsgInfo(std::shared_ptr<MsgInfo> msg);
  23.     TransferState state() const { return m_state; }
  25. signals:
  26.     void pauseRequested(QString unique_name, TransferType transfer_type);   // 请求暂停
  27.     void resumeRequested(QString unique_name, TransferType transfer_type);  // 请求继续
  28.     void cancelRequested(QString unique_name, TransferType transfer_type);  // 请求取消
  30. private slots:
  31.     void onPictureClicked();
  33. private:
  34.     void updateIconOverlay();
  35.     void adjustSize();
  37. private:
  38.     ClickableLabel* m_picLabel;
  39.     QProgressBar* m_progressBar;
  40.     TransferState m_state;
  42.     QIcon m_pauseIcon;
  43.     QIcon m_playIcon;
  44.     QIcon m_downloadIcon;
  45.     QSize m_pixmapSize;
  46.     QVBoxLayout* m_vLayout;
  47.     int m_total_size;
  48.     std::shared_ptr<MsgInfo> _msg_info;
  49. };
  51. #endif // PICTUREBUBBLE_H

构造函数里添加进度条和样式。

  1. PictureBubble::PictureBubble(const QPixmap &picture, ChatRole role, int total, QWidget *parent)
  2.     :BubbleFrame(role, parent), m_state(TransferState::None), m_total_size(total)
  3. {
  4.     // 加载图标（使用Qt内置图标或自定义图标）
  5.     m_pauseIcon = style()->standardIcon(QStyle::SP_MediaPause);
  6.     m_playIcon = style()->standardIcon(QStyle::SP_MediaPlay);
  7.     m_downloadIcon = style()->standardIcon(QStyle::SP_ArrowDown);
  9.     // 创建容器
  10.     QWidget* container = new QWidget();
  11.     m_vLayout = new QVBoxLayout(container);
  12.     m_vLayout->setContentsMargins(0, 0, 0, 0);
  13.     m_vLayout->setSpacing(5);
  16.     // 创建可点击的图片标签
  17.     m_picLabel = new ClickableLabel();
  18.     m_picLabel->setScaledContents(true);
  19.     QPixmap pix = picture.scaled(QSize(PIC_MAX_WIDTH, PIC_MAX_HEIGHT),
  20.         Qt::KeepAspectRatio, Qt::SmoothTransformation);
  21.     m_pixmapSize = pix.size();
  22.     m_picLabel->setPixmap(pix);
  23.     m_picLabel->setFixedSize(pix.size());
  25.     connect(m_picLabel, &ClickableLabel::clicked,
  26.         this, &PictureBubble::onPictureClicked);
  28.     // 创建进度条
  29.     m_progressBar = new QProgressBar();
  30.     m_progressBar->setFixedWidth(pix.width());
  31.     m_progressBar->setFixedHeight(10);
  32.     m_progressBar->setRange(0, 100);
  33.     m_progressBar->setValue(0);
  34.     m_progressBar->setTextVisible(true);
  35.     setState(TransferState::None);
  37.     // 样式美化
  38.     m_progressBar->setStyleSheet(
  39.         "QProgressBar {"
  40.         "   border: 1px solid #ccc;"
  41.         "   border-radius: 3px;"
  42.         "   text-align: center;"
  43.         "   background-color: #f0f0f0;"
  44.         "   font-size: 10px;"
  45.         "}"
  46.         "QProgressBar::chunk {"
  47.         "   background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, "
  48.         "       stop:0 #4CAF50, stop:1 #45a049);"
  49.         "   border-radius: 2px;"
  50.         "}"
  51.     );
  53.     m_vLayout->addWidget(m_picLabel);
  54.     m_vLayout->addWidget(m_progressBar);
  55.     this->setWidget(container);
  56.     adjustSize();
  57. }

设置传输状态为None,进度条初始值为0

调整界面设置，将图片拉伸包括进度条

  1. void PictureBubble::adjustSize()
  2. {
  3.     int left_margin = this->layout()->contentsMargins().left();
  4.     int right_margin = this->layout()->contentsMargins().right();
  5.     int v_margin = this->layout()->contentsMargins().bottom();
  7.     int width = m_pixmapSize.width() + left_margin + right_margin;
  8.     int height = m_pixmapSize.height() + v_margin * 2;
  10.     if (m_progressBar->isHidden() == false) {
  11.         height += m_progressBar->height() + m_vLayout->spacing();
  12.     }
  14.     setFixedSize(width, height);
  15. }

封装设置进度函数

  1. void PictureBubble::setProgress(int value)
  2. {
  3.     float percent = (value / (m_total_size*1.0))*100;
  4.     m_progressBar->setValue(percent);
  5.     if (percent >= 100) {
  6.         setState(TransferState::Completed);
  7.     }
  8. }

展示进度条

  1. void PictureBubble::showProgress(bool show)
  2. {
  3.     m_progressBar->show();
  4.     adjustSize();
  5. }

当传输停止后，点击后会恢复，恢复传输或者下载状态，逻辑如下

  1. void PictureBubble::resumeState() {
  2.     if (_msg_info->_transfer_type == TransferType::Download) {
  3.         _msg_info->_transfer_state = TransferState::Downloading;
  4.         m_state = TransferState::Downloading;
  5.         updateIconOverlay();
  6.         return;
  7.     }
  9.     if (_msg_info->_transfer_type == TransferType::Upload) {
  10.         _msg_info->_transfer_state = TransferState::Uploading;
  11.         m_state = TransferState::Uploading;
  12.         updateIconOverlay();
  13.         return;
  14.     }
  15. }

设置状态逻辑如下, 状态分为None,下载,上传,暂停,传输完成,传输失败等。

  1. void PictureBubble::setState(TransferState state)
  2. {
  3.     m_state = state;
  4.     if (_msg_info) {
  5.         _msg_info->_transfer_state = state;
  6.     }
  8.     updateIconOverlay();
  10.     // 根据状态显示/隐藏进度条
  11.     switch (state) {
  12.     case TransferState::Downloading:
  13.     case TransferState::Uploading:
  14.     case TransferState::Paused:
  15.         showProgress(true);
  16.         break;
  17.     case TransferState::Completed:
  18.         // 完成后延迟隐藏进度条
  19.         QTimer::singleShot(1000, this, [this]() {
  20.             showProgress(false);
  21.             });
  22.         break;
  23.     case TransferState::None:
  24.     case TransferState::Failed:
  25.         showProgress(false);
  26.         break;
  27.     }
  28. }

为了更好的控制传输逻辑，将std::shared_ptr<MsgInfo>作为成员变量设置给PictureBubble

这样在点击图片后，可以发送图片关联的消息id和unique_name

点击图片触发槽函数

  1. void PictureBubble::onPictureClicked()
  2. {
  3.     switch (m_state) {
  4.     case TransferState::Downloading:
  5.     case TransferState::Uploading:
  6.         // 暂停
  7.         setState(TransferState::Paused);
  8.         emit pauseRequested(_msg_info->_unique_name, _msg_info->_transfer_type);
  9.         break;
  11.     case TransferState::Paused:
  12.         // 继续
  13.         resumeState(); // 
  14.         emit resumeRequested(_msg_info->_unique_name, _msg_info->_transfer_type);
  15.         break;
  17.     case TransferState::Failed:
  18.         // 重试
  19.         emit resumeRequested(_msg_info->_unique_name, _msg_info->_transfer_type);
  20.         break;
  22.     default:
  23.         // 其他状态可以实现查看大图等功能
  24.         break;
  25.     }
  26. }

根据状态发送不同的信号，如果是下载或者暂停状态，则发送暂停信号。

如果是暂停状态，则发送继续下载或者继续上传状态。

  1. void PictureBubble::updateIconOverlay()
  2. {
  3.     switch (m_state) {
  4.     case TransferState::Downloading:
  5.     case TransferState::Uploading:
  6.         m_picLabel->setIconOverlay(m_pauseIcon);
  7.         m_picLabel->showIconOverlay(true);
  8.         break;
  10.     case TransferState::Paused:
  11.         m_picLabel->setIconOverlay(m_playIcon);
  12.         m_picLabel->showIconOverlay(true);
  13.         break;
  15.     case TransferState::Failed:
  16.         m_picLabel->setIconOverlay(m_downloadIcon); // 或重试图标
  17.         m_picLabel->showIconOverlay(true);
  18.         break;
  20.     default:
  21.         m_picLabel->showIconOverlay(false);
  22.         break;
  23.     }
  24. }

链接状态信号

在ChatPage的构造函数中添加信号和槽函数链接

  1. //链接暂停信号
  2. connect(dynamic_cast<PictureBubble*>(pBubble), &PictureBubble::pauseRequested,
  3.             this, &ChatPage::on_clicked_paused);
  4. //链接恢复信号
  5. connect(dynamic_cast<PictureBubble*>(pBubble), &PictureBubble::resumeRequested,
  6.             this, &ChatPage::on_clicked_resume);

槽函数中设置文件为暂停状态

  1. void ChatPage::on_clicked_paused(QString unique_name, TransferType transfer_type)
  2. {
  3.     UserMgr::GetInstance()->PauseTransFileByName(unique_name);
  4. }

槽函数中设置为续传或者下载状态，并且调用FileMgr续传之前未传递完成的内容

  1. void ChatPage::on_clicked_resume(QString unique_name, TransferType transfer_type)
  2. {
  3.     UserMgr::GetInstance()->ResumeTransFileByName(unique_name);
  4.     //继续发送或者下载
  5.     if (transfer_type == TransferType::Upload) {
  6.         FileTcpMgr::GetInstance()->ContinueUploadFile(unique_name);
  7.         return;
  8.     }
  10.     if (transfer_type == TransferType::Download) {
  11.         return;
  12.     }
  13. }

续传逻辑

FileTcpMgr发送信号sig_continue_upload_file, 这么做的好处是，发送信号的线程和接收信号的线程不一致，也可以跨线程调用。

  1. void FileTcpMgr::ContinueUploadFile(QString unique_name) {
  2.     emit sig_continue_upload_file(unique_name);
  3. }

在FileTcpMgr中链接了这个信号

  1.    //链接续传信号
  2.      QObject::connect(this, &FileTcpMgr::sig_continue_upload_file, this, &FileTcpMgr::slot_continue_upload_file);

槽函数slot_continue_upload_file

  1. void FileTcpMgr::slot_continue_upload_file(QString unique_name) {
  2.     auto msg_info = UserMgr::GetInstance()->GetTransFileByName(unique_name);
  3.     if (msg_info == nullptr) {
  4.         return;
  5.     }
  6.     //将待发送序列号更新为已经确认接收的序列号，然后基于此序列号再递增。
  7.     msg_info->_seq = msg_info->_last_confirmed_seq;
  9.     if ((msg_info->_seq) * MAX_FILE_LEN >= msg_info->_total_size) {
  10.         qDebug() << "file has sent finished";
  11.         return;
  12.     }
  14.     if (MAX_CWND_SIZE - _cwnd_size == 0) {
  15.         return;
  16.     }
  18.     //打开
  19.     QFile file(msg_info->_text_or_url);
  20.     if (!file.open(QIODevice::ReadOnly)) {
  21.         qWarning() << "Could not open file: " << file.errorString();
  22.         return;
  23.     }
  25.     //文件偏移到已经发送的位置，继续读取发送
  26.     file.seek(msg_info->_seq * MAX_FILE_LEN);
  28.     bool b_last = false;
  29.     //再次组织数据发送
  30.     for (; MAX_CWND_SIZE - _cwnd_size > 0; ) {
  32.         QByteArray buffer;
  33.         msg_info->_seq++;
  34.         //放入发送未回包集合
  35.         msg_info->_flighting_seqs.insert(msg_info->_seq);
  36.         //每次读取MAX_FILE_LEN字节发送
  37.         buffer = file.read(MAX_FILE_LEN);
  38.         QJsonObject sendObj;
  39.         //将文件内容转换为base64编码
  40.         QString base64Data = buffer.toBase64();
  41.         sendObj["md5"] = msg_info->_md5;
  42.         sendObj["name"] = msg_info->_unique_name;
  43.         sendObj["seq"] = msg_info->_seq;
  44.         msg_info->_current_size = buffer.size() + (msg_info->_seq - 1) * MAX_FILE_LEN;
  45.         sendObj["trans_size"] = msg_info->_current_size;
  46.         sendObj["total_size"] = msg_info->_total_size;
  48.         b_last = false;
  49.         if (buffer.size() + (msg_info->_seq - 1) * MAX_FILE_LEN >= msg_info->_total_size) {
  50.             sendObj["last"] = 1;
  51.             b_last = true;
  52.         }
  53.         else {
  54.             sendObj["last"] = 0;
  55.         }
  57.         sendObj["data"] = base64Data;
  58.         sendObj["last_seq"] = msg_info->_max_seq;
  59.         sendObj["uid"] = UserMgr::GetInstance()->GetUid();
  60.         QJsonDocument doc(sendObj);
  61.         auto send_data = doc.toJson();
  62.         //直接发送，其实是放入tcpmgr发送队列
  63.         SendData(ID_IMG_CHAT_CONTINUE_UPLOAD_REQ, send_data);
  64.         _cwnd_size++;
  65.         //如果
  66.         if (b_last) {
  67.             break;
  68.         }
  69.     }
  71.     file.close();
  72. }

ID_IMG_CHAT_CONTINUE_UPLOAD_REQ为断点续传请求

  1.   ID_IMG_CHAT_CONTINUE_UPLOAD_REQ = 1043,  //续传聊天图片资源请求
  2.   ID_IMG_CHAT_CONTINUE_UPLOAD_RSP = 1044,  //续传聊天图片资源回复

响应续传回复

  1.  _handlers.insert(ID_IMG_CHAT_CONTINUE_UPLOAD_RSP, [this](ReqId id, int len, QByteArray data) {
  2.         Q_UNUSED(len);
  3.         qDebug() << "handle id is " << id;
  4.         // 将QByteArray转换为QJsonDocument
  5.         QJsonDocument jsonDoc = QJsonDocument::fromJson(data);
  6.         _cwnd_size--;
  7.         // 检查转换是否成功
  8.         if (jsonDoc.isNull()) {
  9.             qDebug() << "Failed to create QJsonDocument.";
  10.             return;
  11.         }
  13.         QJsonObject recvObj = jsonDoc.object();
  14.         qDebug() << "data jsonobj is " << recvObj;
  16.         if (!recvObj.contains("error")) {
  17.             int err = ErrorCodes::ERR_JSON;
  18.             qDebug() << "icon upload_failed, err is Json Parse Err" << err;
  19.             //todo ... 提示上传失败
  20.             //emit upload_failed();
  21.             return;
  22.         }
  24.         int err = recvObj["error"].toInt();
  25.         if (err != ErrorCodes::SUCCESS) {
  26.             qDebug() << "Login Failed, err is " << err;
  27.             //emit upload_failed();
  28.             return;
  29.         }
  31.         auto name = recvObj["name"].toString();
  32.         auto file_info = UserMgr::GetInstance()->GetTransFileByName(name);
  33.         if (!file_info) {
  34.             return;
  35.         }
  37.         auto md5 = file_info->_md5;
  38.         auto seq = recvObj["seq"].toInt();
  39.         //根据seq从未接收集合移动到已接收集合中
  40.         file_info->_flighting_seqs.erase(seq);
  41.         //将seq放入已收到集合中
  42.         file_info->_rsp_seqs.insert(seq);
  43.         //计算当前最后确认的序列号
  44.         while (file_info->_rsp_seqs.count(file_info->_last_confirmed_seq + 1)) {
  45.             ++file_info->_last_confirmed_seq;
  46.         }
  50.         qDebug() << "recv : " << name << "file seq is " << seq;
  51.         //判断最大序列和最后确认序列号相等，说明收全了
  52.         if (file_info->_last_confirmed_seq == file_info->_max_seq) {
  53.             //更新已经传输的文件大小
  54.             file_info->_rsp_size = file_info->_total_size;
  55.             //通知界面显示
  56.             emit sig_update_upload_progress(file_info);
  57.             UserMgr::GetInstance()->RmvTransFileByName(name);
  58.             //todo 此处添加发送其他待发送的文件
  59.             auto free_file = UserMgr::GetInstance()->GetFreeUploadFile();
  60.             if (free_file == nullptr) {
  61.                 return;
  62.             }
  63.             BatchSend(free_file);
  64.             return;
  65.         }
  67.         //更新已经传输的文件大小
  68.         file_info->_rsp_size = (file_info->_last_confirmed_seq) * MAX_FILE_LEN;
  70.         //发送信号，更新图片上传进度
  71.         emit sig_update_upload_progress(file_info);
  72.         //如果传输状态不为上传，则直接返回。
  73.         if (!UserMgr::GetInstance()->TransFileIsUploading(name)) {
  74.             return;
  75.         }
  76.         BatchSend(file_info); });

sig_update_upload_progress信号为更新进度，因为在接收到服务器回包前，文件状态可能被设置为暂停，所以要判断一下文件状态是否为暂停，如果为暂停，则不发送后续内容。否则直接发送后续内容。

sig_update_upload_progress信号，也会在正常上传服务器，服务器回复给客户端时，客户端发送

比如上传图片信息回复逻辑里

  1. _handlers.insert(ID_IMG_CHAT_UPLOAD_RSP, [this](ReqId id, int len, QByteArray data) {
  2.         Q_UNUSED(len);
  3.         qDebug() << "handle id is " << id;
  4.         // 将QByteArray转换为QJsonDocument
  5.         QJsonDocument jsonDoc = QJsonDocument::fromJson(data);
  6.         _cwnd_size--;
  7.         // 检查转换是否成功
  8.         if (jsonDoc.isNull()) {
  9.             qDebug() << "Failed to create QJsonDocument.";
  10.             return;
  11.         }
  13.         QJsonObject recvObj = jsonDoc.object();
  14.         qDebug() << "data jsonobj is " << recvObj;
  16.         if (!recvObj.contains("error")) {
  17.             int err = ErrorCodes::ERR_JSON;
  18.             qDebug() << "icon upload_failed, err is Json Parse Err" << err;
  19.             //todo ... 提示上传失败
  20.             //emit upload_failed();
  21.             return;
  22.         }
  24.         int err = recvObj["error"].toInt();
  25.         if (err != ErrorCodes::SUCCESS) {
  26.             qDebug() << "Login Failed, err is " << err;
  27.             //emit upload_failed();
  28.             return;
  29.         }
  31.         auto name = recvObj["name"].toString();
  32.         auto file_info = UserMgr::GetInstance()->GetTransFileByName(name);
  33.         if (!file_info) {
  34.             return;
  35.         }
  37.         auto md5 = file_info->_md5;
  38.         auto seq = recvObj["seq"].toInt();
  39.         //根据seq从未接收集合移动到已接收集合中
  40.         file_info->_flighting_seqs.erase(seq);
  41.         //将seq放入已收到集合中
  42.         file_info->_rsp_seqs.insert(seq);
  43.         //计算当前最后确认的序列号
  44.         while (file_info->_rsp_seqs.count(file_info->_last_confirmed_seq + 1)) {
  45.             ++file_info->_last_confirmed_seq;
  46.         }
  50.         qDebug() << "recv : " << name << "file seq is " << seq;
  51.         //判断最大序列和最后确认序列号相等，说明收全了
  52.         if (file_info->_last_confirmed_seq == file_info->_max_seq) {
  53.             //更新已经传输的文件大小
  54.             file_info->_rsp_size = file_info->_total_size;
  55.             //通知界面显示
  56.             emit sig_update_upload_progress(file_info);
  57.             UserMgr::GetInstance()->RmvTransFileByName(name);
  58.             //todo 此处添加发送其他待发送的文件
  59.             auto free_file = UserMgr::GetInstance()->GetFreeUploadFile();
  60.             if (free_file == nullptr) {
  61.                 return;
  62.             }
  63.             BatchSend(free_file);
  64.             return;
  65.         }
  67.         //更新已经传输的文件大小
  68.         file_info->_rsp_size = (file_info->_last_confirmed_seq) * MAX_FILE_LEN;
  70.         //发送信号，更新图片上传进度
  71.         emit sig_update_upload_progress(file_info);
  72.         //如果传输状态不为上传，则直接返回。
  73.         if (!UserMgr::GetInstance()->TransFileIsUploading(name)) {
  74.             return;
  75.         }
  76.         BatchSend(file_info); });
  78.         _handlers.insert(ID_IMG_CHAT_CONTINUE_UPLOAD_RSP, [this](ReqId id, int len, QByteArray data) {
  79.         Q_UNUSED(len);
  80.         qDebug() << "handle id is " << id;
  81.         // 将QByteArray转换为QJsonDocument
  82.         QJsonDocument jsonDoc = QJsonDocument::fromJson(data);
  83.         _cwnd_size--;
  84.         // 检查转换是否成功
  85.         if (jsonDoc.isNull()) {
  86.             qDebug() << "Failed to create QJsonDocument.";
  87.             return;
  88.         }
  90.         QJsonObject recvObj = jsonDoc.object();
  91.         qDebug() << "data jsonobj is " << recvObj;
  93.         if (!recvObj.contains("error")) {
  94.             int err = ErrorCodes::ERR_JSON;
  95.             qDebug() << "icon upload_failed, err is Json Parse Err" << err;
  96.             //todo ... 提示上传失败
  97.             //emit upload_failed();
  98.             return;
  99.         }
  101.         int err = recvObj["error"].toInt();
  102.         if (err != ErrorCodes::SUCCESS) {
  103.             qDebug() << "Login Failed, err is " << err;
  104.             //emit upload_failed();
  105.             return;
  106.         }
  108.         auto name = recvObj["name"].toString();
  109.         auto file_info = UserMgr::GetInstance()->GetTransFileByName(name);
  110.         if (!file_info) {
  111.             return;
  112.         }
  114.         auto md5 = file_info->_md5;
  115.         auto seq = recvObj["seq"].toInt();
  116.         //根据seq从未接收集合移动到已接收集合中
  117.         file_info->_flighting_seqs.erase(seq);
  118.         //将seq放入已收到集合中
  119.         file_info->_rsp_seqs.insert(seq);
  120.         //计算当前最后确认的序列号
  121.         while (file_info->_rsp_seqs.count(file_info->_last_confirmed_seq + 1)) {
  122.             ++file_info->_last_confirmed_seq;
  123.         }
  127.         qDebug() << "recv : " << name << "file seq is " << seq;
  128.         //判断最大序列和最后确认序列号相等，说明收全了
  129.         if (file_info->_last_confirmed_seq == file_info->_max_seq) {
  130.             //更新已经传输的文件大小
  131.             file_info->_rsp_size = file_info->_total_size;
  132.             //通知界面显示
  133.             emit sig_update_upload_progress(file_info);
  134.             UserMgr::GetInstance()->RmvTransFileByName(name);
  135.             //todo 此处添加发送其他待发送的文件
  136.             auto free_file = UserMgr::GetInstance()->GetFreeUploadFile();
  137.             if (free_file == nullptr) {
  138.                 return;
  139.             }
  140.             BatchSend(free_file);
  141.             return;
  142.         }
  144.         //更新已经传输的文件大小
  145.         file_info->_rsp_size = (file_info->_last_confirmed_seq) * MAX_FILE_LEN;
  147.         //发送信号，更新图片上传进度
  148.         emit sig_update_upload_progress(file_info);
  149.         //如果传输状态不为上传，则直接返回。
  150.         if (!UserMgr::GetInstance()->TransFileIsUploading(name)) {
  151.             return;
  152.         }
  153.         BatchSend(file_info); });
  154. }

同步信息回复也会发送进度上传信号

  1.     _handlers.insert(ID_FILE_INFO_SYNC_RSP, [this](ReqId id, int len, QByteArray data) {
  2.         Q_UNUSED(len);
  3.         qDebug() << "handle id is " << id;
  4.         // 将QByteArray转换为QJsonDocument
  5.         QJsonDocument jsonDoc = QJsonDocument::fromJson(data);
  7.         // 检查转换是否成功
  8.         if (jsonDoc.isNull()) {
  9.             qDebug() << "Failed to create QJsonDocument.";
  10.             return;
  11.         }
  13.         QJsonObject recvObj = jsonDoc.object();
  14.         qDebug() << "data jsonobj is " << recvObj;
  16.         if (!recvObj.contains("error")) {
  17.             int err = ErrorCodes::ERR_JSON;
  18.             qDebug() << "icon upload_failed, err is Json Parse Err" << err;
  19.             //todo ... 提示上传失败,将来可能断点重传等
  20.             //emit upload_failed();
  21.             return;
  22.         }
  24.         int err = recvObj["error"].toInt();
  25.         if (err != ErrorCodes::SUCCESS) {
  26.             qDebug() << "Login Failed, err is " << err;
  27.             //emit upload_failed();
  28.             return;
  29.         }
  31.         //为了简单起见，先处理网络正常情况  
  32.         auto seq = recvObj["seq"].toInt();
  33.         auto name = recvObj["name"].toString();
  35.         auto file_info = UserMgr::GetInstance()->GetTransFileByName(name);
  36.         if (!file_info) {
  37.             return;
  38.         }
  40.         //根据seq从未接收集合移动到已接收集合中
  41.         file_info->_flighting_seqs.erase(seq);
  42.         //将seq放入已收到集合中
  43.         file_info->_rsp_seqs.insert(seq);
  45.         //计算当前最后确认的序列号
  46.         while (file_info->_rsp_seqs.count(file_info->_last_confirmed_seq + 1)) {
  47.             ++file_info->_last_confirmed_seq;
  48.         }
  50.         qDebug() << "recv : " << name << "file seq is " << seq;
  51.         //判断最大序列和最后确认序列号相等，说明收全了
  52.         if (file_info->_last_confirmed_seq == file_info->_max_seq) {
  53.             //更新已经传输的文件大小
  54.             file_info->_rsp_size = file_info->_total_size;
  55.             //通知界面显示
  56.             emit sig_update_upload_progress(file_info);
  57.             UserMgr::GetInstance()->RmvTransFileByName(name);
  58.             //todo 此处添加发送其他待发送的文件
  59.             auto free_file = UserMgr::GetInstance()->GetFreeUploadFile();
  60.             if (free_file == nullptr) {
  61.                 return;
  62.             }
  63.             BatchSend(free_file);
  64.             return;
  65.         }
  66.         //更新已经传输的文件大小
  67.         file_info->_rsp_size = (file_info->_last_confirmed_seq) * MAX_FILE_LEN;
  68.         //通知界面显示
  69.         emit sig_update_upload_progress(file_info);
  70.         //如果传输状态不为上传，则直接返回。
  71.         if (!UserMgr::GetInstance()->TransFileIsUploading(name)) {
  72.             return;
  73.         }
  74.         BatchSend(file_info);
  75.     });

在ChatPage中链接进度上传信号和槽函数

  1.     //接收tcp返回的上传进度信息
  2.     connect(FileTcpMgr::GetInstance().get(), &FileTcpMgr::sig_update_upload_progress, 
  3.         this, &ChatDialog::slot_update_upload_progress);

接收进度上传信号

  1. void ChatDialog::slot_update_upload_progress(std::shared_ptr<MsgInfo> msg_info) {
  2.     auto chat_data = UserMgr::GetInstance()->GetChatThreadByThreadId(msg_info->_thread_id);
  3.     if (chat_data == nullptr) {
  4.         return;
  5.     }
  7.     //更新消息，其实不用更新，都是共享msg_info的一块内存，这里为了安全还是再次更新下
  9.     chat_data->UpdateProgress(msg_info);
  11.     if (_cur_chat_thread_id != msg_info->_thread_id) {
  12.         return;
  13.     }
  16.     //更新聊天界面信息
  17.     ui->chat_page->UpdateFileProgress(msg_info);
  18. }

调用ChatPage的UpdateFileProgress函数

  1. void ChatPage::UpdateFileProgress(std::shared_ptr<MsgInfo> msg_info) {
  2.     auto iter = _base_item_map.find(msg_info->_msg_id);
  3.     if (iter == _base_item_map.end()) {
  4.         return;
  5.     }
  7.     if (msg_info->_msg_type == MsgType::IMG_MSG) {
  8.         auto bubble = iter.value()->getBubble();
  9.         PictureBubble*  pic_bubble = dynamic_cast<PictureBubble*>(bubble);
  10.         pic_bubble->setProgress(msg_info->_rsp_size);
  11.     }  
  12. }

根据消息类型为图片，则调用PictureBubble更新图片进度

服务器

ResoureServer服务器要响应断点续传请求

LogicWorker注册消息处理

  1. _fun_callbacks[ID_IMG_CHAT_CONTINUE_UPLOAD_REQ] = [this](shared_ptr<CSession> session, const short& msg_id,
  2.         const string& msg_data) {
  3.             Json::Reader reader;
  4.             Json::Value root;
  5.             reader.parse(msg_data, root);
  6.             auto md5 = root["md5"].asString();
  7.             auto seq = root["seq"].asInt();
  8.             auto name = root["name"].asString();
  9.             auto total_size = root["total_size"].asInt();
  10.             auto trans_size = root["trans_size"].asInt();
  11.             auto last = root["last"].asInt();
  12.             auto file_data = root["data"].asString();
  13.             auto file_path = ConfigMgr::Inst().GetFileOutPath();
  14.             auto uid = root["uid"].asInt();
  15.             //转化为字符串
  16.             auto uid_str = std::to_string(uid);
  17.             auto file_path_str = (file_path / uid_str / name).string();
  18.             Json::Value  rtvalue;
  20.             auto callback = [=](const Json::Value& result) {
  22.                 // 在异步任务完成后调用
  23.                 Json::Value rtvalue = result;
  24.                 rtvalue["error"] = ErrorCodes::Success;
  25.                 rtvalue["total_size"] = total_size;
  26.                 rtvalue["seq"] = seq;
  27.                 rtvalue["name"] = name;
  28.                 rtvalue["trans_size"] = trans_size;
  29.                 rtvalue["last"] = last;
  30.                 rtvalue["md5"] = md5;
  31.                 rtvalue["uid"] = uid;
  32.                 std::string return_str = rtvalue.toStyledString();
  33.                 session->Send(return_str, ID_IMG_CHAT_CONTINUE_UPLOAD_RSP);
  34.             };
  36.             // 使用 std::hash 对字符串进行哈希
  37.             std::hash<std::string> hash_fn;
  38.             size_t hash_value = hash_fn(name); // 生成哈希值
  39.             int index = hash_value % FILE_WORKER_COUNT;
  40.             std::cout << "Hash value: " << hash_value << std::endl;
  42.             //第一个包
  43.             if (seq == 1) {
  44.                 //构造数据存储
  45.                 auto file_info = std::make_shared<FileInfo>();
  46.                 file_info->_file_path_str = file_path_str;
  47.                 file_info->_name = name;
  48.                 file_info->_seq = seq;
  49.                 file_info->_total_size = total_size;
  50.                 file_info->_trans_size = trans_size;
  51.                 bool success = RedisMgr::GetInstance()->SetFileInfo(name, file_info);
  52.                 if (!success) {
  53.                     rtvalue["error"] = ErrorCodes::FileSaveRedisFailed;
  54.                     std::string return_str = rtvalue.toStyledString();
  55.                     session->Send(return_str, ID_IMG_CHAT_CONTINUE_UPLOAD_RSP);
  56.                     return;
  57.                 }
  58.             }
  59.             else {
  60.                 auto file_info = RedisMgr::GetInstance()->GetFileInfo(name);
  61.                 if (file_info == nullptr) {
  62.                     rtvalue["error"] = ErrorCodes::FileNotExists;
  63.                     std::string return_str = rtvalue.toStyledString();
  64.                     session->Send(return_str, ID_IMG_CHAT_CONTINUE_UPLOAD_RSP);
  65.                     return;
  66.                 }
  67.                 file_info->_seq = seq;
  68.                 file_info->_trans_size = trans_size;
  69.                 bool success = RedisMgr::GetInstance()->SetFileInfo(name, file_info);
  70.                 if (!success) {
  71.                     rtvalue["error"] = ErrorCodes::FileSaveRedisFailed;
  72.                     std::string return_str = rtvalue.toStyledString();
  73.                     session->Send(return_str, ID_IMG_CHAT_CONTINUE_UPLOAD_RSP);
  74.                     return;
  75.                 }
  76.             }
  77.             FileSystem::GetInstance()->PostMsgToQue(
  78.                 std::make_shared<FileTask>(session, ID_IMG_CHAT_CONTINUE_UPLOAD_REQ, uid, file_path_str, name, seq, total_size,
  79.                     trans_size, last, file_data, callback),
  80.                 index
  81.             );
  82.     };

在FileWorker响应图片上传逻辑

  1. //处理续传图片请求
  2.     _handlers[ID_IMG_CHAT_CONTINUE_UPLOAD_REQ] = [this](std::shared_ptr<FileTask> task) {
  3.         // 解码
  4.         std::string decoded = base64_decode(task->_file_data);
  6.         auto file_path_str = task->_path;
  7.         auto last = task->_last;
  8.         //std::cout << "file_path_str is " << file_path_str << std::endl;
  10.         boost::filesystem::path file_path(file_path_str);
  11.         boost::filesystem::path dir_path = file_path.parent_path();
  12.         // 获取完整文件名（包含扩展名）
  13.         std::string filename = file_path.filename().string();
  14.         Json::Value result;
  15.         result["error"] = ErrorCodes::Success;
  17.         // Check if directory exists, if not, create it
  18.         if (!boost::filesystem::exists(dir_path)) {
  19.             if (!boost::filesystem::create_directories(dir_path)) {
  20.                 std::cerr << "Failed to create directory: " << dir_path.string() << std::endl;
  21.                 result["error"] = ErrorCodes::FileNotExists;
  22.                 task->_callback(result);
  23.                 return;
  24.             }
  25.         }
  28.         std::ofstream outfile;
  29.         //第一个包
  30.         if (task->_seq == 1) {
  31.             // 打开文件，如果存在则清空，不存在则创建
  32.             outfile.open(file_path_str, std::ios::binary | std::ios::trunc);
  33.         }
  34.         else {
  35.             // 保存为文件
  36.             outfile.open(file_path_str, std::ios::binary | std::ios::app);
  37.         }
  40.         if (!outfile) {
  41.             std::cerr << "无法打开文件进行写入。" << std::endl;
  42.             result["error"] = ErrorCodes::FileWritePermissionFailed;
  43.             task->_callback(result);
  44.             return;
  45.         }
  47.         outfile.write(decoded.data(), decoded.size());
  48.         if (!outfile) {
  49.             std::cerr << "写入文件失败。" << std::endl;
  50.             result["error"] = ErrorCodes::FileWritePermissionFailed;
  51.             task->_callback(result);
  52.             return;
  53.         }
  55.         outfile.close();
  56.         if (last) {
  57.             std::cout << "文件已成功保存为: " << task->_name << std::endl;
  58.             //todo...更新数据库聊天图像上传状态
  59.             //todo...通过grpc通知ChatServer
  60.         }
  62.         if (task->_callback) {
  63.             task->_callback(result);
  64.         }
  65.     };

效果展示

image-20260102101925154

image-20260102102645373

热门评论
点击查看更多评论 没有更多评论了,点击收起 展开评论

热门文章

  1. vscode搭建windows C++开发环境
    喜欢(596) 浏览(100577)

  2. 使用hexo搭建个人博客
    喜欢(533) 浏览(14372)

  3. Linux环境搭建和编码
    喜欢(594) 浏览(15945)

  4. MarkDown在线编辑器
    喜欢(514) 浏览(16295)

  5. 聊天项目(28) 分布式服务通知好友申请
    喜欢(507) 浏览(7367)

最新评论

  1. C++ 线程池原理和实现 mzx2023:两种方法解决，一种是改排序算法，就是当线程耗尽的时候，使用普通递归，另一种是当在线程池commit的时候，判断线程是否耗尽，耗尽的话就直接当前线程执行task
  2. 利用指针和容器实现文本查询 越今朝:应该添加一个过滤功能以解决部分单词无法被查询的问题: eg: "I am a teacher."中的teacher无法被查询，因为在示例代码中teacher.被解释为一个单词从而忽略了teacher本身。
  3. 无锁并发队列 TenThousandOne:_head  和 _tail  替换为原子变量。那里pop的逻辑，val = _data[h] 可以移到循环外面吗
  4. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理，无论工作也好生活也罢，最重要的是开心，即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃，所以我还是想去做喜欢的方向。
  5. 处理网络粘包问题 zyouth: //消息的长度小于头部规定的长度，说明数据未收全，则先将部分消息放到接收节点里 if (bytes_transferred < data_len) { memcpy(_recv_msg_node->_data + _recv_msg_node->_cur_len, _data + copy_len, bytes_transferred); _recv_msg_node->_cur_len += bytes_transferred; ::memset(_data, 0, MAX_LENGTH); _socket.async_read_some(boost::asio::buffer(_data, MAX_LENGTH), std::bind(&CSession::HandleRead, this, std::placeholders::_1, std::placeholders::_2, shared_self)); //头部处理完成 _b_head_parse = true; return; } 把_b_head_parse = true;放在_socket.async_read_some前面是不是更好

其他链接

  1. GitHub
  2. 个人博客
  3. 博客园
  4. CSDN

个人公众号

个人微信