Ubuntu20.04+Qt5.15.2+Webassembly+qmqtt模块构建Web端物联网平台

前言

 课设需要，需要搭建一个Web网站展示采集到的数据并展示。之前有留意到QT一直有个在实验室测试的模块Webassembly，本着对Qt特有的情怀，想着课设要实现做的功能也不多，而且一份代码换个编译器就能编译出跨平台各种版本，所以决定尝试使用这个模块来做（结果发现确实不成熟，踩了不少坑），关于是否应该用这个东西，知乎也有相关讨论，这里贴上地址https://www.zhihu.com/question/363321451

环境搭建

Qt下载与安装

 首先是下载Qt的安装包，注意这里我通过非官网渠道找到的Qt离线下载包似乎都没有提供Webassembly模块，而官网的在线安装是有的，所以只能可能得选择在线安装的方式。
 https://download.qt.io/official_releases/online_installers/qt-unified-linux-x64-online.run.mirrorlist
 注意选择CN源下载速度会快很多，但貌似之前加载资源的时候也会提示无法访问等情况（明明是CN源不知为何还会这样），这时候需要科学上网一下才能继续安装进行。注意安装时必须勾选Sources和Webassembly模块
 下载完成后需要安装一下GCC编译器和运行安装包所需要的依赖库才能打开

#安装所需要的gcc编译器
apt-get install build-essential
#安装Qt运行所需要的库
apt-get install libxcb-xinerama0
apt-get install mesa-common-dev
apt-get install python

安装Emscripten

 emscripten是一个用于编译为 asm.js 和 WebAssembly 的工具链，根据官网文档，Qt5.15.2支持最好的版本是1.39.8，因此到github下载该版本tar.gz格式并解压。
 https://github.com/emscripten-core/emsdk/tags?after=1.39.9
下载后解压，进入根目录，打开Terminal，输入安装指令

./emsdk install 1.39.8

然后激活并配置环境变量

./emsdk activate --embedded 1.39.8
source emsdk_env.sh

配置完成后，查看下版本，若出现下述提示则说明安装成功。

em++ --version

编译源码

 cd进源码Src目录（一般Ubuntu会安装软件在opt目录，笔者的Src目录就在/opt/Qt/5.15.2/Src），然后在此目录创建build文件夹，并转入该文件夹。

mkdir build
cd build

 执行如下命令

../configure -xplatform wasm-emscripten -nomake examples -feature-thread  -prefix ~/Qt/wasm

-prefix后面的目录可根据直接的需要进行修改。
成功之后就开始make和make install二连啦。

make -j4
make install

打开Qt Creator进行测试

 打开Qt Creator，点击Tools转到options，在Devices中找到Webassembly，查看是否能检测出设置

随便找一个官方Examples的Demo，运行测试下。
配置中选择Qt 5.15.2 Webassembly编译器
Build and Run后在浏览器中打开，如图所示，说明环境配置成功。

qmqtt库的配置

 因为课设内容需要用到mqtt协议和网关数据进行交互，这里我们采用的是阿里云物联网平台提供的mqtt服务器。对于mqtt协议的支持，主要有两个库，一个是Qt官方提供的，一个是EMQ这边的第三方库，笔者经过多次调试EMQ这边提供的库无法在5.15.2，Webassembly环境下编译
（后来github仓库得知“To add websocket support, compile the library with Qt >= 5.7, and specify ‘CONFIG += QMQTT_WEBSOCKETS’. This also works when compiling qmqtt for WebAssembly.”）
 有尝试过利用Qt6版本的webassembly进行编译，却一直卡在上面源码编译那一步。

官方mqtt库的编译与配置

 下载地址：https://github.com/qt/qtmqtt
 打开后注意在Dev中选择相对应的qt版本号，我们这边则选择5.15.2，然后下载解压，在QtCreator中打开该项目。
 注意，这里的编译器要选择WebAssembly（当然也建议把GCC的也配置了，这样直接一份代码就可以有一个Web端一个客户端了嘛）

注意Build的目录可以直接选择编译器的位置，这样就可以不用手动复制过去啦。
然后点击左下角的小锤子进行编译

至此官方Mqtt库这边配置就完成了。

测试官方qmqtt库

 可利用下面给出的github仓库中的mqtt_simpleclient来测试
https://github.com/msorvig/qt-webassembly-examples/tree/master/mqtt_simpleclient
 若编译成功浏览器成功打开则证明配置成功辽。(截至笔者发文前默认的测试mqtt服务器链接是可以连上的)

 注意，当自己编写代码时，项目.pro文件需要添加

QT+=network websockets mqtt

才可编译成功运行，编译该项目的时候可能会遇到头文件找不到的情况，若检查上一步编译mqtt库无误的情况下，应该是头文件大小写的问题，修改成与系统文件一致即可。

利用阿里云物联网平台搭建mqtt服务器

 由于这个不是本篇博文的重点，故这里简略介绍一下，主要是说一下当时踩到的几个坑。
1.需要添加两个设备，一个设备只能登录一个账号密码，我们这边网关和云服务器各需要登录，因此需要添加两个设备。

2.通过设定产品topic，采用json格式传输数据。

3.通过云产品流转实现两个设备的数据流通，由于我们这边就是直接将收到的json数据转发，解析代码如下：

//通过payload函数，获取设备上报的消息内容，并按照JSON格式转换。
var data = payload("json");
//直接流转物模型上报数据。
writeIotTopic(解析器ID, "/sys/gmgggrMLGe1/设备名/thing/service/property/set", data);

4.为了使浏览器的应用程序可以像普通设备一样，具备与服务端建立MQTT长连接的能力，应采用WebSocket的MQTT协议进行连接。查阅阿里云官方文档可知，阿里云mqtt服务器WebSocket方式使用443端口。

参考网站

Qt+WebAssembly学习笔记（二）ubuntu20.04+Qt5.15.2开发环境搭建
Qt5 使用 Qt官方Qt MQTT
Qt for WebAssembly官方文档
MQTT-WebSocket连接通信