c++/qt通过QWebChannel与JS/html网页端交互通信

1、需要从网上下载两个文件

websocketclientwrapper.cpp 和 websocketclientwrapper.h
websockettransport.cpp     和 websockettransport.h

2、QWebChannel注册通信通信类对象名:“MyWebTransPort”，js调用这个名进行通信;
3、js发送数据至c++调用函数：void RecvTextFromJs(const QString &text);
c++发送数据至js调用函数：void SignalSendToJs(QString text);
4、js/html网页作为客户端，c++/qt启动本地服务器作为服务端进行通信；
5、QT += webchannel websockets

备注：二者通信是点与点之间进行的一种双向互相通信的一种方式，通过qt特有的信号与槽进行接口调用通信。

亲测可用，话不多说上源码：
**
亲，感觉不错的话点个赞哦*

video

一、c++/qt端：

1、MainWindow.cpp

#include "MainWindow.h"
#include "ui_MainWindow.h"
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    initWebTransPort();
    connect(ui->pushButton,&QPushButton::clicked,[=](){
        static int i =0;
        i++;
        QString text = QString("send to js file %1 号").arg(QString::number(i));
        emit m_web_transport->SignalSendToJs(text);
        UpdateTextMessage(text);
        qDebug()<<text;
    });
    connect(m_web_transport,&WebTransport::SignalSendToUI,[=](QString text){
        UpdateTextMessage("get text from js: " + text);

    });

}

MainWindow::~MainWindow()
{
    if(m_websocketServer)
        m_websocketServer->close();
    delete ui;
}

void MainWindow::UpdateTextMessage(QString text)
{
    ui->textEdit->append(text);
}

void MainWindow::initWebTransPort()
{
	//通信核心代码
    QString serverPort = "8003";
    // 建立一个websocket服务器
    if(m_websocketServer == NULL)
        m_websocketServer = new QWebSocketServer(QStringLiteral("MyServer"),QWebSocketServer::NonSecureMode,this);

    quint16 port = serverPort.toUInt();
    if(!m_websocketServer->listen(QHostAddress("127.0.0.1"),port))
    {
        qDebug()<<"faild to open web socket server!!!";
    }
    UpdateTextMessage("open web socket server suceess");

    // wrap WebSocket clients in QWebChannelAbstractTransport objects
    if(m_clientWrapper == NULL)
        m_clientWrapper = new WebSocketClientWrapper(m_websocketServer);

    // setup the channel
    if(m_webchannel == NULL)
    {
        m_webchannel = new QWebChannel();
        QObject::connect(this->m_clientWrapper,&WebSocketClientWrapper::clientConnected,m_webchannel,&QWebChannel::connectTo);
    }
    // 将通信类注册到channel
    if(m_web_transport == NULL)
    {
        m_web_transport = new WebTransport(this);
        m_webchannel->registerObject("MyWebTransPort",m_web_transport); //网页上调佣MyWebTransPort，即可连接槽函数通信
        qDebug()<<"register MyWebTransPort channel success!!!!";
        UpdateTextMessage("register MyWebTransPort channel success!!!!");
    }
}

2、MainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QObject>
#include <QMainWindow>
#include <QtWebSockets/QWebSocketServer>
#include "websockettransport.h"
#include "websocketclientwrapper.h"
#include <QtWebChannel/qwebchannel.h>
#include <QDesktopServices>

#include "WebTransport.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void UpdateTextMessage(QString text);

private:
    void initWebTransPort();

private:
    Ui::MainWindow *ui;
    QWebSocketServer* m_websocketServer{nullptr};
    WebSocketClientWrapper* m_clientWrapper{nullptr};
    QWebChannel* m_webchannel{nullptr};
    WebTransport* m_web_transport{nullptr};

};
#endif // MAINWINDOW_H

3、通信类

3.1 WebTransport .h

#ifndef WEBTRANSPORT_H
#define WEBTRANSPORT_H
#include <QObject>

//通信类对象
class WebTransport : public QObject
{
    Q_OBJECT
public:
    WebTransport(QObject*parent);
    ~WebTransport();

signals:
    //用于发送给js页面的数据
    void SignalSendToJs(QString text);
    void SignalSendToUI(QString text);

public slots:
    // js调用此函数 由于是异步通信，js端使用promise方式调用
    // 接收JS传递过来的字符串
    void RecvTextFromJs(const QString &text);

};
#endif //

3.2 WebTransport.cpp

#include "WebTransport.h"
#include <QDebug>
#include <QMessageBox>
WebTransport::WebTransport(QObject*parent)
    :QObject(parent)
{

}

WebTransport::~WebTransport()
{

}

void WebTransport::RecvTextFromJs(const QString &text)
{
    qDebug()<<"********** get text from js: "<<text;
    emit SignalSendToUI(text);
}

二、JS/HTML网页端

1、从qt安装目录获取qwebchannel.js并与index.html放在同级目录

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
	<button id="sendBtn" onclick="senBtnClicked();">发送</button>
    <script type="module" src="/src/main.js"></script>
	<script type="text/javascript" src="./src/qwebchannel.js"></script>
	<script type="text/javascript">
		
    window.onload = function() 
	{
        if (location.search != "")
            var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/\.]+)/.exec(location.search)[1]);
        else
            var baseUrl = "ws://127.0.0.1:8003";
        console.log("Connecting to WebSocket server: " + baseUrl + ".");
        var socket = new WebSocket(baseUrl);

        socket.onclose = function() 
		{
            console.error("qwebchannel closed");
        };
        socket.onerror = function(error) 
		{
            console.error("qwebchannel error: " + error);
        };
        socket.onopen = function() 
		{
			console.log("WebSocket connected, setting up QWebChannel");
            new QWebChannel(socket, function(channel) 
			{
				console.log("Connected to WebChannel, ready to send/receive messages!");
				//获取c++端注册的QWebChannel对象"MyWebTransPort"
                window.core = channel.objects.MyWebTransPort;
				//调用qt信号-SignalSendToJs(QString arg) 获取c++端发送的数据
				window.core.SignalSendToJs.connect(function(msg) 
				{
					console.log("接收Qt信息：" + msg);
				});
        
            });
        }
    }
	
	function senBtnClicked(){
		//点击html网页端发送按钮,调用qt槽函数RecvTextFromJs(QString arg) 发送下面数据至c++
		core.RecvTextFromJs("hello,I am js file!!!!");
	}

	</script>
  </body>
</html>