Qt WebChannel JavaScript API

Настройка JavaScript API

Для взаимодействия с QWebChannel или WebChannel, клиент должен использовать и настроить JavaScript API, предоставленный qwebchannel.js. Для клиентов, работающих внутри Qt WebEngine, вы можете загрузить файл с помощью qrc:///qtwebchannel/qwebchannel.js. Для внешних клиентов необходимо скопировать файл на ваш веб-сервер. Затем необходимо создать объект QWebChannel и передать ему объект транспорта и функцию обратного вызова, которая будет вызвана после завершения инициализации канала и доступности опубликованных объектов.

Объект транспорта реализует минимальный интерфейс передачи сообщений. Он должен быть объектом с функцией send(), которая принимает строковое представление JSON-сообщения и передает его объекту QWebChannelAbstractTransport на стороне сервера. Кроме того, его свойство onmessage должно вызываться при получении сообщения от сервера. В качестве альтернативы вы можете использовать WebSocket для реализации интерфейса.

Обратите внимание, что объект JavaScript QWebChannel должен быть создан после того, как объект транспорта будет полностью функционален. В случае WebSocket, это означает, что вы должны создать QWebChannel в обработчике сокета onopen. Посмотрите пример Qt WebChannel Standalone Example здесь, чтобы увидеть, как это делается.

Взаимодействие с QObjects

После вызова обратного вызова, переданного объекту QWebChannel, канал завершает инициализацию, и все опубликованные объекты становятся доступны клиенту HTML через свойство channel.objects. Таким образом, предположим, что объект был опубликован с идентификатором "foo", тогда мы можем взаимодействовать с ним, как показано в примере ниже. Обратите внимание, что все взаимодействия между клиентом HTML и сервером QML/C++ являются асинхронными. Свойства кэшируются на стороне HTML. Кроме того, имейте в виду, что только типы данных QML/C++ , которые могут быть преобразованы в JSON, будут корректно сериализованы/десериализованы и, следовательно, будут доступны клиентам HTML.

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.myPropertyChanged.connect(function() {
        console.log(foo.myProperty);
    });

    // One can also access enums that are marked with Q_ENUM:
    console.log(foo.MyEnum.MyEnumerator);
});

Перегруженные методы и сигналы

Когда вы публикуете QObject с перегруженными методами, QWebChannel будет выбирать наилучшее соответствие для вызовов методов. Обратите внимание, что из-за системы типов JavaScript существует только один тип 'number', который лучше всего отображается на C++ 'double'. Когда перегрузки отличаются только типом числового параметра, QWebChannel всегда будет выбирать ту перегрузку, которая лучше всего соответствует типу JavaScript 'number'. При подключении к перегруженному сигналу клиент QWebChannel по умолчанию подключается только к первой перегрузке сигнала с таким же именем. Кроме того, перегрузки методов и сигналов могут быть явно запрошены по их полному QMetaMethod сигнатуре. Предположим, что у нас есть следующий QObject подкласс на стороне C++:

class Foo : public QObject
{
    Q_OBJECT
slots:
    void foo(int i);
    void foo(double d);
    void foo(const QString &str);
    void foo(const QString &str, int i);

signals:
    void bar(int i);
    void bar(const QString &str);
    void bar(const QString &str, int i);
};

Тогда вы можете взаимодействовать с этим классом на стороне JavaScript так:

// methods
foo.foo(42); // will call the method named foo which best matches the JavaScript number parameter, i.e. foo(double d)
foo.foo("asdf"); // will call foo(const QString &str)
foo.foo("asdf", 42); // will call foo(const QString &str, int i)
foo["foo(int)"](42); // explicitly call foo(int i), *not* foo(double d)
foo["foo(QString)"]("asdf"); // explicitly call foo(const QString &str)
foo["foo(QString,int)"]("asdf", 42); // explicitly call foo(const QString &str, int i)

// signals
foo.bar.connect(...); // connect to first signal named bar, i.e. bar(int i)
foo["bar(int)"].connect(...); // connect explicitly to bar(int i)
foo["bar(QString)"].connect(...); // connect explicitly to bar(const QString &str)
foo["bar(QString,int)"].connect(...); // connect explicitly to bar(const QString &str, int i)