QT 篇五、手把手教学用QT编写TCP上位机并显示温湿度

会敲代码的摩的佬

已于 2024-06-08 15:51:06 修改

阅读量2.6k

点赞数 30

分类专栏： QT应用记录以防忘记笔记文章标签： qt tcp/ip c++

于 2024-06-04 16:15:53 首次发布

本文链接：https://blog.csdn.net/qq_41930631/article/details/139357844

版权

QT应用篇

一、QT上位机串口编程
 二、QML用Image组件实现Progress Bar 的效果
 三、QML自定义显示SpinBox的加减按键图片及显示值效果
 四、window编译LibModbus库并用QT编写一个Modbus主机
 五、手把手教学用QT编写TCP上位机并显示温湿度

目标：
1.上位机显示温湿度
2.qt编写tcp服务器端并成功通讯

软件：
TCP客户端
我这里我用的时候通讯猫：下载地址:https://wws.lanzoui.com/iE96Rpk2cxc

软件篇

1.新建QT工程

1.首先，新建工程
在这里插入图片描述
2.然后自定义项目名称和路径（路径和名称不能有中文）

3.构建系统
一般是默认直接下一步在这里插入图片描述
然后自己定义类名称
2.这里最好勾一下，这样就可以快速的先完成界面设计
如果不✓上的话，就要自己手动写代码来完成UI设计

这里直接下一步

编译套件一般来说window大部分选择MinGw64

下一步

如你所看到的，这里就算完成QT工程创建了

试着先编译一下快捷键 CTRL+R或者点击左下角绿色三角形
在这里插入图片描述

编译成功
可以看到弹出一个空白界面
在这里插入图片描述

双击.ui文件，打开界面设计
在这里插入图片描述
图片中的红色框框里面代表许多控件

我就不一一介绍了

找到label控件，拖到界面中
在这里插入图片描述
随便输入点内容
然后点击编译

到这里创建工程部分就算结束了

2.UI设计

1.添加标签

这四个都是标签，所以不用修改名称
在这里插入图片描述

2.添加按钮输入框和显示温湿度标签

添加完成后在右下角的控件属性那里可以看到控件的属性
位置，大小，字体等等
顺便修改字体大小和控件名称，方便后续自己用的时候好找一点

在这里插入图片描述
左上角的标签的名称我也修改了，后续用来显示日期和时间

按钮的属性的check 选中，把按钮的信号槽函数添加到文件里面，这里用的是官方的自动生成功能

可以看到cpp文件和h文件已经生成槽函数了
后续可以在里面添加功能来实现按钮的点击作用

在这里插入图片描述

到这里UI部分暂时设计完成

3.功能设计

双击打开TCPtest.pro文件在第一行后面加上 network

在这里插入图片描述
然后开是编写TCP服务器部分
由于是TCP通讯，所以要添加TCP部分的控件
打开tcptest.h文件添加内容

#include <QTcpServer>   //服务器头文件
#include <QTcpSocket>   //客户端头文件
#include <QList>    //链表头文件用来存放客户端容器
#include <QDebug>   //打印
#include <QTimer>   //定时器
#include <QDateTime> //日期时间
#include <QTime>    //时间
#include <QDate>    //日期
#include <QMessageBox>  //弹窗

#define  LOG qDebug()<<QTime::currentTime() //

在public:添加

    //定义服务器指针
    QTcpServer *tcp_server;
    //定义客户端指针链表容器
    QList<QTcpSocket *> clientList;

    QTcpSocket *socket;

在private slots:添加函数

	void timer_500ms();

    void newConnectionSlot();

    void readyReadSlot();  //自定义处理readyRead信号的槽函数

    void startServer();

    void stopServer();

	void dateProcess(QByteArray qstr);

在private:添加一个定时器

QTimer *t_timer500;

添加完成后如图
在这里插入图片描述

打开tcptest.cpp
在ui->setupUi(this);后面添加

    //给服务器指针实例化对象
    tcp_server = new QTcpServer(this);  //服务器创建完成

    t_timer500 = new QTimer(this); //实例化定时器

    t_timer500->start(500);  //开始运行，500ms回调一次

    connect(t_timer500,SIGNAL(timeout()),this,
                             SLOT(timer_500ms())); //手动连接定时器的信号和槽函数

然后在构建槽函数内需要实现的的功能
1.timer_500ms()这里要是实现左上角的日期标签刷新显示时间

void TCPtest::timer_500ms()//500ms运行一次的函数
{
   
    QDateTime datetime;
    datetime = QDateTime::currentDateTime(); //把日期时间赋值刷新

    ui->label->setText(datetime.toString("yyyy/MM/dd hh:mm:ss")); //label为左上角显示日期的标签
}

2.startServer()这里要开始创建TCP服务器，获取监听的端口，并建立监听

void TCPtest::startServer()
{
   
    //获取UI界面的端口号
    quint16 port = ui->led_port->text().toUInt();

    ui->led_port->setEnabled(false);

    //返回值：成功返回真，失败返回假
    if(!tcp_server->listen(QHostAddress::Any,port))
    {
   
        LOG<<"Error!:"<<tcp_server->errorString();
        QMessageBox::critical(this, "失败", "服务器启动失败");
    }

    //执行到这表明服务器启动成功，并对客户端连接进行监听，如果有客户端向服务器发来连接请求，那么该服务器就会自动发射一个newConnection信号
    //我们可以将信号连接到对应的槽函数中处理相关逻辑
    connect(tcp_server, &QTcpServer::newConnection, this, &TCPtest