[Interest] qtwebview with qtwebchannel

Thu Apr 7 09:38:01 CEST 2016

Hello,

Do you have any idea how to use WebSocket or WebChannel on iOS?
Should I conclude that we cannot do hybrid apps with Qt on iOS (works on
desktop, don't know about Android)?

Best regards,
Sylvain

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

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