From eda0672f1e26b0bd8c04e77cec974ed8c8a4b259 Mon Sep 17 00:00:00 2001 From: "pls.153" Date: Sat, 19 Apr 2025 07:58:53 +0200 Subject: [PATCH] example 'clog-demo': use websocket server on android, remove old hack --- .../clog-assets/static-files/js/boot.js | 96 ++++++++----------- examples/clog-demo/lisp/clog-bridge.lisp | 3 +- examples/clog-demo/make.lisp | 5 - examples/clog-demo/qml/ext/Browser.qml | 20 +--- examples/clog-demo/qml/ext/Server.qml | 2 - examples/clog-demo/readme.md | 13 +-- 6 files changed, 50 insertions(+), 89 deletions(-) diff --git a/examples/clog-demo/clog-assets/static-files/js/boot.js b/examples/clog-demo/clog-assets/static-files/js/boot.js index 6fac330..a212dd5 100644 --- a/examples/clog-demo/clog-assets/static-files/js/boot.js +++ b/examples/clog-demo/clog-assets/static-files/js/boot.js @@ -1,4 +1,4 @@ -var _ws=null; +var ws=null; var adr; var adrc; var clog={}; var pingerid; @@ -6,7 +6,6 @@ var retryid; var s = document.location.search; var tokens; var r = /[?&]?([^=]+)=([^&]*)/g; -var ios = false; clog['body']=document.body; clog['head']=document.head; @@ -20,31 +19,18 @@ if (typeof clog_debug == 'undefined') { clog_debug = false; } -const ws = { - // replace 'ws.send()' - send: function(message) { - if (ios) { - _ws.send(message); - } else { - // hack, see QML 'onTitleChanged()' - document.title = message; - document.title = "-"; // non empty - } - } -}; - -function Ping_ws() { - if (_ws.readyState == 1) { - _ws.send ('0'); +function Pingws() { + if (ws.readyState == 1) { + ws.send ('0'); } } -function Shutdown_ws(event) { - if (_ws != null) { - _ws.onerror = null; - _ws.onclose = null; - _ws.close (); - _ws = null; +function Shutdownws(event) { + if (ws != null) { + ws.onerror = null; + ws.onclose = null; + ws.close (); + ws = null; } clearInterval (pingerid); if (clog['html_on_close'] != '') { @@ -52,8 +38,8 @@ function Shutdown_ws(event) { } } -function Setup_ws() { - _ws.onmessage = function (event) { +function Setupws() { + ws.onmessage = function (event) { try { if (clog_debug == true) { console.log ('eval data = ' + event.data); @@ -67,35 +53,35 @@ function Setup_ws() { var rc = function (event) { console.log (event); clearInterval (retryid); - _ws = null; - _ws = new WebSocket (adr + '?r=' + clog['connection_id']); - _ws.onopen = function (event) { + ws = null; + ws = new WebSocket (adr + '?r=' + clog['connection_id']); + ws.onopen = function (event) { console.log ('reconnect successful'); - Setup_ws(); + Setupws(); } - _ws.onclose = function (event) { + ws.onclose = function (event) { console.log ('reconnect failure'); console.log (Date.now()); retryid = setInterval(function () {rc("Failed reconnect - trying again")}, 500); } } - _ws.onerror = function (event) { + ws.onerror = function (event) { console.log ('onerror: reconnect'); rc("onerror - trying reconnect") } - _ws.onclose = function (event) { + ws.onclose = function (event) { if (event.code && event.code === 1000) { console.log("WebSocket connection got normal close from server. Don't reconnect."); - Shutdown_ws(event); + Shutdownws(event); } else { rc("onclose - trying reconnnect"); } } } -function Open_ws() { +function Openws() { /* if (location.protocol == 'https:') { adr = 'wss://' + location.hostname; @@ -107,33 +93,31 @@ function Open_ws() { adr = adr + '/clog'; */ - if (ios) { - adr = 'ws://127.0.0.1:8080'; + adr = 'ws://127.0.0.1:8080'; - if (clog['connection_id']) { - adrc = adr + '?r=' + clog['connection_id']; - } else { adrc = adr } + if (clog['connection_id']) { + adrc = adr + '?r=' + clog['connection_id']; + } else { adrc = adr } - try { - console.log ('connecting to ' + adrc); - _ws = new WebSocket (adrc); - } catch (e) { - console.log ('trying again, connecting to ' + adrc); - _ws = new WebSocket (adrc); + try { + console.log ('connecting to ' + adrc); + ws = new WebSocket (adrc); + } catch (e) { + console.log ('trying again, connecting to ' + adrc); + ws = new WebSocket (adrc); + } + + if (ws != null) { + ws.onopen = function (event) { + console.log ('connection successful'); + Setupws(); } - - if (_ws != null) { - _ws.onopen = function (event) { - console.log ('connection successful'); - Setup_ws(); - } - pingerid = setInterval (function () {Ping_ws ();}, 10000); - } else { + pingerid = setInterval (function () {Pingws ();}, 10000); + } else { document.writeln ('If you are seeing this your browser or your connection to the internet is blocking websockets.'); - } } } $( document ).ready(function() { - if (_ws == null) { Open_ws(); } + if (ws == null) { Openws(); } }); diff --git a/examples/clog-demo/lisp/clog-bridge.lisp b/examples/clog-demo/lisp/clog-bridge.lisp index 7b7761c..dbbbcdb 100644 --- a/examples/clog-demo/lisp/clog-bridge.lisp +++ b/examples/clog-demo/lisp/clog-bridge.lisp @@ -3,8 +3,7 @@ (in-package :clog) (setf clog-connection::*send-to-webview* - #+ios (lambda (js) (qml:qjs |send| ui:*server* js)) - #-ios (lambda (js) (qml:q! |runJavaScript| ui:*browser* js nil))) + (lambda (js) (qml:qjs |send| ui:*server* js))) (defun webview/on-new-connection () (clog-connection::handle-new-connection 'qml-webview nil)) diff --git a/examples/clog-demo/make.lisp b/examples/clog-demo/make.lisp index 5d13ce7..3ae95fa 100644 --- a/examples/clog-demo/make.lisp +++ b/examples/clog-demo/make.lisp @@ -45,11 +45,6 @@ (shell (cc "cp -r ../clog-assets/static-files " *assets*)) (shell (cc "cp -r ../clog-assets/*.asd " *assets*))) -#+ios -(with-open-file (s (merge-pathnames "static-files/js/boot.js" *assets*) - :direction :output :if-exists :append) - (write-line "ios = true;" s)) - #+mobile (unless (find-swank) (error "Swank files missing, please see /slime/src/readme-sources.md")) diff --git a/examples/clog-demo/qml/ext/Browser.qml b/examples/clog-demo/qml/ext/Browser.qml index fb372b7..abf3096 100644 --- a/examples/clog-demo/qml/ext/Browser.qml +++ b/examples/clog-demo/qml/ext/Browser.qml @@ -1,12 +1,10 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtWebView 1.15 +import "." as Ext Item { - Loader { - active: (Qt.platform.os === "ios") - source: "Server.qml" - } + Ext.Server {} WebView { id: browser @@ -16,18 +14,8 @@ Item { visible: !busy.visible onLoadingChanged: { - if (Qt.platform.os !== "ios") { - if (loadRequest.status === WebView.LoadSucceededStatus) { - Lisp.call("clog:webview/on-new-connection") - } - } - } - - // hack to get notified from the browser, see 'boot.js' - onTitleChanged: { - if ((title !== "-") && (title !== "boot.html")) { - Lisp.call("clog:webview/on-message", title) - main.log(title) + if (loadRequest.status === WebView.LoadSucceededStatus) { + Lisp.call("clog:webview/on-new-connection") } } } diff --git a/examples/clog-demo/qml/ext/Server.qml b/examples/clog-demo/qml/ext/Server.qml index ca634ce..c612b5b 100644 --- a/examples/clog-demo/qml/ext/Server.qml +++ b/examples/clog-demo/qml/ext/Server.qml @@ -2,8 +2,6 @@ import QtQuick 2.15 import QtWebSockets 1.15 import "." as Ext -// for iOS only - Item { WebSocketServer { id: server diff --git a/examples/clog-demo/readme.md b/examples/clog-demo/readme.md index 6f8ca26..218ab33 100644 --- a/examples/clog-demo/readme.md +++ b/examples/clog-demo/readme.md @@ -7,7 +7,7 @@ Try it You can download an APK (android devices) of this example from DropBox: [CLOG demo](https://www.dropbox.com/s/h5wy57niq4g12ec/CLOG-demo.apk?dl=0). -**Please note**: startup time on mobile is now greatly improved, by simply +**Please note**: startup time on mobile is greatly improved here, by simply skipping time consuming crypto initialization, not needed for a local connection, like in this example. @@ -41,14 +41,11 @@ also needed on the desktop, if used with LQML). Info ---- -This shows how to run a CLOG app locally on mobile. It uses two different -approaches, depending on the OS: +This shows how to run a CLOG app locally on mobile. It uses a simple local +**websocket-server**. -1. direct calls to the browser to run JS, and a small hack to call back to CLOG - on browser events - -2. a simple local websocket-server; this is needed on iOS, where the above - approach doesn't work +For android, please see [AndroidManifest.xml](platforms/android/AndroidManifest.xml) +for the `@xml/network_security_config` file needed to allow a local connection. The webview is the native one of the mobile device, which has some restrictions: it can't overlap with QML items, and things like swiping don't