qtwebchannel-opensource-src-QT开发中文网

Qt WebChannel 是 Qt 框架的一部分，它提供了一种机制，使得在网页和 Qt 应用程序之间可以通过 WebSockets 进行双向通信。Qt WebChannel 允许开发者将 Qt 对象暴露到 JavaScript 中，从而可以在 web 页面上与这些对象交互。

主要特性

双向通信：支持从 Qt 到 JavaScript 的调用，以及从 JavaScript 到 Qt 的调用。
实时更新：能够通过 WebSocket 实现实时数据更新，适合需要动态内容的应用场景。
易于集成：与其他 Qt 模块（如 QtWebEngine）集成良好，便于构建现代化的桌面和移动应用。
跨平台：因为是 Qt 库的一部分，所以它支持多种操作系统（Windows, macOS, Linux, Android, iOS 等）。

安装与使用

安装

要使用 Qt WebChannel，你需要确保你的 Qt 环境中已经安装了相应的模块。在大多数情况下，这个模块会包含在 Qt 的标准安装包中。如果你使用的是较老版本的 Qt，你可能需要手动安装。

使用示例

创建一个简单的 QT 项目

创建一个新的 Qt 项目，并添加 Qt WebChannel 模块：

   # 在 .pro 文件中添加
   QT += websockets webchannel

定义你的后端类

定义一个 QObject 派生类，将其作为要暴露给 JavaScript 的对象。例如：

   #include <QObject>

   class MyObject : public QObject {
       Q_OBJECT
   public:
       Q_INVOKABLE QString getMessage() const {
           return "Hello from C++!";
       }
   };

设置 WebChannel 和服务器

在你的主窗口或主函数中创建并设置 WebChannel：

   #include <QCoreApplication>
   #include <QWebSocketServer>
   #include <QWebChannel>
   
   int main(int argc, char *argv[]) {
       QCoreApplication a(argc, argv);

       // 创建 WebSocket 服务器
       QWebSocketServer *server = new QWebSocketServer(QStringLiteral("My Server"), QWebSocketServer::NonSecureMode);
       server->listen(QHostAddress::Any, 12345);

       MyObject myObject;

       // 创建并设置 WebChannel
       QWebChannel *channel = new QWebChannel(server);
       channel->registerObject(QStringLiteral("myObject"), &myObject);
       
       // 当有客户端连接时，将通道与客户端进行关联
       connect(server, &QWebSocketServer::newConnection, [=]() {
           QWebSocket *client = server->nextPendingConnection();
           connect(client, &QWebSocket::disconnected, client, &QObject::deleteLater);
           channel->connect(client);
       });

       return a.exec();
   }

前端代码

在 HTML 页面中，你可以使用以下代码来访问这个对象：

<!DOCTYPE html>
<html>
<head>
    <title>Qt Web Channel Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script type="text/javascript">
        var socket = new WebSocket('ws://localhost:12345');
        socket.onopen = function() {
            new QWebChannel(socket, function(channel) {
                window.myObject = channel.myObject;
                console.log(myObject.getMessage()); // 调用 C++ 方法
            });
        };
    </script>
</head>
<body>
    Check the console for messages.
</body>
</html>