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

This commit is contained in:
pls.153 2025-04-19 07:58:53 +02:00
parent 24f0d4a17d
commit eda0672f1e
6 changed files with 50 additions and 89 deletions

View file

@ -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(); }
});

View file

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

View file

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

View file

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

View file

@ -2,8 +2,6 @@ import QtQuick 2.15
import QtWebSockets 1.15
import "." as Ext
// for iOS only
Item {
WebSocketServer {
id: server

View file

@ -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