[Interest] qtwebview with qtwebchannel

Thu Mar 31 17:43:34 CEST 2016

On Thu, Mar 31, 2016 at 4:53 PM, Milian Wolff <milian.wolff at kdab.com> wrote:

> On Thursday, March 31, 2016 4:46:58 PM CEST Allan Sandfeld Jensen wrote:
> > On Thursday 31 March 2016, Sylvain Pointeau wrote:
> > > On Tue, Mar 29, 2016 at 10:24 AM, Sylvain Pointeau <
> > >
> > > sylvain.pointeau at gmail.com> wrote:
> > > > On Tue, Mar 29, 2016 at 8:31 AM, Kalinowski Maurice <
> > > >
> > > > Maurice.Kalinowski at theqtcompany.com> wrote:
> > > >> > QtWebView has a QtWebEngine backend, and that should be available
> on
> > > >>
> > > >> Windows.
> > > >>
> > > >> For UWP/WinRT there is a platform specific implementation loading
> Edge
> > > >> into your application. For classic desktop applications you can use
> Qt
> > > >> Webengine as Alan described.
> > > >
> > > > Excellent! do you know if / how I can use the WebChannel (or
> WebSocket)
> > > > with QtWebView?
> > > > (I tried to use WebSocketServer but it does not work on iOS.)
> > >
> > > any idea? I would like to know if I can use Qt on android/ios/windows
> for
> > > hybrid applications...
> >
> > I don't know if it is possible on iOS. I believe you have to be allowed
> to
> > setup a websocket.
>
> It should be possible, but I haven't tried it myself and have zero iOS
> knowledge. What you need:
>
> Qt/C++ side:
> 1) initialize a Qt WebSocket server
> 2) wrap that server in a WebChannel transport
>
> HTML side:
> 1) load your HTML in any web view
> 2) load qwebchannel there, you will have to copy it, or create a trivial
> HTML
> server in your C++ side to "deploy" it from the Qt resource system to the
> web
> view
> 3) initialize the webchannel with a websocket client using the server
> address
> from the Qt/C++ side
>
> The Qt WebChannel examples contain a chat e.g. that uses your system
> browser
> to do the above, and it works fine with Explorer, Firefox and Chrome. So as
> long as WebSockets work on iOS WebView, and Qt WebSockets work on iOS, it
> should work.
>

I tried the following example on iOS and it does not work:

I tried to set-up a WebSocketServer, transmit the server url to the WebView
page url. and connect to the socket server via a web socket in javascript
(within the WebView)
(idea taken from
http://blog.qt.io/blog/2011/08/31/an-oldnew-approach-to-qtwebkit-hybrid/)

*on mac os x, it works fine,*
*on iOS, it does not work*, the socket closes immediately* (note: socket
works when opened with the url "ws://echo.websocket.org
<http://echo.websocket.org>")*

QML code is:

import Qt.labs.controls 1.0

import QtQuick 2.0

import QtWebSockets 1.0

import QtWebView 1.1

ApplicationWindow {

    visible: true

    title: webView.title

    function appendMessage(message) {

        messageBox.text += "\n" + message

    }

    WebSocketServer {

        id: server

        listen: true

        onClientConnected: {

            webSocket.onTextMessageReceived.connect(function(message) {

                appendMessage(qsTr("Server received message: %1").arg(message));

                webSocket.sendTextMessage(qsTr("Hello Client!"));

            });

        }

        onErrorStringChanged: {

            appendMessage(qsTr("Server error: %1").arg(errorString));

        }

    }

    Text {

        id: messageBox

        text: server.url

        x: 0

        width: parent.width

        y: parent.y + parent.height/2

        height: parent.height/2

    }

    WebView {

        id: webView

        x: 0

        width: parent.width

        y: 0

        height: parent.height/2

        url: "file:///MYPATH/web/index.html?socketurl="+server.url

    }

}

HTML code is:

<html>

  <head>

    <title>Sample "Hello, World" Application</title>

    <script>

			function getUrlVars()

			{

				var vars = [], hash;

				var hashes =
window.location.href.slice(window.location.href.indexOf('?') +
1).split('&');

				for(var i = 0; i < hashes.length; i++)

				{

					hash = hashes[i].split('=');

					vars.push(hash[0]);

					vars[hash[0]] = hash[1];

				}

				return vars;

			}

			function displaySocketUrl() {

				var params = getUrlVars();

				alert(params["socketurl"]);

			};

			function WebSocketTest() {

				var host = getUrlVars()["socketurl"];
//document.getElementById("sockethost").value;

				alert(host);

				// Let us open a web socket

				var ws = new WebSocket(host);

				ws.onopen = function()

				{

					// Web Socket is connected, send data using send()

					ws.send("Message to send");

					alert("Message is sent...");

				};

				ws.onerror = function(evt) {

					alert("onerror..");

				}

				ws.onmessage = function (evt)

				{

					var received_msg = evt.data;

					alert("Message is received: "+received_msg);

				};

				ws.onclose = function(evt)

				{

					// websocket is closed.

					alert("Connection is closed: "+evt.code+" - "+evt.reason);

				};

			}

    </script>

  </head>

  <body bgcolor=white>

    <h1>Sample "Hello, World" Application</h1>

    <p>This is the home page for the HelloWorld Web application. </p>

    <input type="text" id="sockethost">

    <input type="button" value="show me the socket url"
onClick="displaySocketUrl()">

    <input type="button" value="test web socket" onClick="WebSocketTest()">

  </body>

</html>

Best regards,
Sylvain
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160331/21890bf2/attachment.html>