Qt Quick Publication

Use Qt Quick Controls to create an application that can publish on MQTT topics.

Qt Quick Publication 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.

创建客户端

Create the wrapper class QmlMqttClient that has QMqttClient as a member:

private:
    Q_DISABLE_COPY(QmlMqttClient)
    QMqttClient m_client;
};
					

Connect the wrapper methods to the methods of QMqttClient in the constructor:

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);
}
					

A wrapper method has the same name as the wrapped method. In the simplest case, it is just a single method call:

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

It is also possible to customize a wrapper method by extending it with some additional functionality:

void QmlMqttClient::setPort(int newPort)
{
    if (newPort < 0 || newPort > std::numeric_limits<quint16>::max()) {
        qWarning() << "Trying to set invalid port number";
        return;
    }
    m_client.setPort(static_cast<quint16>(newPort));
					

在 QML 中注册类

main.cpp file, load the QML type Main from the module publication:

    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    QObject::connect(
            &engine, &QQmlApplicationEngine::objectCreationFailed, &app,
            []() { QCoreApplication::exit(EXIT_FAILURE); }, Qt::QueuedConnection);
    engine.loadFromModule(u"publication"_s, u"Main"_s);
					

Now use the MqttClient type in the Main.qml file to create an MQTT client:

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

文件: