c/webui
1
0
Fork 0
mirror of https://github.com/webui-dev/webui synced 2025-03-28 21:13:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding webui.setEventCallback

Browse Source 
* Adding new feature to WebUI Bridge to listen for connect/disconnect events in the UI. More events will be added in the future.
*
This commit is contained in:
Hassan DRAGA 2024-01-04 16:17:51 -05:00
parent b3a2677809
commit 70def025c8
3 changed files with 1598 additions and 1491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3045
bridge/webui_bridge.h
View File

File diff suppressed because it is too large Load Diff

30
bridge/webui_bridge.ts
View File

@ -20,7 +20,7 @@ import { AsyncFunction, addRefreshableEventListener } from './utils.ts';
type DataTypes = string | number | boolean | Uint8Array;
class WebuiBridge {
// WebUI settings
// WebUI Settings
#secure: boolean;
#token: number;
#port: number;
@ -43,7 +43,7 @@ class WebuiBridge {
#allowNavigation = false;
#sendQueue: Uint8Array[] = [];
#isSending = false;
// WebUI const
// WebUI Const
#WEBUI_SIGNATURE = 221;
#CMD_JS = 254;
#CMD_JS_QUICK = 253;
@ -63,6 +63,14 @@ class WebuiBridge {
#PROTOCOL_DATA = 8; // Protocol byte position: Data (n Byte)
#Token = new Uint32Array(1);
#Ping: Boolean = true;
// Events
#eventsCallback: ((event: number) => void) | null = null;
event = {
// TODO: Make `event` static and solve the ESBUILD `_WebuiBridge` issue.
CONNECTED: 0,
DISCONNECTED: 1,
};
// Constructor
constructor({
secure,
token,
@ -164,6 +172,7 @@ class WebuiBridge {
}
}, 1500);
}
// Methods
#close(reason = 0, value = '') {
this.#wsStatus = false;
this.#closeReason = reason;
@ -250,6 +259,9 @@ class WebuiBridge {
this.#wsStatusOnce = true;
if (this.#log) console.log('WebUI -> Connected');
this.#clicksListener();
if (this.#eventsCallback) {
this.#eventsCallback(this.event.CONNECTED);
}
};
this.#ws.onerror = () => {
if (this.#log) console.log('WebUI -> Connection Failed');
@ -269,6 +281,9 @@ class WebuiBridge {
this.#closeWindowTimer();
}
}
if (this.#eventsCallback) {
this.#eventsCallback(this.event.DISCONNECTED);
}
};
this.#ws.onmessage = async (event) => {
const buffer8 = new Uint8Array(event.data);
@ -651,7 +666,7 @@ class WebuiBridge {
this.#sendData(packet);
});
}
// -- APIs --------------------------
// -- Public APIs --------------------------
/**
* Call a backend function
*
@ -708,6 +723,15 @@ class WebuiBridge {
decode(data: string): string {
return atob(data);
}
/**
* Set a callback to receive events like connect/disconnect
*
* @param callback - callback function `myCallback(e)`
* @example - webui.setEventCallback((e) => {if(e == webui.event.CONNECTED){ ... }});
*/
setEventCallback(callback: (e: number) => void): void {
this.#eventsCallback = callback;
}
}
// Export
type webui = WebuiBridge;

14
examples/C/serve_a_folder/index.html
View File

@ -103,5 +103,19 @@
xmlHttp.send(null);
alert(xmlHttp.responseText);
}
document.addEventListener('DOMContentLoaded', function() {
// DOM is loaded, and `webui` object should be available.
webui.setEventCallback((e) => {
if (e == webui.event.CONNECTED) {
// Connection to the backend is established
console.log('Connected.');
} else if (e == webui.event.DISCONNECTED) {
// Connection to the backend is lost
console.log('Disconnected.');
}
});
});
</script>
</html>