[Interest] qtwebview with qtwebchannel

[Sylvain Pointeau]

Any thought on the below? is Qt able on iOS to support the hybrid approach
where the HTML communicates back to the native backend?

On another hand, do you have any example if I would like to develop a web
view backend for iOS that would give a plateform dependant way to
communicate between HTML <-> backend?

Best regards,
Sylvain

On Thu, Mar 31, 2016 at 5:43 PM, Sylvain Pointeau <
sylvain.pointeau at gmail.com> wrote:

> 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/20160419/253f46ee/attachment.html>