02. QCefView + QWebChannel 实现Qt程序中嵌入Web页面

目录

1. 为什么要用QCefView + QWebChannel开发？

2. 自定义WebChannel

3. 示例完整代码

3.1 自定义Transport类

3.2 自定义channel

3.3 交互窗体、注册对象及通讯

3.4 Html页面如下：

4. 运行结果

5. 调试

6. QWebEngine vs QCefView + QWebChannel vs QCefView 对比

1. 为什么要用QCefView + QWebChannel开发？

基于Qt自带的QWebEngineView + QWebChannel开发，常规电脑可以满足需求。但实际项目部署时在个别环境会有兼容性问题，导致有些电脑莫名崩溃，或者出现web加载失败，卡死的情况。

如果系统自带的.netframe版本过低，QWebengineView 编译的程序在windows7无法运行；

网上查相关资料，有部分介绍如下：

（1）QWebEngineView在运行之前需要检查本地硬件环境，硬件必须要支持OpenGL2.0以上的版本，否则无法运行。

（2）机器的显卡和系统所带的显卡驱动不匹配，导致QtWebEngine在渲染时出现了崩溃。用户需要手动更新显卡驱动来解决这个问题。

而QCefView 基于CEF的封装，对硬件要求低，性能好（XP、windowNT和其他Unix、MacOS都可以支持），在显示上规避了QWebEngineView的问题。

对于QCefView的通讯机制，网上有人说当QCefView整合Vue项目时，会有QCefClient找不到的问题，我也本地Demo了一下，这里没有出现问题，即QCefView直接整合Vue项目也是通过的。

但QCefView和WebChannel的通讯调用方式不太一样，还是可以尝试下不同的组合，再根据喜好做个选择。

而且本人感觉，WebChannel方式，调试起来会更方便。

以下是基于QCefView + QWebChannel 的开发方法。

2. 自定义WebChannel

基本原理是通过channel将C++对象暴露给HTML，在HTML中调用qwebchannel.js。 前提是建立transport，QT只提供了一个抽象基类QWebChannelAbstractTransport，需要自己进行实现，官方建议用QWebSocket实现，并给出了实例。

1、实现Transport类，内置一个WebSocket套接字；

2、实现新的channel类，内置一个WebSocketServer;

3、利用新的channel注册C++对象，从而HTML可以使用该对象；

之后使用跟QWebChannel相同.

3. 示例完整代码

3.1 自定义Transport类

websockettransport.h

#ifndef WEBSOCKETTRANSPORT_H
#define WEBSOCKETTRANSPORT_H

#include <QWebChannelAbstractTransport>

QT_BEGIN_NAMESPACE
class QWebSocket;
QT_END_NAMESPACE

class WebSocketTransport : public QWebChannelAbstractTransport
{
    Q_OBJECT
public:
    explicit WebSocketTransport(QWebSocket * socket);
    virtual ~WebSocketTransport();

    void sendMessage(const QJsonObject & message) override;

public slots:
    void textMessageReceived(const QString & message);

private:
    QWebSocket * m_socket;
};

#endif // WEBSOCKETTRANSPORT_H

websockettransport.cpp

#include "websockettransport.h"
#include <QDebug>
#include <QJsonDocument>
#include <QJsonObject>
#include <QWebSocket>

/*!
     Construct the transport object and wrap the given socket.

     The socket is also set as the parent of the transport object.
*/
WebSocketTransport::WebSocketTransport(QWebSocket * socket)
        : QWebChannelAbstractTransport(socket)
        , m_socket(socket)
{
    connect(socket, &QWebSocket::textMessageReceived,
            this, &WebSocketTransport::textMessageReceived);
    connect(socket, &QWebSocket::disconnected,
            this, &WebSocketTransport::deleteLater);
}

/*!
     Destroys the WebSocketTransport.
*/
WebSocketTransport::~WebSocketTransport()
{
    m_socket->deleteLater();
}

/*!
     Serialize the JSON message and send it as a text message via the WebSocket to the client.
*/
void WebSocketTransport::sendMessage(const QJsonObject & message)
{
    QJsonDocument doc(message);
    m_socket->sendTextMessage(QString::fromUtf8(doc.toJson(QJsonDocument: