1 效果图

image.png

2 Server端

  1. #include "widget.h"
  2. #include "ui_widget.h"
  3. #include <QDebug>
  4. #include <QHostAddress>
  5. #include <QFileDialog>
  6. #include <QDataStream>
  7. #include <QDateTime>
  10. Widget::Widget(QWidget *parent) :
  11.     QWidget(parent),
  12.     ui(new Ui::Widget)
  13. {
  14.     ui->setupUi(this);
  16.     ui->splitter->setStretchFactor(0,2);    // 上面占2份
  17.     ui->splitter->setStretchFactor(1,1);    // 下面占1份
  19.     connect(&server,SIGNAL(newConnection()),
  20.             this,SLOT(onNewConnection()));
  22.     // 服务端开始监听所有IPv4地址
  23.     bool isOk = server.listen(QHostAddress::AnyIPv4,5485);
  24.     qDebug() << "监听结果:" << isOk;
  26.     imageIndex = 0;
  27.     LastPacksize = 0;
  28. }
  31. Widget::~Widget()
  32. {
  33.     delete ui;
  34. }
  37. void Widget::onNewConnection()
  38. {
  39.     QTcpSocket* socket = server.nextPendingConnection();
  40.     clients.append(socket);
  43.     connect(socket,SIGNAL(connected()),
  44.             this,SLOT(onConnected()));
  45.     connect(socket,SIGNAL(disconnected()),
  46.             this,SLOT(onDisconnected()));
  47.     connect(socket,SIGNAL(error(QAbstractSocket::SocketError)),
  48.             this,SLOT(onError(QAbstractSocket::SocketError)));
  49.     connect(socket,SIGNAL(readyRead()),
  50.             this,SLOT(onReadyRead()));
  51. }
  54. void Widget::onConnected()  // 连接成功
  55. {
  56.     qDebug() << "connected";
  57. }
  60. void Widget::onDisconnected()   // 断开
  61. {
  62.     QObject* obj = this->sender();
  63.     QTcpSocket* socket = qobject_cast<QTcpSocket*>(obj);
  64.     clients.removeAll(socket);
  65.     socket->deleteLater();
  66.     qDebug() << "disconnected";
  67. }
  70. void Widget::onError(QAbstractSocket::SocketError socketError)  // 出错
  71. {
  72.     qDebug() << "error: " << socketError;
  73. }
  76. void Widget::onReadyRead()  // 读取数据
  77. {
  78.     QObject* obj = this->sender();
  79.     QTcpSocket* socket = qobject_cast<QTcpSocket*>(obj);
  81.     quint64 sizeNow = 0;
  82.     QDataStream stream(socket);
  83.     do
  84.     {
  85.         // 当前缓冲区里的数据大小
  86.         sizeNow = socket->bytesAvailable(); // 获取等待读取的传入字节数。
  88.         if(LastPacksize == 0)   // 第一次要先读取包大小
  89.         {
  90.             // 第一次要先判断传入字节数是否小于4字节
  91.             if(sizeNow < sizeof(quint32))   return;
  93.             stream >> LastPacksize;
  94.         }
  95.         qDebug() << "sizeNow:"<< sizeNow;
  96.         qDebug() << "sizePack:"<< LastPacksize;
  97.         // 包不完整返回,防止出现半包
  98.         if(sizeNow < LastPacksize - 4)     return;
  100.         // 包已经完整,数据读取完毕
  101.         qDebug() << "数据包读取完毕";
  102.         LastPacksize = 0;
  104.         // 设置输出框内容
  105.         QString dateTime = QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss");
  107.         QByteArray dataFull;
  108.         stream >> dataFull; // 读取完整数据
  109.         QString prefix = dataFull.mid(0,4);
  110.         if(prefix == "TXT:")
  111.         {
  112.             ui->tedtOutput->append(dateTime);
  113.             QString textContent = dataFull.mid(4);
  114.             ui->tedtOutput->append("<p>" + textContent + "</p>");
  115.         }
  116.         else if(prefix == "IMG:")
  117.         {
  118.             ui->tedtOutput->append(dateTime);
  120.             QString index = QString::number(imageIndex);
  122.             QFile file(index + ".png");
  123.             file.open(QIODevice::WriteOnly);
  124.             file.write(dataFull.mid(4));
  125.             file.close();
  127.             QString htmlTag = QString("<img src=\"%1\"></img>").arg(index + ".png");
  128.             ui->tedtOutput->append(htmlTag);
  130.             imageIndex++;
  131.         }
  132.         // 判断剩下的字节数,是否会有粘包的情况
  133.         sizeNow = socket->bytesAvailable();
  134.         qDebug() << "剩余等待读取的传入字节数 sizeNow=" << sizeNow;
  135.     }while(sizeNow > 0);
  136. }
  139. void Widget::on_btnSend_clicked()
  140. {
  141.     QString qstrSend = ui->tedtInput->toPlainText();
  142.     if(qstrSend.isEmpty())  return;
  145.     QList<QTcpSocket*>::iterator it;
  146.     // 把服务端的文字发给所有连接的客户端
  147.     for(it = clients.begin(); it != clients.end(); ++it)
  148.     {
  149.         QString input = "TXT:"+ qstrSend;
  150.         QByteArray data = input.toLocal8Bit();
  152.         // 封装数据包,加上包头
  153.         QByteArray dataSend;    // 封装的数据包
  154.         QDataStream stream(&dataSend,QIODevice::WriteOnly); // 定义一个数据流
  155.         // 写入数据到数据流,格式为:数据包大小(32bit)+数据
  156.         stream << (quint32)0 << data;
  157.         // 移到流索引为0处, 用数据大小覆盖
  158.         stream.device()->seek(0);
  159.         stream << dataSend.size();
  161.         (*it)->write(dataSend);
  162.     }
  163.     ui->tedtInput->clear();
  164. }
  167. void Widget::on_btnImage_clicked()
  168. {
  169.     QString imagePath = QFileDialog::getOpenFileName(this,"请选择一张图片",".","Images (*.png *.xpm *.jpg)");
  170.     if(imagePath.isEmpty()) 
  171.         return;
  173.     QFile file(imagePath);
  174.     file.open(QIODevice::ReadOnly);
  175.     QByteArray data = "IMG:" + file.readAll();
  176.     file.close();
  178.     // 封装数据包,加上包头
  179.     QByteArray dataSend;    // 封装的数据包
  180.     QDataStream stream(&dataSend,QIODevice::WriteOnly); // 定义一个数据流
  181.     // 写入数据到数据流,格式为:数据包大小(32bit)+数据
  182.     stream << (quint32)0 << data;
  183.     // 移到流索引为0处, 用数据大小覆盖
  184.     stream.device()->seek(0);
  185.     stream << dataSend.size();
  187.     QList<QTcpSocket*>::iterator it;
  188.     // 把服务端的图片发给所有连接的客户端
  189.     for(it = clients.begin(); it != clients.end(); ++it)
  190.     {
  191.         (*it)->write(dataSend);
  192.     }
  193. }

3 客户端

  1. #include "widget.h"
  2. #include "ui_widget.h"
  3. #include <QDebug>
  4. #include <QFile>
  5. #include <QFileDialog>
  6. #include <QDateTime>
  8. Widget::Widget(QWidget *parent) :
  9.     QWidget(parent),
  10.     ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  14.     ui->splitter->setStretchFactor(0,2);    // 上面占2份
  15.     ui->splitter->setStretchFactor(1,1);    // 下面占1份
  17.     connect(&tcpSocket,SIGNAL(connected()),
  18.             this,SLOT(onConnected()));
  19.     connect(&tcpSocket,SIGNAL(disconnected()),
  20.             this,SLOT(onDisconnected()));
  21.     connect(&tcpSocket,SIGNAL(error(QAbstractSocket::SocketError)),
  22.             this,SLOT(onError(QAbstractSocket::SocketError)));
  23.     connect(&tcpSocket,SIGNAL(readyRead()),
  24.             this,SLOT(onReadyRead()));
  27.     // 客户端主动连接服务端
  28.     tcpSocket.connectToHost("127.0.0.1",5485);  // host地址为本机,端口号为5485
  30.     imageIndex = 0;
  31.     LastPacksize = 0;
  32. }
  34. Widget::~Widget()
  35. {
  36.     delete ui;
  37. }
  39. void Widget::onConnected()
  40. {
  41.     qDebug() << "connected";
  42. }
  44. void Widget::onDisconnected()
  45. {
  46.     qDebug() << "disconnected";
  48.     QObject* obj = this->sender();
  49.     QTcpSocket* socket = qobject_cast<QTcpSocket*>(obj);
  50.     if(socket == 0) return; // 说明是客户端先关闭,不用做其他操作
  51.     socket->close();    // 如果是服务端先关闭,就关闭这个socket
  52. }
  55. void Widget::onError(QAbstractSocket::SocketError socketError)
  56. {
  57.     qDebug() << "error: " << socketError;
  58. }
  61. void Widget::onReadyRead()
  62. {
  63.     QObject* obj = this->sender();
  64.     QTcpSocket* socket = qobject_cast<QTcpSocket*>(obj);
  67.     quint64 sizeNow = 0;
  68.     QDataStream stream(socket);
  69.     do
  70.     {
  71.         // 当前缓冲区里的数据大小
  72.         sizeNow = socket->bytesAvailable(); // 获取等待读取的传入字节数。
  74.         if(LastPacksize == 0)   // 第一次要先读取包大小
  75.         {
  76.             // 第一次要先判断传入字节数是否小于4字节
  77.             if(sizeNow < sizeof(quint32))   return;
  79.             stream >> LastPacksize;
  80.         }
  81.         qDebug() << "sizeNow:"<< sizeNow;
  82.         qDebug() << "sizePack:"<< LastPacksize;
  83.         // 包不完整返回,防止出现半包
  84.         if(sizeNow < LastPacksize - 4)     return;
  86.         // 包已经完整,数据读取完毕
  87.         qDebug() << "包已经完整,数据读取完毕";
  88.         LastPacksize = 0;
  90.         // 设置输出框内容
  91.         QString dateTime = QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss");
  94.         QByteArray dataFull;
  95.         stream >> dataFull; // 读取完整数据
  96.         QString prefix = dataFull.mid(0,4);
  97.         if(prefix == "TXT:")
  98.         {
  99.             ui->tedtOutput->append(dateTime);
  100.             QString textContent = dataFull.mid(4);
  101.             ui->tedtOutput->append("<p>" + textContent + "</p>");
  102.         }
  103.         else if(prefix == "IMG:")
  104.         {
  105.             ui->tedtOutput->append(dateTime);
  106.             QString index = QString::number(imageIndex);
  109.             QFile file(index + ".png");
  110.             file.open(QIODevice::WriteOnly);
  111.             file.write(dataFull.mid(4));
  112.             file.close();
  114.             QString htmlTag = QString("<img src=\"%1\"></img>").arg(index + ".png");
  115.             ui->tedtOutput->append(htmlTag);
  117.             imageIndex++;
  118.         }
  120.         // 判断剩下的字节数,是否会有粘包的情况
  121.         sizeNow = socket->bytesAvailable();
  122.         qDebug() << "剩余等待读取的传入字节数 sizeNow=" << sizeNow;
  123.     }while(sizeNow > 0);
  124. }
  127. void Widget::on_btnSend_clicked()
  128. {
  129.     QString qstrSend = ui->tedtInput->toPlainText();
  130.     if(qstrSend.isEmpty())  return;
  132.     QString input = "TXT:"+ qstrSend;
  133.     QByteArray data = input.toLocal8Bit();
  135.     // 封装数据包,加上包头
  136.     QByteArray dataSend;    // 封装的数据包
  137.     QDataStream stream(&dataSend,QIODevice::WriteOnly); // 定义一个数据流
  138.     // 写入数据到数据流,格式为:数据包大小(32bit)+数据
  139.     stream << (quint32)0 << data;
  140.     // 移到流索引为0处, 用数据大小覆盖
  141.     stream.device()->seek(0);
  142.     stream << dataSend.size();
  144.     tcpSocket.write(dataSend);
  145.     ui->tedtInput->clear();
  146. }
  149. void Widget::on_btnImage_clicked()
  150. {
  151.     QString imagePath = QFileDialog::getOpenFileName(this,"请选择一张图片",".","Images (*.png *.xpm *.jpg)");
  152.     if(imagePath.isEmpty()) return;
  154.     QFile file(imagePath);
  155.     file.open(QIODevice::ReadOnly);
  156.     QByteArray data = "IMG:" + file.readAll();
  157.     file.close();
  159.     // 封装数据包,加上包头
  160.     QByteArray dataSend;    // 封装的数据包
  161.     QDataStream stream(&dataSend,QIODevice::WriteOnly); // 定义一个数据流
  162.     // 写入数据到数据流,格式为:数据包大小(32bit)+数据
  163.     stream << (quint32)0 << data;
  164.     // 移到流索引为0处, 用数据大小覆盖
  165.     stream.device()->seek(0);
  166.     stream << dataSend.size();
  168.     tcpSocket.write(dataSend);
  169. }