Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. Using Qt Webview 1.1 with Qt WebChannel
Forum Updated to NodeBB v4.3 + New Features

Using Qt Webview 1.1 with Qt WebChannel

Scheduled Pinned Locked Moved Unsolved Mobile and Embedded
5 Posts 4 Posters 1.5k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    kerem
    wrote on last edited by kerem
    #1

    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

    1 Reply Last reply
    1
    • veryqtpersonV Offline
      veryqtpersonV Offline
      veryqtperson
      wrote on last edited by
      #2

      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)
              }
          }
      }
      
      1 Reply Last reply
      2
      • M Offline
        M Offline
        mgys
        wrote on last edited by
        #3

        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

        1 Reply Last reply
        0
        • veryqtpersonV Offline
          veryqtpersonV Offline
          veryqtperson
          wrote on last edited by
          #4

          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

          J 1 Reply Last reply
          1
          • veryqtpersonV 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

            J Offline
            J Offline
            jhayar
            wrote on last edited by
            #5

            @veryqtperson said in Using Qt Webview 1.1 with Qt WebChannel:

            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

            hi . i tried that sample but it doesnt work on android.

            the javascript part cant connect to websocket.

            does the author of this thread manage it work?

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved