有关Qt的WebEngine模块与JS交互的研究

[jiangcaiyang]

最近几年Web和桌面混合应用逐渐流行起来，Qt也顺应形势，在2014年12月推出了WebEngine模块。它的作用就是让开发桌面/WEB混合应用程序更加方便。之前我了解了一些WebEngine的内容，也做了一些小的demo，但是直到前些日子，我对WebEngine强大的功能了解一点点。一些特殊的场景依然需要开发者更加努力完善才行，比如说：

1. 浏览器和桌面应用的交互
   通过点击浏览器的内容转到桌面特定的功能或者点击桌面的菜单启动浏览器并且进行一些设置，这些需要涉及到WebEngine和Javascript交互的知识；
2. 为浏览器添加特定的插件以便在输入含有特定的scheme的时候，启动本地相关的功能。比如ed2k://这样的链接。这里要涉及到一个浏览器的URL处理handler这样的处理步骤。

现在很多的软件都支持内置网页，比如说迅雷软件，还有WPS，这些都支持在内部载入浏览器。也很好地实现了“软件+内容”的统一处理。带着这些问题，我们也尝试着了解WebEngine，并且使用WebEngine来实现相应的功能。

[jiangcaiyang]

一个非常常见的需求就是需要满足WebEngine中的html元素和Qt的其它元素的交互。因为如果只套了WebEngine，数据只在Chromium中的v8引擎中流动，和Chrome浏览器无异。我们软件的开发主要看重的是和其它的程序进行联动。比如说软件内链接可以本地启动一个轻量级的浏览器，或者浏览器的内容点击可以让本地程序进行响应。这一部分我想是WebEngine精髓的地方，好在Qt团队想到了这一点，可以使用WebChannel这个模块来实现这样的目的，和以前操作QtWebkit那一套不同，使用WebChannel通过信号和槽将WebChannel和本地C++对象连接起来，通过JS的事件机制将WebChannel和JS对象连接起来，从而建立了联系，这样做有利于解耦C++和WebEngine，让其具有更大的可操作移植性。

好了，开始拿官方的例子做研究了，我们选择先从WebChannel入手，查看官方的例子：standalone

我们发现它包含了几个文件：

core.h
core.cpp
dialog.h
dialog.cpp
main.cpp
shared/qwebchannel.js

值得注意的是qwebchannel.js文件，它以模块化的方式在js前端（或者后端）搭建了桥梁，让Qt对象通过传输协议（很大程度上是websocket）暴露在js中并且得以使用。

例子也较为简单，通过客户端建立本地的QWebSocketServer来监听12345端口，并且让客户端的QWebSocket和浏览器的WebSocket（原生）同时监听localhost:12345端口。这样可以实现双端通信。值得注意的是，客户端和网页端都使用了WebChannel来建立起联系——客户端使用的是WebChannel的C++接口方法，而网页端使用的是qwebchannel.js方法。

这个例子简单展示了WebChannel的使用，但我认为此处的WebChannel其实是多余的，只通过WebSocket就可以建立客户端和网页的连接。

[大黄老鼠]

每次都想用html写界面，然后后台用C++。
但是Qt WebEngine总是用不好
有个叫CEF的东西，好像用的人挺多的

[jiangcaiyang]

@大黄老鼠 我也考察了cef。主要是cef这块儿有三点：

1. 下载需要翻墙，如果没有梯子的话，都没办法下载下来。
2. 文档较少，我能知道的文档主要来自于博客介绍。
3. 如果是自己制作软件嵌入浏览器，可能选择MFC + cef、Qt + cef，或者是其它基于各种语言的库 + cef。如果要处理多进程的问题，还是需要非常具有经验的开发者才行。简而言之，学习门槛稍微高。

WebEngine慢慢在发展，一些以前没有暴露的接口现在已经暴露出来了。而且有Qt公司的维护，我想至少作为入门是没有问题的。

他们俩都不好的地方就是库太大了。随随便便就是50M以上。