Using Qt Webview 1.1 with Qt WebChannel

[kerem]

Hi,

Can we use Qt Webview 1.1 with Qt WebChannel in order to maintain the QML elements/ objects form HTML file in the Qt Webview?

I want to develop a mobile hybrid app by using QtWebview.

Regards

[veryqtperson]

Yes, you can, using WebSockets as a transport. But not with QML only - some C++ code is required.

1. Implement a transport using QWebChannelAbstractTransport and register it at QML side;
2. Add WebChannel;
3. Add WebSocketServer;
4. Connect your channel to the transport at onClientConnected:

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

[mgys]

Hello veryqtperson

I tried to follow your directions. But I think I'm missing something.

    WebView {
        id: webView
        anchors.fill: parent
        url: initialUrl
        onLoadingChanged: {
            if (loadRequest.errorString)
                console.error(loadRequest.errorString);
        }
        WebSocket
        {
            id: socket
            active: true
            url: "ws://localhost:55222"
            onStatusChanged: if (socket.status == WebSocket.Open)
                             {
                                // socket.sendTextMessage("{\"test\": \"test\"}")
                             }

        }
        WebChannel{
            id:channel
            registeredObjects: [webView, socket,]

        }
    }

    WebSocketServer {
        id: server
        listen: true
        port: 55222
        onClientConnected: {
            if(webSocket.status === WebSocket.Open) {
                console.error("client connected")
                channel.connectTo(transport)
                webSocket.onTextMessageReceived.connect(transport.textMessageReceived)
                transport.onMessageChanged.connect(webSocket.sendTextMessage)
            }

        }
        onErrorStringChanged: {
            console.error(qsTr("Server error: %1").arg(errorString))
        }
    }

Socket and everything is connecting but I cant access my registeredObjects. Shouldn't they be available? As much as I understand, I don't need to use the JS-API, since qml provide it in this case? (Tested on android platform)

Thanks and Greets
mgys

[veryqtperson]

First of all, you don't have transport object - in your code fragment it's just an undefined thing. Secondly, you don't need a WebSocket, just a WebSocketServer. And lastly, yes, you do need a JS API (qwebchannel.js), it's still required.

Here's a an article with more detailed description: https://retifrav.github.io/blog/2018/07/14/html-from-qml-over-webchannel-websockets/#mostly-qml