前几日,接到上级任务——在不改动C++客户端的基础上,实现在浏览器中打开C++客户端,并进行交互。本想着是天方夜谭,谷歌一番,竟果真有此等尝试。官方参考文档传送门:https://wiki.qt.io/Qt_for_WebAssembly。在下查资料时,不禁感叹教程寥寥,故作此文供大家参考。
1.技术简介
首先介绍一下webassembly技术,官网的解释为:WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
它提供了一种在网络上以接近本机的速度运行客户端程序的方法。某高级语言写的某功能库–>emscripten编译–>.wasm文件–>结合WebAssembly JS API–>浏览器中运行,完成一部分用js写,而后依靠浏览器解释执行。
即WebAssembly(缩写为Wasm)是基于堆栈的虚拟机的二进制指令格式。 Wasm被设计为一个可移植的目标,用于编译C / C ++ / Rust等高级语言,支持在Web上部署客户端和服务器应用程序。简单来说,就是webassembly技术能让C/C++程序被编译为wasm文件,这个文件能够在浏览器上运行,无需任何下载步骤或特殊服务器要求(除了提供wasm文件)。点击对应链接以后,会自动下载对应的wasm文件,然后在浏览器中编译运行。
QT从今年四月份开始开始研究qt for webassembly这项技术,使得qt程序也能通过webassembly技术在浏览器上运行,但截至目前,它支持的浏览器有Chrome,Safari,Opera和Firefox,并且支持的qt库较为有限,还在进一步研究中。
下面是官方给出的几个运行示例,大家可以先感受一下:
http://example.qt.io/qt-webassembly/opengl/hellowindow/hellowindow.html
使用OpenGL(开源图形库)调用呈现Qt徽标的示例。此示例显示您还可以将其用于自定义OpenGL代码。
http://example.qt.io/qt-webassembly/SensorTagDemo/SensorTagDemo.html
一个有趣的行业自动化用例原则上,可以显示使用Qt WebSockets检索的实时数据。
http://example.qt.io/qt-webassembly/quickcontrols2/gallery/gallery.html
Qt Quick Controls 2中的可用控件库。这表明您可以使用Qt Quick和Qt Quick Controls 2来制作您的网页以及部署应用
http://example.qt.io/qt-webassembly/widgets/richtext/textedit/textedit.html
一个简单的文本编辑器,用Qt Widgets编写。此示例显示您还可以使用Qt Widgets创建Web部署的应用程序。
2.环境要求
VMware12+Ubuntu18.04+emscripten+qt-5.11.1+官方最新qtbase文件
Ubuntu18.04下载地址:https://www.ubuntu.com/download/desktop
qt-5.11.1-opensource下载地址:https://www.qt.io/download
记得下载开源版,需要先注册账户,如果嫌麻烦——参见百度云链接。
链接:https://pan.baidu.com/s/1Zrws6FR-9dD2h1EaAczq8Q 密码:ke3t
以下省略Linux下安装qt步骤啦~~~大家自行搜索CSDN上很多的~~
3.搭建步骤
-
安装emscripten工具
前期准备>>>
sudo apt-get update
sudo apt-get install python2.7
sudo apt-get install nodejs
sudo apt-get install cmake
sudo apt-get install default-jre
sudo apt-get install gcc
安装>>>
git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
source ./emsdk_env.sh
至此可以编译简单C/C++文件,在浏览器上访问。
Eg: emcc hello.c -s WASM=1 -o hello.html
emrun --no_browser --port 8080 .(通过端口访问)
测试方法:本地打开hello.html or 访问localhost:port/hello.html
-
QT环境配置
cd /Qt/5.11.0/Src
sudo rm –rf qtbase qtdeclarative qtwebsockets(删除文件夹)
cd ..
sudo chmod o+w Src(给上级目录写权限)
git clone -b wip/webassembly https://code.qt.io/qt/qtbase.git
git clone -b wip/webassembly https://code.qt.io/qt/qtdeclarative.git
git clone -b wip/webassembly https://code.qt.io/qt/qtwebsockets.git
./configure -xplatform wasm-emscripten -developer-build -release -static -no-feature-thread -nomake tests -nomake examples -no-dbus -no-headersclean -no-ssl -no-warnings-are-errors
make
配置完成后,检查一下qmake路径
/your-build-path/qtbase/bin/qmake
/your-build-path/qtbase/qmake/qmake
4.demo测试
官方demo:
https://github.com/msorvig/qt-webassembly-examples
下载后,打开终端
/your-app-path$ ~/your-build-path/qtbase/bin/qmake *.pro
make
emrun --no_browser --port 8080 .(通过端口访问)
至此可以在本地打开app.html or 访问localhost:8080/app.html
最后感谢@kokawa2003的分享:https://qiita.com/kokawa2003/items/68e0273b9e9843aa7b51