example 'clog-demo': use websocket server on android, remove old hack

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 = {
+function Pingws() {
-    // replace 'ws.send()'
+    if (ws.readyState == 1) {
-    send: function(message) {
+        ws.send ('0');
-        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 Shutdown_ws(event) {
+function Shutdownws(event) {
-    if (_ws != null) {
+    if (ws != null) {
-	_ws.onerror = null;
+	ws.onerror = null;
-	_ws.onclose = null;
+	ws.onclose = null;
-	_ws.close ();
+	ws.close ();
-	_ws = null;
+	ws = null;
     }
     clearInterval (pingerid);
     if (clog['html_on_close'] != '') {
@@ -52,8 +38,8 @@ function Shutdown_ws(event) {
     }
 }
 
-function Setup_ws() {
+function Setupws() {
-    _ws.onmessage = function (event) {
+    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 = null;
-	_ws = new WebSocket (adr  + '?r=' + clog['connection_id']);
+	ws = new WebSocket (adr  + '?r=' + clog['connection_id']);
-        _ws.onopen = function (event) {
+        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,7 +93,6 @@ function Open_ws() {
     adr = adr + '/clog';
     */
 
-    if (ios) {
     adr = 'ws://127.0.0.1:8080';
 
     if (clog['connection_id']) {
@@ -116,24 +101,23 @@ function Open_ws() {
 
     try {
         console.log ('connecting to ' + adrc);
-            _ws = new WebSocket (adrc);
+        ws = new WebSocket (adrc);
     } catch (e) {
         console.log ('trying again, connecting to ' + adrc);
-            _ws = new WebSocket (adrc);
+        ws = new WebSocket (adrc);
     }
 
-        if (_ws != null) {
+    if (ws != null) {
-            _ws.onopen = function (event) {
+        ws.onopen = function (event) {
             console.log ('connection successful');
-                Setup_ws();
+            Setupws();
         }
-            pingerid = setInterval (function () {Ping_ws ();}, 10000);
+        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(); }
 });

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))
+      (lambda (js) (qml:qjs |send| ui:*server* js)))
-      #-ios (lambda (js) (qml:q! |runJavaScript| ui:*browser* js nil)))
 
 (defun webview/on-new-connection ()
   (clog-connection::handle-new-connection 'qml-webview nil))

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 <LQML root>/slime/src/readme-sources.md"))

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 {
+  Ext.Server {}
-    active: (Qt.platform.os === "ios")
-    source: "Server.qml"
-  }
 
   WebView {
     id: browser
@@ -16,22 +14,12 @@ 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)
-      }
-    }
-  }
-
   Button {
     id: reload
     anchors.bottom: parent.bottom

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

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
+This shows how to run a CLOG app locally on mobile. It uses a simple local
-approaches, depending on the OS:
+**websocket-server**.
 
-1. direct calls to the browser to run JS, and a small hack to call back to CLOG
+For android, please see [AndroidManifest.xml](platforms/android/AndroidManifest.xml)
-   on browser events
+for the `@xml/network_security_config` file needed to allow a local connection.
-
-2. a simple local websocket-server; this is needed on iOS, where the above
-   approach doesn't work
 
 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