Qt5-WebAssemlly总结

Qt5-WebAssemlly总结

1 开发环境概述

WebAssembly（缩写为wasm）是由主流浏览器厂商组成的W3C社区团体制定的一个新的规范,是一个可植、体积小、加载快并且兼容 Web 的全新格式。WebAssembly中文网官网http://webassembly.org.cn。wasm是基于堆栈的虚拟机的二进制指令格式。 wasm被设计为一个可移植的目标，用于编译C/C++/Rust等高级语言，支持在Web上部署客户端和服务器应用程序。
QT for webassembly本质就是让你直接在浏览器窗口内运行Qt应用程序。Qt在Qt5.11.0版本中，将其作为工具包更新的一部分正式发布，Qt正式拥抱WebAssembly。
现在开源软件在linux中支持都非常好，开发运行环境都容易部署。但大部分开发者的开发环境基本都是windows，各种技术理论上都是跨平台运行的，所以在windows上部署开发和运行环境也是可行的。

1.1 MinGW-64安装

Qt5对WebAssembly的支持是基于MinGW的，MinGW著名C/C++编译器GCC的Windows版本。https://www.jianshu.com/p/d66c2f2e3537这个网页对这个东西有个详细的介绍。根据笔记本的操作系统选择x86_64-8.1.0-release-win32-seh-rt_v6-rev0.7z这个版本，千万不要选错，如果选择了不匹配的版本，编译QT没问题，最后编译应用程序是时就报错，初学者只要报错就蒙了。刚玩这玩意，让排错，搞笑吧，出错后尽量google然后凭自己的理解，慢慢解决。
将压缩包解压，设置PATH环境变量PATH+=C:\mingw64\bin，测试下出现下图输出，MinGW安装成功。

1.2 EMSDK安装

2012年，Mozilla的工程师AlonZakai在研究 LLVM 编译器时突发奇想：许多 3D 游戏都是用C/C++ 语言写的，如果能将C/C++语言编译成JavaScript代码，它们不就能在浏览器里运行了吗？众所周知，JavaScript 的基本语法与C语言高度相似。
于是，他开始研究怎么才能实现这个目标，为此专门做了一个编译器项目 Emscripten。这个编译器可以将C / C++ 代码编译成 JS 代码，但不是普通的 JS，而是一种叫做asm.js 的JavaScript变体。
摘抄自http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html。
安装步骤如下：
1. git下载项目
tangshu@nktangPC MINGW64 /f/2020/QtWeb/emsdk
$ git clone https://github.com/juj/emsdk.git
2. 安装，会下载node，python，java
F:\2020\QtWeb\emsdk\emsdk>emsdk install sdk-fastcomp-1.38.27-64bit
emsdk的版本不能乱选，乱选后面编译会有问题。Qt5.14.2对应就是emsdk1.38.27，这是Qt官方文档推荐，不同的Qt版本根据其对应文档选用对应emsdk版本。
虽然这里会下载python，但安装之前系统中应该有python，这是我安装后的环境，很明显，系统有多个python。node和java也是一样，在系统中也有多个，好像没什么问题，该用用。

3. 配置当前cmd配置环境变量
F:\2020\QtWeb\emsdk\emsdk\emsdk activate sdk-fastcomp-1.38.27-64bit
这个命令会将emsdk所需要的环境变量配置到当前CMD中，所以根据环境变量不同，输出会有所不同，特别是多次安装emsdk后，可以根据这个输出将这些环境变量永久化。下图是某次执行该命令行后的输出。

这些文字信息要仔细读一读，可以将这些环境变量信息自己永久化到自己系统中。下图是最后安装完成后相关的环境变量信息。其中PATH环境变量我删掉了认为与emsdk无关的内容。
安装完成后，测试下。

1.3 Qt安装

1. Qt5.14.2下载
尝试了下编译发布的QT版本Qt5.15.0，编译了一下没成功，换个网上编译成功的版本。根据网上别人经验，下载了qt-opensource-windows-x86-5.14.2.exe。学习和测试可以下源代码自己编译，正式上项目还是建议买商业版，既然有项目了也就不在乎那点钱了，支持开源，从小事做起。
2. Qt5.14.2安装
最重要的是将源代码选上，其他的暂时也不知有啥用，先装上吧。
现在Qt真心大，安装这会，可以先看会电视剧。
3. Qt5.14.2编译安装
D:\Qt\Qt5.14.2\5.14.2\Src>configure -no-warnings-are-errors -xplatform wasm-emscripten -platform win32-g++ -nomake examples -prefix %CD%\qtbase
配置编译环境，其中有商业版还是开源版选择，选择开源版。配置过程时间不是很长，期待不要出错。
D:\Qt\Qt5.14.2\5.14.2\Src>mingw32-make module-qtbase module-qtdeclarative module-qtwebsockets
em编译qt及其相关组件，这个时间比较长，期待不要出错。编译完成后将Qt相关的东西配置到PATH环境变量中PATH+=D:\Qt\Qt5.14.2\5.14.2\Src\qtbase\bin。
安装完毕，测试下:

2 demo编译测试

网上下载的一个demo，前端用Qt编写的界面，后端用python做的web服务，用到了websocket技术，所以在编译Qt时特别编译了module-qtwebsockets模块，界面中用到没有没看代码，代码也没看懂，正在研究中。
用VSCode做编辑和编译工具，怎么调试代码还在研究中。

2.1 源代码分析

没细看，先做个总结，代码后面慢慢好好看，再补充进来。

2.1.1 main.cpp

QTmain代码

2.1.2 mainwindow.cpp

界面QT代码

2.1.3 mysite.py

websocket服务

2.1.4 WASM_Client.pro

Qt配置文件

2.2 运行效果

2.2.1 编译

qmake生成makefile文件，mingw32-make生成相关文件。

最后生成的相关文件如下：

2.2.2 运行

启动webserver
F:\2020\QtWeb\wasm_qt_example>emrun --no_browser --port 8080 .启动websocket服务
F:\2020\QtWeb\wasm_qt_example>python mysite.py

2.2.3 效果

几个功能都跑起来了：发送消息给服务器，开始/停止定时器，上传文件。

代码上传地址：https://download.csdn.net/download/eruter/12610597