[Interest] qtwebview with qtwebchannel

Mon Mar 28 11:23:35 CEST 2016

>Le dimanche 27 mars 2016, Allan Sandfeld Jensen <kde at carewolf.com> a écrit
:
>
> On Sunday 27 March 2016, Sylvain Pointeau wrote:
> > please could you confirm if qtwebchannel works with qtwebview?
> > if yes, would you have some exemple to show how it works in qml?
>
> It does work, but there is no automatic integration. I would suggest
looking
> at howto for qtwebchannel from before there was automatic integration in
> QtWebKit, the principles are the same.

Hello,

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")

Do you have any idea? Is there another trick to make the WebView
communicating with the native backend?

Best regards,
Sylvain

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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160328/9e970dc9/attachment.html>