使用 QWebChannel 在 QT 和 Web 端实现无缝通信

2023-12-31 05:45:15

前言

在现代化的应用程序开发中，跨平台兼容性和无缝交互至关重要。Qt 框架为构建跨平台应用程序提供了强大的支持，而 QWebChannel 作为 Qt 中的一项重要功能，使得在 QT 和 Web 端之间建立高效而灵活的通信通道成为可能。本文将深入探讨如何使用 QWebChannel 来实现跨平台通信，并通过一个在浏览器端展示文件信息的实际案例来说明其使用方法。

QWebChannel 概述

QWebChannel 是 Qt 中的一项功能，它通过 WebSockets 技术，为 QT 和 Web 端之间的交互提供了双向通道。它允许 QT 对象向 Web 端公开方法和属性，同时 Web 端也可以调用 QT 对象的方法和访问其属性。这种机制使得跨平台应用程序可以轻松地集成 Web 技术，增强应用程序的功能和可扩展性。

案例：浏览器端展示文件信息

为了更好地理解 QWebChannel 的使用方法，我们将通过一个示例来展示如何在浏览器端展示文件夹中的文件信息。该示例将包含以下功能：

获取指定文件夹下的所有文件信息
在浏览器端以表格的形式展示文件信息

Qt 端代码实现

在 Qt 端，需要完成以下步骤来实现文件信息展示功能：

创建一个 QWebChannel 对象：
```
QWebChannel channel;
```

将 QWebChannel 与 QWebEngineView 关联：

QWebEngineView view;
view.page()->setWebChannel(&channel);

创建一个 QT 对象并将其注册到 QWebChannel 中：

class FileInfoProvider : public QObject {
public:
    Q_OBJECT
    Q_INVOKABLE QVariantMap getFileInfo(const QString &path) { ... }
};

channel.registerObject("fileInfoProvider", new FileInfoProvider);

在 QT 端处理 Web 端发起的请求：

void FileInfoProvider::getFileInfo(const QString &path) { ... }

Web 端代码实现

在 Web 端，需要完成以下步骤来展示文件信息：

引入 QWebChannel 脚本：
```
<script src="qwebchannel.js"></script>
```

创建一个 QWebChannel 对象：

const channel = new QWebChannel(view.webChannel());

获取 QWebChannel 中注册的 QT 对象：

const fileInfoProvider = channel.objects.fileInfoProvider;

调用 QT 对象的方法获取文件信息：

fileInfoProvider.getFileInfo(path).then((fileInfo) => { ... });

构建交互界面

在浏览器端，可以使用 HTML 和 JavaScript 来构建交互界面，例如：

创建一个表格元素用于展示文件信息
创建一个按钮用于触发文件信息获取
在获取到文件信息后，将文件信息动态填充到表格中

示例代码

以下提供了完整的示例代码，展示了 QT 端和 Web 端的代码实现：

QT 端代码：

#include <QCoreApplication>
#include <QDir>
#include <QFile>
#include <QFileInfo>
#include <QObject>
#include <QVariantMap>
#include <QWebChannel>
#include <QWebEngineView>

class FileInfoProvider : public QObject {
public:
    Q_OBJECT
    Q_INVOKABLE QVariantMap getFileInfo(const QString &path) {
        QVariantMap fileInfo;
        QDir dir(path);
        for (const QFileInfo &file : dir.entryInfoList()) {
            fileInfo[file.fileName()] = file.lastModified().toString();
        }
        return fileInfo;
    }
};

int main(int argc, char **argv) {
    QCoreApplication app(argc, argv);

    QWebChannel channel;
    QWebEngineView view;
    view.page()->setWebChannel(&channel);

    channel.registerObject("fileInfoProvider", new FileInfoProvider);

    view.setUrl(QUrl("index.html"));
    view.show();

    return app.exec();
}

Web 端代码（index.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <script src="qwebchannel.js"></script>
</head>
<body>
    <h1>文件信息</h1>
    <button onclick="getFileInfo()">获取文件信息</button>
    <table id="fileInfoTable">
        <thead>
            <tr>
                <th>文件名</th>
                <th>修改时间</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        const channel = new QWebChannel(view.webChannel());
        const fileInfoProvider = channel.objects.fileInfoProvider;

        function getFileInfo() {
            const path = prompt("请输入文件夹路径：");
            fileInfoProvider.getFileInfo(path).then((fileInfo) => {
                const tableBody = document.getElementById("fileInfoTable").getElementsByTagName("tbody")[0];
                for (const fileName in fileInfo) {
                    const row = tableBody.insertRow(-1);
                    const cell1 = row.insertCell(0);
                    const cell2 = row.insertCell(1);
                    cell1.innerHTML = fileName;
                    cell2.innerHTML = fileInfo[fileName];
                }
            });
        }
    </script>
</body>
</html>

结论

QWebChannel 为 Qt 框架提供了强大的功能，可以轻松地在 QT 和 Web 端之间建立无缝的通信通道。本文通过一个展示文件信息的示例，详细介绍了如何使用 QWebChannel 实现跨平台通信。这种机制极大地增强了 Qt 应用程序的灵活性，使其能够轻松地与 Web 技术集成，为用户提供更加丰富的交互体验。