Qt WebView и WebChannel через WebSockets в QML

Я хочу получить доступ к QtObject с HTML-страницы, работающей в WebView — вызывать методы, свойства чтения/записи и т. д.

Насколько я понял, мне нужно установить соединение WebSockets между сторонами QML и HTML, а затем использовать его в качестве транспорта для WebChannel< /а>.

Не путайте WebView с WebEngineView — я знаю, как сделать это с WebEngineView, но мне нужно сделать это с WebView.

Итак, вот что у меня есть.

Сторона QML

QtObject {
    id: someObject
    WebChannel.id: "backend"
    property string someProperty: “property value"
}

WebSocketServer {
    listen: true
    port: 55222
    onClientConnected: {
        console.log(webSocket.status);
        //webSocket.onTextMessageReceived.connect(function(message) {
        //    console.log(qsTr("Server received message: %1").arg(message));
        //});
    }
}

WebView {
    url: "index.html"
    //webChannel: channel // invalid property name "webChannel"
    //experimental.webChannel.registeredObjects: [someObject] // invalid property name "experimental"
}

WebChannel {
    id: channel
    registeredObjects: [someObject]
}

HTML-сторона

window.onload = function()
{
    // here will be QtObject from QML side
    var backend;

    var socket = new WebSocket("ws://localhost:55222");
    socket.onopen = function()
    {
        //socket.send("some message");
        new QWebChannel(socket, function(channel) {
            backend = channel.objects.backend;
        });
    };
}

function alertProperty()
{
    alert(backend.someProperty);
}

Простой обмен сообщениями работает нормально (socket.send()), поэтому с транспортом все в порядке, но как мне назначить WebChannel для WebView? С WebEngineView было просто, там есть свойство webChannel (и даже нет необходимости использовать WebSockets), но в WebView ничего подобного нет. Я имею в виду, что что-то должно сообщить WebView, что WebChannel содержит мой QtObject, чтобы он был виден JS?

И если WebView не поддерживает WebChannel(?), то как это сделать с помощью внешнего браузера? Этот пример показывает, что это возможно с C++, но я хочу сделать это с QML.

Я использую Qt 5.11.1.


qt qml qtwebsockets qtwebview qtwebchannel
person retif    schedule 12.07.2018    source источник
comment
QWebView не поддерживает QtWebchannel   -  person eyllanesc    schedule 12.07.2018
comment
@eyllanesc, не знал этого, обновил вопрос   -  person retif    schedule 12.07.2018

Ответы (1)


arrow_upward
3
arrow_downward

WebView не поддерживает WebChannel по умолчанию. Таким образом, решение состоит в том, чтобы использовать WebSocketServer с QWebChannelAbstractTransport, как показано ниже:

main.cpp

#include <QGuiApplication>
#include <QJsonDocument>
#include <QQmlApplicationEngine>
#include <QWebChannelAbstractTransport>
#include <QtWebView>

class WebSocketTransport : public QWebChannelAbstractTransport{
    Q_OBJECT
public:
    using QWebChannelAbstractTransport::QWebChannelAbstractTransport;
    Q_INVOKABLE void sendMessage(const QJsonObject &message) override{
        QJsonDocument doc(message);
        emit messageChanged(QString::fromUtf8(doc.toJson(QJsonDocument::Compact)));
    }
    Q_INVOKABLE void textMessageReceive(const QString &messageData){
        QJsonParseError error;
        QJsonDocument message = QJsonDocument::fromJson(messageData.toUtf8(), &error);
        if (error.error) {
            qWarning() << "Failed to parse text message as JSON object:" << messageData
                       << "Error is:" << error.errorString();
            return;
        } else if (!message.isObject()) {
            qWarning() << "Received JSON message that is not an object: " << messageData;
            return;
        }
        emit messageReceived(message.object(), this);
    }
signals:
    void messageChanged(const QString & message);
};

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);
    qmlRegisterType<WebSocketTransport>("com.eyllanesc.org", 1, 0, "WebSocketTransport");
    QtWebView::initialize();

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

#include "main.moc"

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtWebSockets 1.1
import QtWebView 1.1
import QtWebChannel 1.0
import com.eyllanesc.org 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    WebView {
        url: "qrc:/index.html"
        anchors.fill: parent
    }

    QtObject {
        id: someObject
        property string someProperty: "prop"
        WebChannel.id: "core"
        function receiveText(text){
            console.log("receiveText: ", text)
        }
        signal sendText(string text)
    }

    WebSocketTransport{
        id: transport
    }

    WebSocketServer {
        listen: true
        port: 12345
        onClientConnected: {
            if(webSocket.status === WebSocket.Open){
                channel.connectTo(transport)
                webSocket.onTextMessageReceived.connect(transport.textMessageReceive)
                transport.onMessageChanged.connect(webSocket.sendTextMessage)
            }
        }
    }

    WebChannel {
        id: channel
        registeredObjects: [someObject]
    }

    // testing
    Timer{
        interval: 500
        running: true
        repeat: true
        onTriggered: someObject.sendText(Qt.formatTime(new Date(), "hh:mm:ss") + " from QML")
    }
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="qrc:///qtwebchannel/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("Connecting to WebSocket server at " + 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 connected, setting up QWebChannel.");
                    new QWebChannel(socket, function(channel) {
                        // make core object accessible globally
                        window.core = channel.objects.core;
                        input.innerHTML = core.someProperty;
                        document.getElementById("send").onclick = function() {
                            var input = document.getElementById("input");

                            var text = input.value;
                            if (!text) {
                                return;
                            }
                            output("Sent message: " + text );
                            input.value = "";
                            core.receiveText(text + " From HTML");
                        }

                        core.sendText.connect(function(message) {
                            output("Received message-" + core.someProperty + " : " + message);
                        });

                        core.receiveText("Client connected, ready to send/receive messages!");
                        output("Connected to WebChannel, ready to send/receive messages!");
                    });
                }
            }
            //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" onclick="javascript:click();" />
    </body>
</html>

Полный пример можно найти по следующей ссылке.

person eyllanesc    schedule 13.07.2018
comment
Таким образом, невозможно сделать все с помощью QML, сначала необходимо выполнить некоторый код C++ (реализация транспорта), и это то, чего мне не хватало. Большое спасибо за вашу работу, это отличное объяснение. - person retif; 13.07.2018