Qt QWebChannel web端js与C++交互

Qt QWebChannel web端js与C++交互

文章目录

1. QWebChannel2. 使用QWebEngine的示例

2.1 C++端代码

2.1.1 mainwindow.cpp2.1.2 mytestclass.h2.1.3 mytestclass.cpp 2.2 Web端2.3 运行 3. 使用WebSocket的示例

3.1 C++端代码

3.1.1 mainwindow.cpp 3.2 Web端代码3.3 运行 4. 代码

1. QWebChannel

QWebChannel类的作用是向远端HTML客户端暴露 QObject。

QWebChannel填补了C++应用程序和HTML/Javascript 应用程序之间的空白。通过将QObject派生对象发布到QWebChannel并在HTML中引入qwebchannel.js脚本可从此处获取。在HTML端，可以透明地访问QObject的属性、公共槽和方法。不需要手动消息传递和数据序列化，C++方面的属性更新和信号发射将自动传输到可能远程运行的HTML客户机。在客户端，将为任何发布的C++ QObject创建Javascript对象。它反映了C++对象的API，因此可以直观地使用。

但是，Web端与C++之间怎么进行通信能？ 有两个方法：

QWebEngine 提供一个 web 引擎，用于在 Qt 应用中嵌入任意的网页内容。Qt WebEngine 是基于 Chromium 项目实现的，提供了一个 js 的宿主环境，内部实现了js调用C++的环境；Websocket C++端建立websocket server，Web端连接，qwebchannel.js会获取到C++端所有的属性、槽函数等。 2. 使用QWebEngine的示例 2.1 C++端代码 2.1.1 mainwindow.cpp

// 要导出的类，此类供js调用
m_myTestClass = new MyTestClass(this);

// 创建QWebChannel，把创建的类注册到QWebChannel中，js才能调用此类的方法
m_webChannel = new QWebChannel(this);
m_webChannel->registerObject("mytestclass", m_myTestClass);

// js与C++通信方式一、使用QWebEngineView加载网页，web端js与C++之间的通信
QString strHtml = QApplication::applicationDirPath() + "/../../testWeb/test.html";
// QWebEngineView 基于 Chromium 的 web 引擎
m_webEngineView = new QWebEngineView(this);
m_webEngineView->load(QUrl::fromLocalFile(strHtml));
m_webEngineView->page()->setWebChannel(m_webChannel);
ui->verticalLayout->addWidget(m_webEngineView);

导出类 MyTestClass，供js调用

2.1.2 mytestclass.h

#ifndef MYTESTCLASS_H
#define MYTESTCLASS_H

#include 
#include 

class MyTestClass : public QObject
{
    Q_OBJECT

    // 导出的属性
    Q_PROPERTY(QString navStatus MEMBER m_navStatus NOTIFY navStatusChanged)

public:
    explicit MyTestClass(QObject *parent = nullptr);

signals:
    // 导出的事件
    void navStatusChanged(const QString& navStatus);

public slots:
    // 导出的槽函数
    void function1(const QString& str);


private:
    void setNavStatus(const QString& status);

    QString m_navStatus;

};

#endif // MYTESTCLASS_H

2.1.3 mytestclass.cpp

#include "mytestclass.h"

#include 
#include 
#include 

MyTestClass::MyTestClass(QObject *parent) : QObject(parent),
    m_navStatus("hello")
{
}

void MyTestClass::function1(const QString& str)
{
    setNavStatus(str);
    qDebug() << __FUNCTION__ << str;
}

void MyTestClass::setNavStatus(const QString &status)
{
    m_navStatus = status;
    emit navStatusChanged(m_navStatus);
}

2.2 Web端

    
    
    
    


    callcpp
    getValue

    

    

其中，qwebchannel.js 取自 Qt安装目录的 Qt5.12.0ExamplesQt-5.12.0webchannelshared 目录。

2.3 运行

QT UI加载了html页面，显示了其中的元素。

（1）Web端的getValue获取C++对象的属性navStatus，属性初始值为 “hello”
           
（2）Web端的 callcpp 调用 C++端的函数 function1，C++端function1函数中打出
           
（3）Web端响应 navStatusChanged 事件

           

---

3. 使用WebSocket的示例 3.1 C++端代码 3.1.1 mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 要导出的类，此类供js调用
    m_myTestClass = new MyTestClass(this);

    // 创建QWebChannel，把创建的类注册到QWebChannel中，js才能调用此类的方法
    m_webChannel = new QWebChannel(this);
    m_webChannel->registerObject("mytestclass", m_myTestClass);

    // js与C++通信方式二、创建QWebsocketServer，web端与之建立连接
    startServer();

}

MainWindow::~MainWindow()
{
    delete ui;
}

// 建立WebSocket服务
void MainWindow::startServer()
{
    m_websocketServer = new QWebSocketServer("testWebchannel", QWebSocketServer::NonSecureMode, this);

    if(!m_websocketServer->listen(QHostAddress::Any, 12345))
    {
        qDebug() << "websocket server listen failed, error: " << m_websocketServer->errorString();
        return;
    }

    connect(m_websocketServer, &QWebSocketServer::newConnection, this, &MainWindow::onNewConnection);
    qDebug() << "startServer";
}

void MainWindow::onNewConnection()
{
    QWebSocket* client = m_websocketServer->nextPendingConnection();
    qDebug() << (QString("Homay robot server has new connection from %1.%2").arg(client->peerAddress().toString()).arg(client->localPort()));

    auto pTransport = new WebSocketTransport(client);
    // 可以不需要，这里只是为了调试打印js端的qwebchannel.js是怎么和C++端通信的，通信协议是什么样的
    connect(pTransport, &WebSocketTransport::messageReceived, this, &MainWindow::onTransportMessageReceived);

    m_webChannel->connectTo(pTransport);
}

void MainWindow::onTransportMessageReceived(const QJsonObject &message, QWebChannelAbstractTransport *transport)
{
    qDebug() << "onTransportMessageReceived: " << message;
}

导出类 MyTestClass，供js调用。
代码中 WebSocketTransport 类代码，取自 Qt安装目录的 Qt5.12.0ExamplesQt-5.12.0webchannelshared 目录下的 websockettransport.h websockettransport.cpp。
此处省略。

3.2 Web端代码

    
    
    
    


    callcpp
    getValue

    

    

与2.2中的Web端代码相比，此时，需要先创建WebSocket连接，把socket传入QWebChannel中。

3.3 运行

（1）运行C++， C++代码没有加载html， 此时为空界面；
（2）使用Chrome浏览器，或者Edge浏览器打开Web测试网页，一打开就与C++端的websocket连接上了
           
（3）接下来与2.3的演示一样。

4. 代码

所有代码详见：QWebChannel