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()<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()<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 
#include 
#include 
#include 
#include "websockettransport.h"
#include "websocketclientwrapper.h"
#include 
#include 

#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 

//通信类对象
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 
#include 
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

  
    
    
    
    
  
  
    
	发送