qt界面嵌入web_使用Qt WebAssembly而不是JavaScript创建Web用户界面

qt界面嵌入web

当我第一次听说WebAssembly以及使用Qt创建Web用户界面的可能性时（就像在普通C ++中一样），我决定更深入地研究该技术。

我的开源项目Pythonic完全基于Python（PyQt），并且在工作中使用C ++。 因此，这个最小化，简单易懂的WebAssembly教程在后端使用Python，在前端使用C ++ Qt WebAssembly。 它针对像我一样不熟悉Web开发的程序员。

TL; DR

     
     
     
     

      
      
      
      

       
       
       
       git clone https://github.com/hANSIc99/wasm_qt_example
       
       
       
       


       
       
       
       

cd wasm_qt_example
       
       
       
       


       
       
       
       

python mysite.py
      
      
      
      
     
     
     
     

然后使用您喜欢的浏览器访问http://127.0.0.1:7000 。

什么是WebAssembly？

WebAssembly（通常简称为Wasm）主要用于在Web应用程序中执行可移植的二进制代码，以实现高执行性能。 它旨在与JavaScript共存，并​​且两个框架都在同一沙箱中执行。 最新的性能基准表明，根据浏览器的不同，WebAssembly的执行速度大约可提高10–40％，并且鉴于其新颖性，我们仍然可以期待改进。 这种出色的执行性能的缺点是其被广泛用作首选的恶意软件语言。 加密矿工由于其二进制格式而特别受益于其性能和更难发现的证据。

工具链

Qt Wiki上有入门指南 。 我建议完全遵循本指南中提到的步骤和版本。 您可能需要仔细选择Qt版本，因为不同的版本具有不同的功能（例如多线程），并且每个版本都有改进。

要获取可执行的WebAssembly代码，只需通过Emscripten传递Qt C ++应用程序。 Emscripten提供了完整的工具链，构建脚本再简单不过了：

     
     
     
     

      
      
      
      
 
       
       
       
       #!/bin/sh 
       
       
       
       

source ~ 
       
       
       
       / emsdk 
       
       
       
       / emsdk_env. 
       
       
       
       sh 
       
       
       
       

~ 
       
       
       
       / Qt 
       
       
       
       / 5.13.1 
       
       
       
       / wasm_32 
       
       
       
       / bin 
       
       
       
       / qmake
       
       
       
       

make
      
      
      
      
     
     
     
     

与标准C ++编译器（例如Clang或g ++）相比，构建所需的时间大约长10倍。 构建脚本将输出以下文件：

• WASM_Client.js
• WASM_Client.wasm
• qtlogo.svg
• qtloader.js
• WASM_Client.html
• Makefile（中级）

我的（Fedora 30）构建系统上的版本是：

• emsdk：1.38.27
• Qt：5.13.1

前端

前端提供了一些基于WebSocket的功能。

• 将消息发送到服务器：使用WebSocket将简单的字符串消息发送到服务器。 您也可以通过简单的HTTP POST请求来完成此操作。
• 启动/停止计时器：创建WebSocket并在服务器上启动计时器，以定期将消息发送到客户端。
• 上载文件：将文件上载到服务器，该文件将保存到运行服务器的用户的主目录（ 〜/ ）中。

如果您修改代码并遇到如下编译错误：

     
     
     
     

      
      
      
      

       
       
       
       error: static_assert failed due to
       
       
       
       

 requirement ‘bool(-1 == 1)’ “Required feature http for file
       
       
       
       

 ../../Qt/5.13.1/wasm_32/include/QtNetwork/qhttpmultipart.h not available.”
       
       
       
       

QT_REQUIRE_CONFIG(http);
      
      
      
      
     
     
     
     

这意味着请求的功能不适用于Qt Wasm。

后端

服务器工作由Eventlet完成。 我选择Eventlet是因为它重量轻且易于使用。 Eventlet提供WebSocket功能并支持线程。

在mysite / template下的存储库内部，根路径中有一个指向WASM_Client.html的符号链接。 mysite / static下的静态内容也链接到存储库的根路径。 如果修改代码并重新编译，则只需重新启动Eventlet即可将内容更新到客户端。

Eventlet使用Python的Web服务器网关接口（WSGI）。 装饰器扩展了提供特定功能的功能。

请注意，这是绝对最低的服务器实现。 它没有实现任何多用户功能-每个客户端都可以启动/停止计时器，即使对于其他客户端也是如此。

结论

以该示例代码为起点，熟悉WebAssembly，而不会在次要问题上浪费时间。 我不要求完整性或最佳实践集成。 我经历了漫长的学习过程，直到获得满意的结果，我希望这可以使您简要了解这一有前途的技术。

翻译自: https://opensource.com/article/20/2/wasm-python-webassembly

qt界面嵌入web