天天看点
返回

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

前言

《Qt与Web混合开发》系列文章，主要讨论Qt与Web混合开发相关技术。

这类技术存在适用场景，例如：Qt项目使用Web大量现成的组件/方案做功能扩展，

Qt项目中性能无关/频繁更新迭代的页面用html单独实现，Qt项目提供Web形式的SDK给

用户做二次开发等等，或者是Web开发人员齐全而Qt/C++人手不足，此类非技术问题，

都可以使用Qt + Web混合开发。

(不适用的请忽略本文)

简介

第二篇文章，先介绍Qt与Web嵌套使用,再介绍Qt与Web分开使用，之后着重讨论分开使用的一些实现细节，特别是WebChannel通信、WebChannel在Web/typescript中的使用。

Qt与Web嵌套

MiniBrowser

这里以Qt官方的例子MiniBrowser来说明吧。

打开方式如下：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

运行效果如下：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

这个例子是在Qml中嵌套了WebView。

半透明测试

涛哥做了一个简单的半透明测试。

增加了两个半透明的小方块，蓝色的在WebView上面，红色的在WebView下面。

运行效果也是正确的:

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

代码是这样的：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

红色框中是我增加的代码。

为什么要做半透明测试呢？根据以往的经验,不同渲染方式的两种窗口/组件嵌套在一起，总会出现透明失效之类的问题，例如 qml与Widget嵌套。

渲染原理

涛哥翻了一下Qt源码，了解到渲染的实现方式，Windows平台大致如下：

chromium在单独的进程处理html渲染，并将渲染结果存储在共享内存中；主窗口在需要重绘的时候，从共享内存中获取内容并渲染。

小结

这里的WebView内部封装好了WebEngine，其本身也是一个Item，就和普通的Qml一样，属性绑定、js function都可以正常使用，暂时不深入讨论了。

Qt与Web分离

Qt与Web分离，就是字面意思，Web在单独的浏览器或者App中运行，不和Qt堆在一起。两者通过socket进行通信。

这里用我自己做的例子来说明吧。

(...微信公众号把gif图片吃掉了...)

源码在github上: https://github.com/jaredtao/QtWeb

Qt小车

原版小车

小车来自Qt的D-Bus Remote Controller 例子

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

原版的例子，实现了通过QDBus 跨进程 控制小车。

(吐槽：这是一个古老的例子,使用了GraphicsView 和QDBus)

(知识拓展1：DBus是unix系统特有的一种进程间通信机制，使用有些复杂。

Qt对DBus机制进行了封装/简化，即QDBus模块，

通过xml文件的配置后，把DBus的使用转换成了信号-槽的形式。

类似于现在的Qt Remote Objects)

(知识拓展2：Windows本身不支持DBus，网上有socket模拟DBus的方案。

参考: freedesktop.org/wiki/So)

改进小车

我做了一些修改，主要如下：

  • 去掉了DBus
  • 增加控制按钮
  • 增加WebChannel
  • 修改Car的实现，导出一些属性和函数。
  • 注册Car到WebChannel

这里贴一些关键代码

Car的头文件：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

其中要说明的是：

speed和angle属性具备 读、写、change信号。

还有加速、减速、左转、右转四个公开的槽函数。

必要的知识

WebSocket和 QWebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

Qt为我们封装好了WebSocket，即QWebSocket和QWebSocketServer，简单易用。

如果你了解socket编程，就看作TCP好了；如果不了解，请先去补充一下知识吧。

WebChannel

按涛哥的理解，WebChannel是在socket上建立的一种通信协议，这个协议的作用是把QObject暴露给远端的HTML。

大致使用流程：

  1. Qt程序中，要暴露的QObject全部注册到WebChannel。
  2. Qt程序中，启动一个WebSocketServer，等待Html的连接。
  3. Html加载好qwebchannel.js文件, 然后去连接WebSocket。
  4. 连接建立以后，Qt程序中，由WebChannel接手这个WebSocket，按协议将QObject的各种“元数据”传输给远端Html。

  5. Html端，qwebchannel.js处理WebSocket收到的各种“元数据”，用js的Object 动态创建出对应的QObject。

    到这里两边算是做好了准备，可以互相调用了。

    Qt端QObject数据变化只要发出信号，就会由WebChannel自动通知Web端；

    Web端可以主动调用QObject的public的 invok函数、槽函数，以及读、写属性。

Qt启动系统浏览器

在使用WebChannel的时候，Qt端建立了WebSocketServer，之后要把server的路径(例如：ws://127.0.0.1:12345)告诉Html。

一般就是在打开Html的时候带上Query参数，例如：F:\QtWeb\index.html?webChannelBaseUrl=ws://127.0.0.1:12345

Qt的OpenUrl

Qml中有 Qt.openUrlExternally, C++ 中有 QDesktopServices::openUrl，本质一样， 都可以打开一个本地的html网页。

其在Windows平台的底层实现是Win32 API。这里有个Win32 API的缺陷，传Query参数会被丢掉。

C# .net的 Process::Start

涛哥找到了替代的方案:

.net framework / .net core有个启动进程的函数：System.Diagnostics.Process::Start, 可以调用浏览器并传query参数

//C# 启动chrome

Qt中直接写C#当然不太好，不过呢，Win7/Win10 系统都带有Powershell，而powershell依赖于.net framework, 我们可以调用powershell来间接使用.net framework。

所以有了下面的代码：

结果完美运行。

Web控制端

目录结构

Web端就按照Web常规流程开发。

Web部分的源码也在前文提到的github仓库，子路径是QtWeb\WebChannelCar\Web

如下是Web部分的目录结构：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

脚本用typescript，包管理用npm，打包用webpack，编辑器用vs code, 都中规中矩。

内容比较简单，暂时不需要前端框架，手(复)写(制)的html和css。

Html

html部分比较简单

//index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; chartset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../style/style.css" target="_blank" rel="external nofollow"  />
    <link rel="stylesheet" type="text/css" href="../style/layout.css" target="_blank" rel="external nofollow"  />head>
<body>
    <button id="up" class="green button">加速button>
    <button id="down" class="red button">减速button>
    <button id="left" class="blue button">左转button>
    <button id="right" class="blue button">右转button>
    <img id="img" src="../img/disconnected.svg" />
    <div>
        <div>
            <label>速度: label>
            <label id="speed">0label>div>
        <div>
            <label>角度: label>
            <label id="angle">0label>div>div>body>
<script src="../out/main.js">script>html>

样式和布局全靠css,这里就不贴了。

TypeScript

脚本部分需要细说了。

src文件夹为全部脚本，目录结构如下：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

TypeScript中的QObject

从main开始, 加点注释：

//main.ts

可以看到我们从WebChannelCore.SDK 中获取了一个car对象，之后就当作QObject来用了，包括调用它的函数、连接change信号、访问属性等。

这一切都得益于WebSocket/WebChannel.

TypeScript中连接websocket

接下来看一下WebChannelCore的实现

//WebChannelCore.ts

这部分代码不复杂，主要是连接WebSocket，连接好之后创建一个QWebChannel。

TypeScript中的QWebChannel

观察仔细的同学会发现，src文件夹下面，没有叫‘qwebchannel.ts’的文件，而是‘qwebchannel.js’,和一个‘qwebchannel.d.ts’

这涉及到另一个话题：

TypeScript中使用javaScript

‘qwebchannel.js’是Qt官方提供的，在js中用足够了。

而我们这里是用TypeScript，按照TypeScript的规则，直接引入js是不行的，需要一个声明文件 xxx.d.ts

所以我们增加了一个qwebchannel.d.ts文件。

(熟悉C/C++的同学，可以把d.ts看作typescript的头文件)

内容如下：

//qwebchannel.d.ts
export declare function QWebChannel(transport: any, initCallback: Function): void;

只是导出了一个函数。

这个函数的实现在‘qwebchannel.js’中:

//qwebchannel.js
"use strict";

var QWebChannelMessageTypes = {
    signal: 1,
    propertyUpdate: 2,
    init: 3,
    idle: 4,
    debug: 5,
    invokeMethod: 6,
    connectToSignal: 7,
    disconnectFromSignal: 8,
    setProperty: 9,
    response: 10,
};

var QWebChannel = function(transport, initCallback)
{
    if (typeof transport !== "object" || typeof transport.send !== "function") {
        console.error("The QWebChannel expects a transport object with a send function and onmessage callback property." +
                      " Given is: transport: " + typeof(transport) + ", transport.send: " + typeof(transport.send));
        return;
    }
    ...
}
function QObject(name, data, webChannel)
{
  ...
}

这个代码比较长，就不全部贴出来了。主要实现了两个类(js中的类就是”带原型方法“的函数)，QWebChannel和QObject。

QWebChannel就是用来接管websocket的，而QObject是用js Object模拟的 Qt的 QObject。

这一块不细说了，感兴趣的同学可以自己去研究源码。

改进qwebchannel.js以支持await

Qt默认的qwebchannel.js在实际使用过程中，有些不好的地方，就是函数的返回值不是直接返回，而是要在回调函数中获取。

比如car.getAngle要这样用：

let angle = 0;
    car.getAngle((value:number)=> {
      angle = value;
    });

我们的实际项目中，有大量带返回值的api，这样的用法每次都嵌套一个回调函数，很不友好，容易造成回调地狱。

我们同事的解决方案是，在typescript中把这些api再用Promise封装一层，外面用await调用。

例如这样封装一层：

function getAngle () {
    return new Promise((resolve)=>{
        car.getAngle((value:number)=> {
            resolve(value);
        });
  });
}

使用和前面的代码一样：

//异步更新 angle
async function onAngleChanged() {
    let angleLabel = (window as any).document.getElementById("angle");
    let car = WebChannelCore.SDK.car;
    //获取angle，异步等待。
    //注意这里改造过qwebchannel.js，才能使用await。
    angleLabel.textContent = await car.getAngle();
}

这种解决方案规避了回调地狱，但是工作量增加了。

涛哥思考良久，稍微改造一下qwebchannel.js，自动把Promise加进去，也不需要再额外封装了。

改动如下：

qt中charts的example中有哪些_Qt与Web混合开发(二)建立连接

在QObject的addMethod中，增加了Promise。

QObject to Typescript

我们在Qt 程序中写了QObject，然后暴露给了ts。

在ts这边，一般也需要提供一个声明文件，明确有哪些api可用。

例如我们的car声明：

这里涛哥写了一个小工具，能够解析Qt中的QObject，并生成对应的ts文件。

当然还是实验阶段，有兴趣的也可以关注一下

github.com/jaredtao/QObject2TypeScript

编辑于 03-13

qt中charts的example中有哪些 qt中实现息屏开平mousepress Qt中槽函数可以是带参数的函数吗 Qt怎么实现将bmp图片转换成Ascii
上一篇: v-charts Can‘t resolve ‘echarts/lib/visual/dataColor‘
下一篇: qt spinbox 设置小数位数_QT开发（二十）——QT对话框

继续阅读