首页 > 其他分享 >【Qt】Qt与Html网页进行数据交互

【Qt】Qt与Html网页进行数据交互

时间:2024-09-07 16:54:13浏览次数:10  
标签:core 网页 Qt text Html output include 客户端

前言:此项目使用达梦数据库,以Qt制作服务器,Html制作网页客户端界面,可以通过任意浏览器访问。

1、Qt与网页进行数据交互

1.1、第一步:准备qwebchannel.js文件

直接在qt的安装路径里复制即可
在这里插入图片描述

1.2、第二步:在Qt的.pro文件加载webchannel组件

在.pro文件添加如下组件:

QT       += core gui sql webchannel widgets websockets

1.3、第三步:在main.cpp文件注册通信类

#include "MainWindow.h"
#include <QApplication>
#include <QDesktopServices>
#include <QDialog>
#include <QDir>
#include <QFileInfo>
#include <QUrl>
#include <QWebChannel>
#include <QWebSocketServer>
#include "core.h"
#include "../shared/websocketclientwrapper.h"
#include "../shared/websockettransport.h"
#include <QObject>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //以下三行代码可有可无,用来确保qwebchannel.js文件放在自己指定的文件夹里
    QFileInfo jsFileInfo(QDir::currentPath() + "/Web/js/qwebchannel.js");
    if (!jsFileInfo.exists())
    QFile::copy(":/qtwebchannel/qwebchannel.js",jsFileInfo.absoluteFilePath());

    // 设置QWebSocketServer
    QWebSocketServer server(QStringLiteral("QWebChannel Standalone Example Server"), QWebSocketServer::NonSecureMode);
    if (!server.listen(QHostAddress::Any, 12345))//12345是端口号,可以自己指定
    {
        qFatal("Failed to open web socket server.");
        return 1;
    }

    // 在QWebChannelAbstractTransport对象中包装WebSocket客户端
    WebSocketClientWrapper clientWrapper(&server);

    // setup the channel
    QWebChannel channel;
    QObject::connect(&clientWrapper, &WebSocketClientWrapper::clientConnected,
                     &channel, &QWebChannel::connectTo);


    MainWindow w;//MainWindow 类是我自己搭建的服务器界面类

    Core core(&w);//Core 类是我自己搭建的用来作为Qt与Html通信的类
    channel.registerObject(QStringLiteral("core"), &core);//把Core注册成通信类

    w.show();//显示服务器界面
    return a.exec();
}

1.4、第四步:创建Core通信类

Core.h



#ifndef CORE_H
#define CORE_H

#include "MainWindow.h"
#include <QObject>

/*
    An instance of this class gets published over the WebChannel and is then accessible to HTML clients.
    该类的一个实例通过WebChannel发布,然后HTML客户端可以访问它。
*/
class Core : public QObject
{
    Q_OBJECT

public:
    Core(MainWindow *dialog, QObject *parent = nullptr)
        : QObject(parent), m_dialog(dialog)
    {
        connect(dialog, &MainWindow::sendText, this, &Core::sendText);
        
    }

signals:
    /*
        This signal is emitted from the C++ side and the text displayed on the HTML client side.
        该信号从Qt端发出,并在HTML客户端显示文本。
    */
    void sendText(const QString &text);//html那边会监听这个信号,Qt这边发送text,html会直接接收到

public slots:

    /*
        This slot is invoked from the HTML client side and the text displayed on the server side.
        此槽从HTML客户端调用,并在服务器端显示文本。
    */
    void receiveText(const QString &text)//Html那边可以直接调用这个函数
    {
    	qDebug()<<text;//text就是Html发过来的数据
        //m_dialog->displayMessage(MainWindow::tr("客户端: %1").arg(text));
    }

    
private:
    MainWindow *m_dialog;
};

#endif // CORE_H

1.5、第五步:创建html客户端

chatRoom.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="../js/qwebchannel.js"></script>
        <script type="text/javascript">
            //BEGIN SETUP
            function output(message) {
                var output = document.getElementById("output");
                output.innerHTML = output.innerHTML + message + "\n";
            }
            window.onload = function() {
                if (location.search != "")
                    var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/\.]+)/.exec(location.search)[1]);
                else
                    var baseUrl = "ws://localhost:12345";

                output("系统:连接WebSocket服务器" + baseUrl + ".");
                var socket = new WebSocket(baseUrl);

                socket.onclose = function() {
                    console.error("web channel closed");
                };
                socket.onerror = function(error) {
                    console.error("web channel error: " + error);
                };
                socket.onopen = function() {
                    output("系统:连接WebSocket,设置QWebChannel.");
                    new QWebChannel(socket, function(channel) {
					output("系统:连接成功!");
                        // make core object accessible globally
                        window.core = channel.objects.core;

                        document.getElementById("send").onclick = function() {
                            var input = document.getElementById("input");
                            var text = input.value;
                            if (!text) {
                                return;
                            }

                            output("客户端:" + text);
                            input.value = "";
                            core.receiveText(text);
                        }

                        core.sendText.connect(function(message) {
                            output("服务器: " + message);
                        });

                        core.receiveText("客户端已连接,准备发送/接收消息!");
                        output("客户端:客户端已连接,准备发送/接收消息!");
                    });
                }
            }
            //END SETUP
        </script>
        <style type="text/css">
            html {
                height: 100%;
                width: 100%;
            }
            #input {
                width: 400px;
                margin: 0 10px 0 0;
            }
            #send {
                width: 90px;
                margin: 0;
            }
            #output {
                width: 500px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <textarea id="output"></textarea><br />
        <input id="input" /><input type="submit" id="send" value="Send" οnclick="javascript:click();" />
    </body>
</html>

2、问题

2.1、问题一:Cannot invoke unknown method of index -1 on object webTransport(0x…)

问题描述:运行时,Qt向Js端发送消息没有问题,Js端向Qt端发送消息时失败。
原因及解决办法:使用Qt 5.11.2编译生成的可执行程序,而网页端用的是Qt 5.14的qwebchannel.js文件,版本不兼容导致的,换成对应的qwebchannel.js文件就好了

2.2、问题二:Qwebchannel is not defined at webSocket.socket.onopen

问题描述:加载时无法连接qt。
原因及解决办法:没有加载qwebchannel.js文件

<script type="text/javascript" src="../js/qwebchannel.js"></script>

标签:core,网页,Qt,text,Html,output,include,客户端
From: https://blog.csdn.net/weixin_51649465/article/details/141927958

相关文章

  • MASM32+ HTML & JavaScript,好搭档
    哪个编程工具让你的工作效率翻倍?在日益繁忙的工作环境中,选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度,甚至让团队协作更加顺畅。那么,哪款编程工具让你的工作效率翻倍?是智能的代码编辑器,强大的版本控制工具,还是......
  • Qt线程使用
    嗨嗨嗨,今天又学到了新的知识——线程,这个玩意在项目中使用的频率是非常高的,毕竟电脑的主线程就那么一个,那么这也就是我们为啥要学习线程的原因。比如说,我们们的游戏,如果我们的游戏界面显示的同时我们可以操作我们的装备、地图、人物移动等等这些都是线程做的,这样可以在一定程度......
  • Qt C++编程 从入门到实践 彭源 清华大学出版社
    第一章程序设计基础1.2.1输入和输出操作iostream叫做标准输入输出流库头文件namespacestd叫做标准命名空间cout、cin叫做标准输出、输入流对象有时候看见std::cout的代码,是因为没有事先声明cout对象是从标准命名空间调用的,::叫做域解析运算符,作用就是指明cout这个对象是......
  • HTML 转 PDF API 接口
    HTML转PDFAPI接口网络工具/文件处理支持网页转PDF高效生成PDF/提供永久链接。1.产品功能超高性能转换效率;支持将传递的HTML转换为PDF,支持转换HTML中的CSS格式;支持传递网站URL,直接转换页面成对应的PDF文件;转换后的PDF提供永久存储文件地址;全接口......
  • Python教程(二十一) : 从零开始制作计算器应用【PyQt6】
    文章目录专栏列表环境准备代码解析主要组件初始化界面布局设置事件处理计算逻辑运行应用完整代码示例截图总结注意专栏列表Python教程(十):面向对象编程(OOP)Python教程(十一):单元测试与异常捕获Python教程(十二):面向对象高级编程详解Python教程(十三):常用内置模块详解Python......
  • HTML 下一页功能实现:增强网站导航的简便方法
    在如今的互联网环境中,网站的用户体验显得尤为重要,尤其是在用户浏览网页时,良好的导航功能能极大提升用户的满意度。HTML的“下一页”功能作为增强网站导航的重要手段之一,可以帮助用户轻松地跳转到后续内容,提高浏览效率。如何在网页中实现这一功能,并让用户感受到其带来的便捷呢?HTML......
  • 电脑禁止访问特定网页/网站的5个方法(操作简单!小白必看!)
    确保员工高效工作并维护网络环境的安全与秩序至关重要。有时,为了防止员工访问与工作无关或存在潜在风险的网站,企业需要采取一些措施来限制网页访问。下面为各位企业管理者介绍五个操作简单、效果显著的电脑禁止访问特定网页/网站的方法,即便是技术小白也能轻松上手!1.利用......
  • 475. 简单的学校网页 大学生期末大作业 Web前端网页制作 html+css
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好......
  • 记录 PyQt6 / PySide 6 自定义边框窗口的 Bug 及可能可行的解决方案:窗口抖动和添加 DW
    前言:本篇文章将要讨论我在前不久发表的关于PyQt6/PySide6自定义边框窗口代码及内容中的问题:(终)PyQt6/PySide6+Pywin32自定义标题栏窗口+完全还原Windows原生窗口边框特效_pyside6win32无边框窗口-CSDN博客https://blog.csdn.net/2402_84665876/article/detail......
  • 坐牢第三十六天(QT)
    自定义QQ界面wedget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>#include<QDebug>//qt中信息调试类#include<QIcon>//图标类#include<QPushButton>//按钮类#include<QLabel>//标签类#include<QMovie>//动图类#include<QLineEd......