（三）stm32+dht11+esp8266、MQTT+阿里云采集温湿度数据，进行可视化显示。

1. 介绍

前两篇文章主要说了如何使用阿里云和MQTT.fx。已经实现了设备与设备之间的通信，如果还不会使用阿里云实现设备之间通信的，先移步去看我的前两篇文章，按着步骤来小白也行。这篇文章主要展示实际应用，以及QT客户端核心代码。

2. 选型

2.1硬件：采用keil搭建代码

主控芯片:stm32f103 c8t6

wifi模块：esp8266 01s

温湿度模块：dht11传感器

usb转ttl进行串口调试，stlink _v2进行程序下载。还有面包板，连接线若干。

连接好之后就是这个样子了：

2.2软件：QT

QT提供了MQTT官方库，下载库之后直接使用就可以了，使用起来是非常的方便好用。我的QT界面1.0版本就是下面这样了。可以收到硬件发送过来的信息：这是收到的温度信息。现在显示的是Json字符串数据，可以用解析后拿到具体的数据，你们可以再做一个可视化的label什么的显示出来。

连接成功后串口调试助手就会显示如下数据：

顺便可以去阿里云去看看硬件、软件有没有连接上：

我这里QT客户端连接的qt_client这个设备，stm32硬件连接的iot_mq2这个设备，都是已经在线了。

3. 代码

QT代码：

mainwindow.c

#include "mainwindow.h"
#include "ui_mainwindow.h"

static QString HostName=" ";
static quint16 Port = 1883;
static QString username = "" ;
static QString password = "";
static QString ClientId = "";
static QString m_topic_publish= "/i8sh22T2TuH/qt_client/user/update";
static QString m_topic_get= "/i8sh22T2TuH/qt_client/user/get";

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    mqtt_client=new QMqttClient;
    ConnectOrDisConnect();


    Publish(m_topic_publish);

}

MainWindow::~MainWindow()
{
    delete ui;
}



void MainWindow::ConnectOrDisConnect()
{
    connect(ui->pushButton_connect,&QPushButton::clicked,this,[=](){
        if(mqtt_client->state()==QMqttClient::Disconnected)
        {
            mqtt_client->setHostname(HostName);
            mqtt_client->setPort(Port);
            mqtt_client->setUsername(username);
            mqtt_client->setPassword(password);
            mqtt_client->setClientId(ClientId);
            mqtt_client->connectToHost();

            if(mqtt_client->state()==QMqttClient::Disconnected)
            {
                qDebug()<<mqtt_client->error();
            }
            else if(mqtt_client->state()==QMqttClient::Connecting)
            {
                ui->pushButton_connect->setText("断开");
                ui->label_state->setText("Connect");
                Subcribe();
            }
        }
        else
        {
            mqtt_client->disconnectFromHost();
            ui->pushButton_connect->setText("连接");
            ui->label_state->setText("DisConnect");
        }
    });

}

void MainWindow::Subcribe()
{
    if(mqtt_client->state()==QMqttClient::Connecting)
    {
        qDebug()<<"connect success";
        mqtt_client->subscribe(m_topic_get);
        connect(mqtt_client, SIGNAL(messageReceived(QByteArray,QMqttTopicName)), this, SLOT(receiveMess(QByteArray,QMqttTopicName)));
    }


}

void MainWindow::Publish(QString topic)
{
    connect(ui->pushButton_publish,&QPushButton::clicked,this,[=](){
        if(ui->lineEdit_publish->text()!="")
        {
            if (mqtt_client->publish(topic, ui->lineEdit_publish->text().toUtf8()) == -1)
                   QMessageBox::critical(this, QLatin1String("Error"), QLatin1String("Could not publish message"));
        }
    });

}

void MainWindow::receiveMess(QByteArray message, QMqttTopicName name)
{
    Q_UNUSED(name);
    QString msg=message;
    qDebug()<<msg;
    ui->textBrowser_recv->append(msg);
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include "QDebug"
#include "QLabel"
#include "QFile"
#include "QtMqtt/qmqttclient.h"
#include "QJsonObject"
#include "QJsonDocument"
#include "QJsonArray"
#include "QMessageBox"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

    void init_mqtt();

    void sendTopic(QString data);

    void ConnectOrDisConnect();

    void Subcribe();

    void Publish(QString topic);

public slots:
    void receiveMess(QByteArray message,QMqttTopicName name);



private:
    QMqttClient *mqtt_client;
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.ui