QWebChannel示例学习，Qt与网页交互

0.简述

QWebSocket配合QWebChannel，可以将QObject暴露给HTML客户端。如Qt文档所述，通过将QObject派生对象发布到QWebChannel并在HTML端使用qwebchannel.js，可以透明的访问QObject的属性和public槽/方法。不需要手动消息传递和数据序列化，C++端的属性更新和信号发射会自动传输到可能远程运行的HTML客户端。在客户端，将为任何已发布的C++QObject创建JavaScript对象。它反映了C++对象的API，因此直观易用。

 

在QtCreator中搜索webchannel的示例，找到standalone，先构建运行下（我这可能环境没配置好，qwebchannel.js需要手动复制到html的同级目录下）。运行起来后，可以看到示例实现了桌面对话框与网页对话框的交互功能。

1.应用

通过修改示例，可以很简单的将该功能应用的自己的项目中。

1.拷贝示例中shared目录的两个C++类文件：

主要是借助Qt的QWebChannelAbstractTransport和QWebSocketServer两个类来实现这个功能。每当网页端WebSocket来连接这个Server时，就构造一个Transport，并传递给Chnnel的connectTo槽

2.定义一个QObject的派生类用于收发数据

示例中定义了一个简单的Dialog，定义了一个sendText的信号用于C++发送信号给HTML，定义了一个receiveText的槽函数用于HTML端调用传递数据给C++。

通过调用Channel的registerObject函数注册后，网页端可以关联这个对象。

//C++文件

//HTML的js

3.网页端构造Channel对象

示例中构造了一个WebSocket来连接C++的WebSocketServer，然后利用QWebChannel访问Dialog，关联信号以及调用槽函数。

这样，Qt C++就能与网页进行交互了。 

2.参考

文档：file:///D:/Qt/Qt5.7.1_vs2015/Docs/Qt-5.7/qtwebchannel/qwebchannel.html

博客：https://www.cnblogs.com/wkcagd/p/7732330.html

3.代码

github：https://github.com/gongjianbo/QtWebCannelAndMap.git

本来是在学习Qt用webgine操作高德地图，正好需要交互。