Quick MQTT Example | Qt MQTT 6.4.1

- Qt 6.4
- Qt MQTT
- Qt MQTT Examples
- Quick MQTT Example
- Qt 6.4.1 Reference Documentation

# Quick MQTT Example

Registering QMqttClient to QML and using it in a Qt Quick user interface.

Quick MQTT demonstrates how to register QMqttClient as a QML type and use it in a Qt Quick application.

Qt MQTT does not provide a QML API in its current version. However, you can make the C++ classes of the module available to QML.

#### Creating a Client

We create a `QmlMqttClient` class with the QMqttClient class as a base class:

     QmlMqttClient::QmlMqttClient(QObject *parent)
         : QObject(parent)
     {
         connect(&m_client, &QMqttClient::hostnameChanged, this, &QmlMqttClient::hostnameChanged);
         connect(&m_client, &QMqttClient::portChanged, this, &QmlMqttClient::portChanged);
         connect(&m_client, &QMqttClient::stateChanged, this, &QmlMqttClient::stateChanged);
     }

We use the `subscribe()` function to create a subscription object:

     void QmlMqttClient::connectToHost()
     {
         m_client.connectToHost();
     }

We connect to QMqttSubscription::messageReceived( ) to receive all messages sent to the broker:

     void QmlMqttClient::disconnectFromHost()
     {
         m_client.disconnectFromHost();
     }

We use an QMqttMessage object to store the payload of a received message:

     void QmlMqttSubscription::handleMessage(const QMqttMessage &qmsg)
     {
         emit messageReceived(qmsg.payload());
     }

#### Registering Classes in QML

In the `main.cpp` file, we register the `QmlMqttClient` class as a QML type, MqttClient:

     int main(int argc, char *argv[])
     {
         QGuiApplication app(argc, argv);

         QQmlApplicationEngine engine;

         qmlRegisterType<QmlMqttClient>("MqttClient", 1, 0, "MqttClient");

In addition, we register the `QmlMqttSubscription` class as an uncreatable type:

         qmlRegisterUncreatableType<QmlMqttSubscription>("MqttClient", 1, 0, "MqttSubscription", QLatin1String("Subscriptions are read-only"));

We can now use the MqttClient type in the `main.qml` file to create an MQTT client:

         MqttClient {
             id: client
             hostname: hostnameField.text
             port: portField.text
         }

Files:

- quicksubscription/CMakeLists.txt
- quicksubscription/main.cpp
- quicksubscription/main.qml
- quicksubscription/qml.qrc
- quicksubscription/qmlmqttclient.cpp
- quicksubscription/qmlmqttclient.h
- quicksubscription/quicksubscription.pro