Qt5.11 利用QWebChannel实现C++与JS的交互

左手的ㄟ右手 2023-06-27 06:14 17阅读 0赞

文章大部分内容来自另外一位博主的内容。但是文章的最后有几处个人认为阐述不清楚的地方，在自己更改过后，实现最终效果

引自：[https://blog.csdn.net/lh1136863240/article/details/84978716][https_blog.csdn.net_lh1136863240_article_details_84978716]

首先qwebchannel.js文件是在Qt的安装目录下\\Examples\\Qt-5.11.2\\webchannel\\shared\\qwebchannel.js，直接copy&paste就完事了，在index.html里用<script>标签引用一下，这就是前端的工作了，而且工作量并不大，而且很简单所以就不多说了。  
建一个基于控制台的Qt应用程序，构建组件这里我选择的是Vs2015 -32位。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo_size_16_color_FFFFFF_t_70][]

接下来我们把Qt安装目录下的Examples\\Qt-5.11.2\\webchannel\\shared下的文件全部复制到工程目录下，顺便建一个index.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo_size_16_color_FFFFFF_t_70 1][]

然后在Qt中将cpp与h文件全部导入进工程中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo_size_16_color_FFFFFF_t_70 2][]

打开pro文件，里面加入QT += core websockets webchannel

main.cpp文件里包含websocketclientwrapper.h、websockettransport.h、<QtWebChannel/QWebChannel>、<QtWebSockets/QWebSocketServer>  
![20200104155122520.png][]

![20200104155132241.png][]

上代码：

main.cpp

#include <QCoreApplication>
    #include "websocketclientwrapper.h"
    #include "websockettransport.h"
    #include <QtWebChannel/QtWebChannel>
    #include <QtWebSockets/QWebSocketServer>
    #include "chatserver.h"
    int main(int argc, char *argv[])
    {
        QCoreApplication a(argc, argv);
        QWebSocketServer server(QStringLiteral("QWebChannel Standalone Example Server"),
                                    QWebSocketServer::NonSecureMode);
            if (!server.listen(QHostAddress::LocalHost, 12345)) {
                qFatal("Failed to open web socket server.");
                return 1;
            }
    
            // wrap WebSocket clients in QWebChannelAbstractTransport objects
            WebSocketClientWrapper clientWrapper(&server);
    
            // setup the channel
            QWebChannel channel;
            QObject::connect(&clientWrapper, &WebSocketClientWrapper::clientConnected,
                             &channel, &QWebChannel::connectTo);
    
            // setup the dialog and publish it to the QWebChannel
            ChatServer* chatserver = new ChatServer(&a);
            channel.registerObject(QStringLiteral("chatserver"), chatserver);
        return a.exec();
    }

chatserver.h

#ifndef CHATSERVER_H
    #define CHATSERVER_H
    
    #include <QObject>
    
    class ChatServer : public QObject
    {
        Q_OBJECT
    
    public:
        explicit ChatServer(QObject *parent = nullptr);
        virtual ~ChatServer();
    
        Q_INVOKABLE void test1();
    
    signals:
        void test2();
    };
    
    #endif // CHATSERVER_H

chatserver.cpp

#include "chatserver.h"
    #include <QDebug>
    
    ChatServer::ChatServer(QObject *parent)
        : QObject(parent)
    {}
    
    ChatServer::~ChatServer()
    {}
    
    void ChatServer::test1() {
        qDebug() << "This is test1";
        emit test2();
    }

index.html

<!DOCTYPE html>
    <html>
    <head>
        <title>ChatClient</title>
     
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script type="text/javascript" src="qwebchannel.js"></script>
     
        <script>
            'use strict';
            var wsUri = "ws://localhost:12345";
            window.onload = function() {
                var socket = new WebSocket(wsUri);
                socket.onclose = function() {
                    console.error("web channel closed");
                };
                socket.onerror = function(error) {
                    console.error("web channel error: " + error);
                };
    
    			socket.onopen = function() {
        window.channel = new QWebChannel(socket, function(channel) {
            channel.objects.chatserver.test2.connect(function () {
                console.log('aaaa');
            });
            channel.objects.chatserver.test1();
        });
    }
            }
        </script>
    </head>
    <body>
    </body>
    </html>

编译C++端并运行，然后打开index.html，按F12点击控制台选项，看到了aaaa，说明从C++端调用JS函数也是没问题的

同时，控制台界面能够看到“This is test1”字样

[https_blog.csdn.net_lh1136863240_article_details_84978716]: https://blog.csdn.net/lh1136863240/article/details/84978716
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200104154455836.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200104154703788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020010415473270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcnRpbmtlaXRo,size_16,color_FFFFFF,t_70
[20200104155122520.png]: https://img-blog.csdnimg.cn/20200104155122520.png
[20200104155132241.png]: https://img-blog.csdnimg.cn/20200104155132241.png