QML 中基于 WebSockets 的 Qt WebView 和 WebChannel

Question

我想访问 QtObject from HTML-page running in WebView - 调用方法、read/write 属性等

据我了解，我需要建立WebSockets connection between QML and HTML sides, and then use it as a transport for 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(?)，那么用外部浏览器怎么办呢？ This example 表明可以使用 C++，但我想使用 QML。

我使用 Qt 5.11.1.

Answer 1

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>

_{完整的例子可以在下面找到link}

QML 中基于 WebSockets 的 Qt WebView 和 WebChannel

Qt WebView and WebChannel over WebSockets in QML

qt

qml

qtwebsockets

qtwebview

qtwebchannel

QML 端

HTML边