QT基于TCP协议实现数据传输以及波形绘制——安卓APP及Windows程序双版本

文章代码有非常非常之详细的解析！！！诸位可放心食用

这个玩意我做了两个，一个是安卓app，一个是Windows程序。代码并非全部都是由我从无到有实现，只是实现了我想要的功能。多亏了巨人的肩膀，开源万岁！！！

我把程序放到GitHub上，需要的可自取。

安卓app：

windows程序：

（上面暂且为空，过两天把代码整理好就发上来）

下面我分别对安卓app版本和Windows程序版本进行简要技术整理

安卓app:

首先需要对安卓环境进行配置，这个不同的QT版本对应不同的SDK,NDK那些玩意，在这里不做详细解析。

配置环境完成以后就可以使用工程了，烧入手机以后呈现出来的效果是这样的。

 整个工程的框架是：

1、ui页面绘制

ui页面有两个

还有一个就是上面的效果图

主要是一些PushButton、Lable、CharView控件

2、控件槽函数的设计

2.1、第二张图的“全国大学生电子设计大赛上位机”的PushButton

void Widget2::on_MenuBt1_clicked()
{
    if(Widget::flag == 0)//通过判断静态成员变量flag来判断是否创建了Widget
    {
        Widget *first = new Widget;//创建一个新的 Widget
        first->setGeometry(this->geometry());返回当前 Widget2 对象的位置和大小信息，用于Widget的呈现
        first->show();//将新创建的 Widget 对象显示在屏幕上
    }
    this->close();//关闭Widget2
}

这段代码的功能就是按下按钮以后，创建一个Widget并关闭Widget2，实现简单的跳转功能。

2.2、按下开启服务器按钮之后的槽函数

void Widget::on_pushButton_Open_clicked()
{
    if(net_flag == 0)//检查是否连接网络
    {
        if(ui->lineEdit_IP->currentText() != "")//如果IP地址栏不为空
        {
            QString str = ui->lineEdit_IP->currentText();//收集当前IP地址栏的IP地址
            if(isIpAddr(str))//判断IP地址是否有效
            {
                address.setAddress(str);//设置收集的IP地址为当前IP地址
                if(ui->lineEdit_Port->text() != "")//判断端口栏是否为空
                {
                    port = ui->lineEdit_Port->text().toUInt();//设置当前端口栏的数字为端口号，并且转为uint16_t格式
                    net_flag = 1;//网络连接标志
                    tcpServer->listen(address,port);//传入IP地址和端口号开始监听
                    connect(tcpServer,SIGNAL(newConnection()),this,SLOT(TCPnewconnect_slot()));//当连接成功后，将 newConnection 信号连接到 this（即 Widget 对象）的 TCPnewconnect_slot() 槽函数
                    ui->label_show->setText("正在连接...");//ui页面上的label_show发送字符串"正在连接..."
                }
                else//与上面对应，如果端口栏为空
                {
                    QMessageBox::warning(NULL, QStringLiteral("警告"), QStringLiteral("端口号不能为空"),QMessageBox::Ok | QMessageBox::Ok);
                }
            }
            else//与上面对应，如果IP地址无效
            {
                QMessageBox::warning(NULL, QStringLiteral("警告"), QStringLiteral("IP不合法"),QMessageBox::Ok | QMessageBox::Ok);//弹窗警告
            }
        }
        else//与上面对应，如果为IP地址栏为空
        {
            QMessageBox::warning(NULL, QStringLiteral("警告"), QStringLiteral("IP不能为空"),QMessageBox::Ok | QMessageBox::Ok);//弹窗警告
        }
    }
}

这个槽函数的作用是：根据IP地址栏和端口号栏的输入信息，判断是否有效以后，根据提供的IP地址和端口号开启监听，并通过connect函数开启一个TCP server，如果连接客户端成功则转到另外一个槽函数TCPnewconnect_slot()，并且输出“连接成功”的信息。

TCPnewconnect_slot()：

void Widget::TCPnewconnect_slot()
{
    tcpSocket = tcpServer->nextPendingConnection();//获取新的客户端连接，并将返回的 QTcpSocket 对象赋值给 tcpSocket 成员变量
    connect(tcpSocket,SIGNAL(readyRead()),this,SLOT(TCPreadyread_slot()));//当有TcpSocket的readyRead()信号，也就是客户端有数据发送上来的时候，连接当前Wiget的槽函数TCPreadyread_slot()
    ui->label_show->setText("网络已连接");//标签显示
}

这个槽函数收到客户端发送的数据以后，再跳转到TCPreadyread_slot()槽函数，这个槽函数是数据处理这块的，我到第四大点的时候再详细讲。

2.3、按下关闭服务器按钮以后的槽函数

void Widget::on_pushButton_Close_clicked()
{
    if(net_flag == 1)//判断网络是否连接，如果是，往下
    {
        tcpSocket->close();//关闭tcpSocket，断开与当前客户端的连接
        tcpServer->close();//关闭tcpServer，停止监听新的客户端连接
        disconnect(tcpServer,SIGNAL(newConnection()),this,SLOT(TCPnewconnect_slot()));//将tcpServer的newConnection()信号与槽函数TCPnewconnect_slot()断开连接
        disconnect(tcpSocket,SIGNAL(readyRead()),this,SLOT(TCPreadyread_slot()));//将tcpSocket的readyRead()信号与槽函数TCPreadyread_slot()断开连接
        net_flag = 0;//将flag置为0，表示网络断开
    }
     ui->label_show->setText("连接已关闭");//输出标签信息
}

这个槽函数是断开对客户端的监听和连接，断开各种信号与相应槽函数的连接，关闭服务器。

3.4、按下扫描按键以后的槽函数

void Widget::on_Scan_clicked()
{
    ui->lineEdit_IP->clear();//IP地址栏全部清空
    QList strIpAddress;
    QList ipAddressesList = QNetworkInterface::allAddresses();//获取主机所有IP地址并存放在ipAddressesList这个列表里
    // 获取第一个本主机的IPv4地址
    int nListSize = ipAddressesList.size();
    for (int i = 0; i < nListSize; ++i)
    {
           if (ipAddressesList.at(i) != QHostAddress::LocalHost &&ipAddressesList.at(i).toIPv4Address())//排除主机IP地址，并且保证IP地址是IPV4格式
           {
               strIpAddress.append(ipAddressesList.at(i).toString());//将满足条件的IP地址放入strIpAddress里面
              // break;
           }
     }
     // 如果没有找到，则以本地IP地址为IP
     if (strIpAddress.isEmpty())strIpAddress.append(QHostAddress(QHostAddress::LocalHost).toString());
     ui->lineEdit_IP->addItems(strIpAddress);//把IP地址显示到IP地址栏

}

这个槽函数是用于查找设备当中的IP地址，并且将它显示到IP地址栏。

3、绘图板块的设计

    //设置坐标轴
    chart2->addSeries(line2);// 添加数据线 line2 到图表 chart2 中
    chart2->setTheme(QChart::ChartThemeQt);//设置图表 chart2 的主题为 Qt 默认的主题


    line2->setName("时域波形");//数据线名称

    line2->setColor(Qt::red);//数据线的颜色

//创建两个 QValueAxis 对象 axisX2 和 axisY2，用于设置 X 轴和 Y 轴的显示样式和属性
    QValueAxis *axisX2 = new QValueAxis;
    QValueAxis *axisY2 = new QValueAxis;



    axisX2->setLabelFormat("%.0f");//显示格式为 "%.0f"，即只显示整数部分
    axisX2->setLabelsAngle(45);//标签角度为 45 度（x轴或者y轴的刻度标签）
    axisX2->setLabelsColor(Qt::blue);//标签颜色
    axisY2->setLabelFormat("%.0f");
    axisY2->setLabelsAngle(45);
    axisY2->setLabelsColor(Qt::blue);


    axisX2->setRange(0,200);//x轴的范围
    axisY2->setRange(0,255);//y轴的范围
    axisX2->setGridLineVisible(true);//设置网格线是否可见
    axisX2->setGridLineColor(Qt::black);//网格线的颜色
    axisX2->setMinorTickCount(1);//精度设置为1
    axisX2->setMinorGridLineColor(Qt::black);//设置小网格为黑色
    axisX2->setMinorGridLineVisible(true);//设置小网格可见
    axisX2->setLabelsVisible(false); //设置刻度是否显示
    axisY2->setGridLineVisible(true);
    axisY2->setGridLineColor(Qt::black);
    axisY2->setMinorTickCount(1);
    axisY2->setMinorGridLineColor(Qt::black);
    axisY2->setMinorGridLineVisible(true);
    axisY2->setLabelsVisible(false); //设置刻度是否显示


    //将 X 轴和 Y 轴添加到图表 chart2 中
    chart2->addAxis(axisX2,Qt::AlignBottom);
    chart2->addAxis(axisY2,Qt::AlignLeft);
    chart2->layout()->setContentsMargins(0, 0, 0, 0);//设置外边界全部为0
    chart2->setMargins(QMargins(0, 0, 0, 0));//设置内边界全部为0
    chart2->setBackgroundRoundness(0);//设置背景区域无圆角



    line2->attachAxis(axisX2);//将数据线 line2 附加到 X 轴 axisX2
    line2->attachAxis(axisY2);//将数据线 line2 附加到 Y 轴 axisY2


    ui->widget_2->setChart(chart2);//显示图表 chart2

4、数据处理板块设计

根据第二大点所遗留下来的问题，TCPnewconnect_slot()槽函数收到客户端发送的数据以后，再跳转到TCPreadyread_slot()槽函数。数据处理就在TCPreadyread_slot()里面进行。

extern uint8_t  cmd_buffer[A_CMD_MAX_SIZE];
static uint16_t  size = 0;
void Widget::TCPreadyread_slot()
{

    uint16_t  size = 0;

    //定义两个数组
    QByteArray temp1;
    QByteArray temp2;
    int iterationCount = 0; // 用于计数循环迭代次数

    do {
        temp2 = temp1;//先将temp1中的数传递给temp2
        temp1 = tcpSocket->readAll();//temp1读客户端发送的数据
        iterationCount++;//次数加一

        qDebug() << "Iteration:" << iterationCount;打印次数
        qDebug() << "Data read in this iteration:" << temp2;//打印temp2里面的值

    } while (!temp1.isEmpty());//当temp1里面没有数据时，退出循环

        qDebug() << "temp2 len is:" << temp2.length();//打印数据的长度


        // 将QByteArray转换为QString
        QString dataStr = QString::fromUtf8(temp2);//把数组里面的数据转化为字符串

        // 使用split函数按逗号拆分字符串，得到QStringList
        QStringList strList = dataStr.split(',');

        // 创建一个整型数组，用于存储拆分后的数字
        QList dataArray;

        // 遍历QStringList，将每个字符串转换为整数并存储到dataArray中
        //注意这里和C语言的用法不太一样，它的初始化部分和执行条件以及迭代部分会自动检测更新
        for (const QString& str : strList) {
            bool ok;//布尔变量，用于存储ture和false两个值
            int number = str.toInt(&ok);//如果成功，则布尔变量返回ture，并且把值存放在number中，否则布尔变量为false
            if (ok) {//如果布尔变量为ture
                dataArray.append(number);//将number里面的值放入dataArray数组里面
            }
        }

        // 输出拆分后的整数数组
        for (int number : dataArray) {//输出dataArray里面的数
            qDebug() << number;
        }


        qDebug() << "dataArray len is:" << dataArray.length();//长度


    for(int i = 0;i0)                                              //接收到指令
        {
            qDebug() << "Contents of cmd_buffer:";
            for (uint16_t i = 0; i < size; i++) {
                qDebug() << static_cast(cmd_buffer[i]);
            }
            qDebug() << "size:" << size;


            A_ProcessMessage(cmd_buffer, size,ui);                             //指令处理
        }
    }


}

经过上面的分析我们知道，数据处理主要是对指令的处理。而指令处理主要包括以下三个函数

A_queue_push(dataArray[i]);
A_queue_find_cmd(cmd_buffer,A_CMD_MAX_SIZE); 
A_ProcessMessage(cmd_buffer, size,ui); 

下面逐个来分析：

A_queue_push(dataArray[i]);

#define A_CMD_HEAD 0XEE                                                  //帧头
#define A_CMD_TAIL 0xFFFCFFFF                                           //帧尾（这里需要注意以下，不是一个数喔，不然数据溢出没法判断是不是帧尾咯）

typedef struct A_QUEUE
{
    uint16_t _head;                                                       //队列头
    uint16_t _tail;                                                       //队列尾
    uint8_t _data[A_QUEUE_MAX_SIZE];                                       //队列数据缓存区
} A_QUEUE;

static A_QUEUE A_que = {0,0,0};                                            //指令队列
static uint32_t A_cmd_state = 0;                                           //队列帧尾检测状态
static uint16_t A_cmd_pos = 0;                                              //当前指令指针位置

/*!
*  \brief  清空指令数据
*/
void A_queue_reset()
{
    A_que._head = A_que._tail = 0;
    A_cmd_pos = A_cmd_state = 0;
}
/*!
* \brief  添加指令数据
* \detial 串口接收的数据，通过此函数放入指令队列
*  \param  _data 指令数据
*/
void A_queue_push(uint32_t _data)
{
    uint16_t pos = (A_que._head+1)%A_QUEUE_MAX_SIZE; //每来一个数据队列头就会+1
    if(pos!=A_que._tail)                                                //非满状态
    {
        A_que._data[A_que._head] = _data;        //数据依次进入依次存放在队列里面
        A_que._head = pos;                       //队列头每来一个数据+1的基础

        // 添加调试信息
       qDebug() << "A_queue_push: Data added to queue:" << static_cast(_data);
       qDebug() << "A_queue_push: Queue head:" << A_que._head << "Queue tail:" << A_que._tail;
    }

}

A_queue_push(dataArray[i]);的作用是在dataArray数组遍历的条件下，将数组里面的数据依次放入队列中。

A_queue_find_cmd(cmd_buffer,A_CMD_MAX_SIZE);

//从队列中取一个数据
static void queue_pop(uint8_t* _data)
{
    if(A_que._tail!=A_que._head)                                          //非空状态
    {
        
        *_data = A_que._data[A_que._tail];
        A_que._tail = (A_que._tail+1)%A_QUEUE_MAX_SIZE;
    }
}

//获取队列中有效数据个数
uint16_t A_queue_size()
{
    return ((A_que._head+A_QUEUE_MAX_SIZE-A_que._tail)%A_QUEUE_MAX_SIZE);
}
/*!
*  \brief  从指令队列中取出一条完整的指令
*  \param  cmd 指令接收缓存区
*  \param  buf_len 指令接收缓存区大小
*  \return  指令长度，0表示队列中无完整指令
*/
uint16_t A_queue_find_cmd(uint8_t *buffer,uint16_t buf_len)//qdata uint8_t   qsize uint16_t
{
    uint16_t cmd_size = 0;
    uint8_t _data = 0;

    while(A_queue_size()>0)//当队列的长度（有效数字个数）大于0时往下
    {

        //取一个数据
        queue_pop(&_data);

        if(A_cmd_pos==0&&_data!=A_CMD_HEAD)                               //指令第一个字节必须是帧头，否则跳过
        {
            qDebug() << "Skipping data:" << static_cast(_data);
            continue;
        }

        // 输出当前取出的数据和指令指针位置
        qDebug() << "A_queue_find_cmd: Current data: " << _data << " A_cmd_pos: " << A_cmd_pos;

        if(A_cmd_pos

这个函数是寻找一条完整的指令，如果寻找成功则返回指令的字节大小。解析里面有说一条完整的指令需要帧头和帧尾，如果不满足则无法获取cmd_size的值，也就无法进入数据处理函数A_ProcessMessage(cmd_buffer, size,ui);所以发送指令的时候一定要按照标准的格式来发送。我的数据格式如下：

		int touAndCmd[] = {0XEE,0x03,0,1};//帧头以及以下id号，这篇代码下面就讲
		int dataBuffer[] = {10,20,30,40,50,60,70,80,90,100,110,100,90,80,70,60,50,40,30,20,10};
		int zhenwei[] = {0xFF,0xFC,0xFF,0xFF};//真尾，别傻傻的0xFFFCFFFF了（手动狗头）
		
		
		int len = sizeof(touAndCmd)/sizeof(touAndCmd[0]);
		int len1 = sizeof(dataBuffer)/sizeof(dataBuffer[0]);
		int len2 = sizeof(zhenwei)/sizeof(zhenwei[0]);
		

        //下面自己看了，就是发送一串数据，然后以逗号隔开就完了
		for(int i = 0;i

好了，最后一步：

A_ProcessMessage(cmd_buffer, size,ui);怎么处理我们发送上来的数据？

#include "qglobal.h"
#include "cmd_queue.h"
#include "process_fun.h"
#include "widget.h"
uint8_t  cmd_buffer[A_CMD_MAX_SIZE];
void A_ProcessMessage(/*A_PCTRL_MSG */uint8_t msg[2048], uint16_t size,Ui::Widget *dis)
{

/*这是cmd_type的宏定义，其实用不上这么多
enum A_CtrlType
{
    A_kCtrlUnknown=0x00,
    A_kCtrlButton=0x01,                             //按钮
    A_kCtrlText = 0x02,                            //文本
    A_kCtrlGraph = 0x03,                           //曲线图控件
    A_kCtrlTable = 0x04,                           //表格控件
    A_kCtrlMenu = 0x05,                            //菜单控件
    A_kCtrlSelector = 0x06,                        //选择控件
};
*/

      uint8_t cmd_type = msg[1];            //命令类型
      uint8_t screen_id = msg[2];          //画面ID
      uint8_t control_id = msg[3];        //控件ID
//调试信息打印
    qDebug() << "cmd_type:"<param,dis);
          A_NotifyText(screen_id,control_id,&msg[4],dis);
        break;
    case A_kCtrlGraph:
//        A_NotifyGraph(screen_id,control_id,len,&msg->param[2]);                   //画图控件
        A_NotifyGraph(screen_id, control_id, size - 8, &msg[4]); // 注意减去帧头、帧尾和控件ID的长度
    default:
        break;
    }
}




void A_NotifyText(uint16_t screen_id, uint16_t control_id, uint8_t *str,Ui::Widget *dis)
{
    if(screen_id == 0)//判断输入的第二个数是否为0，如果是，就可以为那些基波啥啥啥的赋值了
    {
      if(control_id == 3)
      {
            Widget::updatedata3(str,1,dis);
      }
      else if(control_id == 4)
      {
            Widget::updatedata3(str,2,dis);
      }
      else if(control_id == 5)
      {
            Widget::updatedata3(str,3,dis);
      }
      else if(control_id == 6)
      {
            Widget::updatedata3(str,4,dis);
      }
      else if(control_id == 7)
      {
            Widget::updatedata3(str,5,dis);
      }
      else if(control_id == 8)
      {
            Widget::updatedata3(str,6,dis);
      }
    }
}
void A_NotifyButton(uint16_t screen_id, uint16_t control_id)
{
  if(screen_id == 0)
  {
    if(control_id == 10)
    {

    }
    else if(control_id == 3)
    {

    }
  }
}

void A_NotifyGraph(uint16_t screen_id, uint16_t control_id, uint16_t length,uint8_t *str)
{
    int i = 0;
    float temp = 0;
    if(screen_id == 0)
    {
//      if(control_id == 0)//这里因为我只用了一个画布，所以这里就不要啦
//      {
//          qDebug()<

好的，到这里所有代码基本分析完毕了，由上面我们知道updatedata2是画布的updatedata3是各个空白框的。下面最后来看一下这两个函数：

void Widget::updatedata2(float input)
{
    static int i2=0;//先整个作用在这个函数里边的静态变量
    static QVector data0=line2->pointsVector();//QVector 类型的容器，用于存储图表的数据点

//控制数值在0-255之间
    if(input<0)input = 0;
    if(input>255)input = 255;
    if(i2<1024)
    {
        data0.append(QPointF(i2,input));//在 data0 中添加一个新的数据点，x 坐标为 i2，y 坐标为 input
        i2++;
        line2->replace(data0);//将更新后的数据点更新到 line2 图表中
    }
    else//如果数据量超过1024
    {
        QVector data2;//再来一个容器
        for(int j = 0;j<1023;j++)
        {
            data2.append(QPointF(j,data0.at(j+1).y()));//将 data0 中的数据点从索引 1 开始拷贝到 data2，相当于删除data0中的数据
        }
        data2.append(QPointF(1023,input));//data2添加新的数据点，x 坐标为 1023，y 坐标为 input
        data0 = data2;//更新data0中的数据
        line2->replace(data0);///将更新后的数据点更新到 line2 图表中
    }

}

updatedata3:

void Widget::updatedata3(uint8_t* input,int index,Ui::Widget *dis)
{
    QByteArray qstr;//定义一个数组
    int i = 0;
    for(i;ilineEdit->setText(str);
            break;
        }
        case 2:
        {
            dis->lineEdit_2->setText(str);
            break;
        }
        case 3:
        {
            dis->lineEdit_3->setText(str);
            break;
        }
        case 4:
        {
            dis->lineEdit_4->setText(str);
            break;
        }
        case 5:
        {
            dis->lineEdit_5->setText(str);
            break;
        }
        case 6:
        {
           dis->lineEdit_6->setText(str+"%");
            break;
        }
    }
}

Windows程序和这个大同小异，就不具体介绍了，看懂上面这些Windows程序肯定莫得问题。