Thursday, August 15, 2019

QMqtt & QWebAssembly

Qt for WebAssembly is an exciting new platform for Qt. It means that Qt applications can run in a web browser. This means that deploying a Qt application is as easy as copying the files to your properly configured web server and handing out the url, for your users to run in their web browser.

Mqtt is a machine to machine communication protocol, which is used for messaging in IoT. Websocket is a two way communication protocol between a web browser and a web server.

QtMqtt has been ported to run on the WebAssembly platform, using QtWebSockets as it's transport. There is a catch to getting it working, however. That catch is that you need to use the WebSocketIODevice class that is in the QtMqtt websocketsubscription example app. WebSocketIODevice depends on the QtWebSocket module.

You need to copy websocketiodevice.h and websocketiodevice.cpp into your project, using the WebSocketIODevice as QMqttClient's transport.

In a nutshell, at a minimum,  code such as this:

QMqttClient m_client
WebSocketIODevice m_device;
m_device.setUrl(m_url);
connect(&m_device, &WebSocketIODevice::socketConnected, this, [this]() {
    m_client.setTransport(&m_device, QMqttClient::IODevice);
}

Then you can use the QMqttClient as normal.

You can read more about Qt for WebAssembly, QtMqtt and QtWebSockets in the book Hands-On Mobile and Embedded Development with Qt 5

2 comments:

Unknown said...

Hi Lorn,
Firstly, thanks for your hints on getting QMQTT running on Web-assembly.
It works fine on my desktop apps connected to a HiveMQ broker.
However i still see an error when running the code on webassembly. Was wondering if you encountered the same issue and what was the fix for it.
The error i see in the browser is:

Uncaught TypeError: Failed to execute 'send' on 'WebSocket': The provided ArrayBufferView value must not be shared.
at methodCaller_void_$emscripten$$val$ (eval at new_ (eval at completeLoadEmscriptenModule (qtloader.js:439)), :5:26)
at __emval_call_void_method (eval at completeLoadEmscriptenModule (qtloader.js:439), :1:149508)

Would appreciate any help with this issue.

Sumer

deviceguy said...

Thanks for that, I started a bug report, for easier tracking.

Sorry, I do not have an answer at this time, I will look into this.