Qt无处不在：WebAssembly和WebGL流

Qt Everywhere-这是带有Qt来源的档案的名称。 WebAssembly和WebGL流将在5.12.0中交付，并且各地听起来都不同。 因此要求原型。 Web套接字上的聊天原型被快速部署以测试网络支持。 在猫的帮助下，将有关于在WebAssembly上组装和启动项目的说明，这是从C ++调用JavaScript的示例。

使用WebAssembly的Qt程序集

首先，您需要放置工具链emscripten ，我们将收集Qt。 记住设置环境变量，以便qmake找到emcc。 使用以下参数运行configure脚本：

 ./configure \ -prefix /home/dmitry/Qt/5.12.0/wasm \ -xplatform wasm-emscripten \ -confirm-license -opensource \ -nomake tests \ -c++std c++1z \ -nomake examples \ -release \ -no-dbus \ -skip qtxmlpatterns \ -skip qttools 

与其他地方一样：

 $ make $ make install 

组装和启动项目

 $ ~/Qt/5.12.0/wasm/bin/qmake $ make $ emrun chat.html 

平台相关代码

缝制后端挂起的网址不是很好，因为 想在任意端口上运行。 如果需要通过浏览器进行工作，则需要使用location.hostname和location.port来确定后端在哪里运行。 为此，您将不得不使用JavaScript编写一些内容。

对于喜欢定义的人，有Q_OS_WASM ，但是我更喜欢在pimpl和单个文件中取出代码。 Pimpl在这里是多余的，但是我会将代码分散到不同的文件中

让我们进行一些配置

 //config.h #pragma once #include <QtCore/QUrl> class Config { public: static QUrl wsUrl(); }; 

和两个实现

 //config.cpp #include <QtCore/QCoreApplication> #include <QtCore/QCommandLineParser> #include "config.h" QUrl Config::wsUrl() { QCommandLineParser parser; QCommandLineOption wsOption(QStringList() << "u" << "url" , "WebSocket url" , "url" , "ws://localhost:1234"); parser.addOption(wsOption); parser.process(*QCoreApplication::instance()); return QUrl(parser.value(wsOption)); } 

 //config_wasm.cpp #include <QtCore/QByteArray> #include <emscripten/emscripten.h> #include <emscripten/html5.h> #include "config.h" QUrl Config::wsUrl() { QByteArray buff(1024, 0); EM_ASM_({ var url = "ws://"+ window.location.hostname + ":" + window.location.port + "/ws"; stringToUTF8(url, $0, $1); }, buff.data(), buff.size()); return QUrl(QString::fromUtf8(buff)); } 

它仍然需要在pro文件中注册

 wasm { SOURCES += config_wasm.cpp } else { SOURCES += config.cpp } 

EM_ASM_是EM_ASM_魔术，可让您从C ++调用JavaScript代码。 虽然可以不用JavaScript来完成

 emscripten::val location = emscripten::val::global("location"); auto host = QString::fromStdString(location["host"].as<string>()); auto protocol = QString::fromStdString(location["protocol"].as<string>()); 

浏览器支持

桌面浏览器：它可以启动并在Chrome，Firefox，Safari，Edge（在这里我必须启用实验性JavaScript功能）中运行。 取决于硬件，WebAssembly的编译可能会明显延迟。

在Andorid上的Chrome中，可能需要花费几分钟来编译WebAssembly。 我立即注意到缺乏对移动浏览器的支持，即在尝试输入文本时没有调用系统键盘。

在iOS 12上的Safari上，此应用程序在编译WebAssembly的阶段崩溃，并且我没有取消权限。 从理论上讲，您可以切换到asm.js，但这需要单独研究。

Qt Quick WebGL

该博客将自己定位为Web套接字上的VNC，并在WebGL上进行渲染。 Qt WebSockets和Qt的依赖项中编译了对OpenGL ES 2的支持，即 在没有GPU的情况下在硬件上驱动会很痛苦。 要支持它，只需将Qt WebGL Streaming插件放在在线安装程序中，然后使用-platform webgl或-platform webgl:port=80选项运行该应用程序（如果需要指定端口）。

但是这项技术有其局限性：

• 延迟或臭名昭著的输入滞后;
• 在Qt小部件上缺乏应用程序支持；
• 缺乏声音传播；
• 每个进程一个用户连接，即 在第二个标签中不再输入时，预加载器将旋转。

当在屏幕之间的过渡上为StackView设置动画时，我还注意到fps下垂。 WebGL流的优势：

• 内置服务器；
• 最小的努力。 我不必从源代码中编译Qt并单独重建现有应用程序。

用于WebAssembly和WebGL流

在C ++中有现成的应用程序并且您需要将Web界面固定到它时，可以使用Wt替代方法。 例如，洪流摇椅的Web界面。

一些智能家居的Web界面。 不仅仅将MQTT交付给Qt，还包括msorvig / qt-webassembly-examples上的示例mqtt_simpleclient 。 您可以拥有适用于平板电脑和浏览器的通用UI代码。

该代码在GitHub上可用 ， 在同一位置准备了二进制文件。