Qt5.9 WebChannel

Qt WebChannel enables peer-to-peer communication between a server (QML/C++ application) and a client (HTML/JavaScript or QML application). It is supported out of the box by Qt WebEngine. In addition it can work on all browsers that support WebSockets, enabling Qt WebChannel clients to run in any JavaScript environment (including QML). This requires the implementation of a custom transport based on Qt WebSockets.

The module provides a JavaScript library for seamless integration of C++ and QML applications with HTML/JavaScript and QML clients. The clients must use the JavaScript library to access the serialized QObjects published by the host applications.

Qt WebChannel JavaScript API

Setting up the JavaScript API

To communicate with a QWebChannel or WebChannel, a client must use and set up the JavaScript API provided by qwebchannel.js. For clients run inside Qt WebEngine, you can load the file via qrc:///qtwebchannel/qwebchannel.js. For external clients, you need to copy the file to your web server. Then instantiate a QWebChannel object and pass it a transport object and a callback function, which will be invoked once the initialization of the channel finishes and the published objects become available.

The transport object implements a minimal message passing interface. It should be an object with a send() function, which takes a stringified JSON message and transmits it to the server-side QWebChannelAbstractTransport object. Furthermore, its onmessage property should be called when a message from the server was received. Alternatively, you can use a WebSocket to implement the interface.

Note that the JavaScript QWebChannel object should be constructed once the transport object is fully operational. In case of a WebSocket, that means you should create the QWebChannel in the socket‘s onopen handler. Take a look at the Qt WebChannel Standalone Example to see how this is done.

Interacting with QObjects

Once the callback passed to the QWebChannel object is invoked, the channel has finished initialization and all published objects are accessible to the HTML client via the channel.objects property. Thus, assuming an object was published with the identifier "foo", then we can interact with it as shown in the example below. Note that all communication between the HTML client and the QML/C++ server is asynchronous. Properties are cached on the HTML side. Furthermore keep in mind that only QML/C++ data types which can be converted to JSON will be (de-)serialized properly and thus accessible to HTML clients.

  new QWebChannel(yourTransport, function(channel) {

      // Connect to a signal:
      channel.objects.foo.mySignal.connect(function() {
          // This callback will be invoked whenever the signal is emitted on the C++/QML side.
          console.log(arguments);
      });

      // To make the object known globally, assign it to the window object, i.e.:
      window.foo = channel.objects.foo;

      // Invoke a method:
      foo.myMethod(arg1, arg2, function(returnValue) {
          // This callback will be invoked when myMethod has a return value. Keep in mind that
          // the communication is asynchronous, hence the need for this callback.
          console.log(returnValue);
      });

      // Read a property value, which is cached on the client side:
      console.log(foo.myProperty);

      // Writing a property will instantly update the client side cache.
      // The remote end will be notified about the change asynchronously
      foo.myProperty = "Hello World!";

      // To get notified about remote property changes,
      // simply connect to the corresponding notify signal:
      foo.onMyPropertyChanged.connect(function(newValue) {
          console.log(newValue);
      });

      // One can also access enums that are marked with Q_ENUM:
      console.log(foo.MyEnum.MyEnumerator);
  });
时间: 2024-10-10 14:44:41

Qt5.9 WebChannel的相关文章

Qt5.4 All Modules

Qt5.4 All Modules Qt Essentials Qt essentials define the foundation of Qt on all platforms. They are available on all supported development platforms and on the tested target platforms. They will remain source and binary compatible during Qt 5. Essen

Qt5.9 WebEngine 概述

Qt WebEngine模块提供了一个web浏览器, 在不使用本地浏览器的情况下, 它可以很容易地把Web内容嵌入到Qt应用程序中. Qt WebEngine为渲染HTML, XHTML和SVG文档, 使用CSS和JavaScript, 提供了C++类和QML类型 Qt WebEngine架构 Qt WebEngine的功能分成下列模块: Qt WebEngine Widgets 模块: 用于创建基于Widget的web应用. Qt WebEngine 模块: 用于创建基于Qt Quick的we

QT5.6.0+VS2015编译MQSQL(ACCESS)X64数据库驱动

QT5.6.0+VS2015编译MQSQL(ACCESS)数据库驱动 1 说明 l 不建议QT5.6.0使用ACCESS数据库.如果想使用轻量级的数据库,可以使用Sqlite数据库. QT想要访问Access.SQL Server等数据库可以通过ODBC的方式来访问,但是QT较高版本已不提供ODBC驱动库,需要自己编译.QT5.6.0编译出来的数据库驱动是64位,但是不建议安装Access数据库,微软本身也不建议安装64位office. PS:为什么QT5.6.0不编译32位数据库驱动:编译数据

QT5.x应用在Mac OS X和Windows平台的发布过程

QT是一款非常牛逼的跨平台开发工具,目前可以开发Mac OS X.Windows.Linux.Android.iOS等平台的App.对于Android和iOS平台,发布相对容易,例如,Android平台是生成apk文件上传到Android设备的,所以直接安装apk文件即可.不过对于PC平台(Mac OS X.Windows和Linux)的应用,在发布时就显得麻烦些. 本文主要介绍Mac OS X和Windows平台的发布过程.这两个平台运行的应用都称为可执行程序.Windows平台可执行文件扩展

Qt5.2.1 + VS2010安装错误(Unable to find a Qt build)

本文旨在这对Qt+Vs安装过程中,遇到Unable to find a Qt build问题的解决办法. 首先,介绍安装过程, 安装过程可以分为三步. 第一步:VS2010旗舰版,安装过程可以默认或者自己设置: 第二步:安装qt-opensource-windows-x86-msvc2010-5.2.1,安装路径同样可以默认或者定制: 第三步:安装qt-vs-addin-1.2.4-opensource,安装过程同样可以默认或者定制. 然后,启动VS2010,会在菜单栏看到Qt5选项,截图如下:

Qt5.5.1和Qt5.3.2编译OCI驱动教程及验证方法

我们都知道oracle数据库的强大,并且好多企业或者教学用到数据库时都会推荐使用.但是Qt因为版权问题没有封装oracle数据库专用驱动,网上也有一大堆说法和教程,但是或多或少的都有问题.下面废话不多少,直接上教程. 注:本教程采用Qt5.5.1版本来讲下Qt5.5.1和Qt5.3.2编译OCI驱动过程,其他版本请对号入座. 我的Qt版本是Qt5.5.1,安装路径是默认的 C:\Qt\Qt5.5.1. 我的oracle 11g客户端安装路径: D:\app\client\product\11.2

用mingw静态编译Qt4.8.2和Qt5.1.1(需要修改不少源码)

因为一些乱七八糟的原因,我需要用mingw静态编译Qt4.8.2和Qt5.1.1.经历了一天的折腾之后,自觉编译一下Qt还是件颇为麻烦的事情,故将过程略作总结,以备不时之需. 首先,在编译之前,我需要下载mingw.qt-everywhere-opensource-src-4.8.2和qt-everywhere-opensource-src-5.1.1. 然后,准备开始编译了,当然先得把压缩包解压到一个合适的地方.我这里的路径是"C:\Qt"下面. 解压完毕后,先试着编译Qt4.8.2

QT5.5+VS2012

OS: Windows 7(32 bits) VS:v2012(更新到最后补丁包VS2012.5.iso) 1. QT5.5 1) 下载 在http://download.qt.io/archive/选择qt-〉5.5-〉5.5.1 这个版本的QT支持VS2010---VS2013,而且Windows版本只支持x86,即32位系统. 点击qt-opensource-windows-x86-msvc2012-5.5.1.exe下载. 2) 安装 默认 2. VSaddin 1)下载 在http:/

QT5.3无法自动调用incomingConnection函数的问题(4.7没有这个问题)

最近将qt4.7的一个工程移到5.3,遇到了几个麻烦事,主要是这个incomingConnection监听后无法自动调用的问题,在4.7上是完全没有问题的,到了5.3就不行,网上也查了下,网友们都是放出问题,然而都没有写出解决. 1.一步解决 我之前是这样写的: void TFTPxServer::incomingConnection(int socketDescriptor) { qDebug() << "incomingConnection..."; TFTPxThre