前言

?課設需要，需要搭建一個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連接通信

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/397477.html

標籤：其他

上一篇：ESP32CAM拍照POST上傳

下一篇：【嵌入式22】STM32F1C8T6音頻資料的Flash讀取與DAC播放