Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Using Qt Webview 1.1 with Qt WebChannel



  • 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



  • 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)
            }
        }
    }
    


  • 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



  • 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


Log in to reply