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
Vite App