}

#wsOnOpen = (event: Event) => {

this.#wsWasConnected = true;

this.#unfreezeUI();

if (this.#log) console.log('WebUI -> Connected');

this.#checkToken();

};

#wsOnError = (event: Event) => {

if (this.#log) console.log(`WebUI -> Connection failed.`);

};

#wsOnClose = (event: CloseEvent) => {

if (this.#closeReason === this.#CMD_NAVIGATION) {

this.#closeReason = 0;

if (this.#log) console.log(`WebUI -> Connection lost. Navigation to [${this.#closeValue}]`);

this.#allowNavigation = true;

globalThis.location.replace(this.#closeValue);

} else {

if (this.#wsStayAlive) {

// Re-connect

if (this.#log) console.log(`WebUI -> Connection lost (${event.code}). Reconnecting...`);

this.#freezeUi();

setTimeout(() => this.#wsConnect(), this.#wsStayAliveTimeout);

}

else if (this.#log) {

// Debug close

console.log(`WebUI -> Connection lost (${event.code})`);

this.#freezeUi();

} else {

// Release close

this.#closeWindowTimer();

}

}

// Event Callback

if (this.#eventsCallback) {

this.#eventsCallback(this.event.DISCONNECTED);

}

};

#wsOnMessage = async (event: MessageEvent) => {

const buffer8 = new Uint8Array(event.data);

if (buffer8.length < this.#PROTOCOL_SIZE) return;

if (buffer8[this.#PROTOCOL_SIGN] !== this.#WEBUI_SIGNATURE) return;

if (this.#isTextBasedCommand(buffer8[this.#PROTOCOL_CMD])) {

// UTF8 Text based commands

const callId = this.#getID(buffer8, this.#PROTOCOL_ID);

// Process Command

switch (buffer8[this.#PROTOCOL_CMD]) {

case this.#CMD_JS_QUICK:

case this.#CMD_JS:

{

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [Script]

const script: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);

const scriptSanitize = script.replace(/(?:\r\n|\r|\n)/g, '\n');

if (this.#log) console.log(`WebUI -> CMD -> JS [${scriptSanitize}]`);

// Get callback result

let FunReturn = 'undefined';

let FunError = false;

try {

FunReturn = await AsyncFunction(scriptSanitize)();

} catch (e) {

FunError = true;

FunReturn = e.message;

}

// Stop if this is a quick call

if (buffer8[this.#PROTOCOL_CMD] === this.#CMD_JS_QUICK) return;

// Get the call return

if (FunReturn === undefined) {

FunReturn = 'undefined';

}

// Logging

if (this.#log && !FunError) console.log(`WebUI -> CMD -> JS -> Return Success [${FunReturn}]`);

if (this.#log && FunError) console.log(`WebUI -> CMD -> JS -> Return Error [${FunReturn}]`);

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [Error, Script Response]

let packet = new Uint8Array(0);

const packetPush = (data: Uint8Array) => {

const newPacket = new Uint8Array(packet.length + data.length);

newPacket.set(packet);

newPacket.set(data, packet.length);

packet = newPacket;

};

const packetPushStr = (data: string) => {

const chunkSize = 1024 * 8;

if (data.length > chunkSize) {

const encoder = new TextEncoder();

for (let i = 0; i < data.length; i += chunkSize) {

const chunk = data.substring(i, Math.min(i + chunkSize, data.length));

const encodedChunk = encoder.encode(chunk);

packetPush(encodedChunk);

}

} else {

packetPush(new TextEncoder().encode(data));

}

};

packetPush(new Uint8Array([this.#WEBUI_SIGNATURE]));

packetPush(new Uint8Array([0, 0, 0, 0])); // Token (4 Bytes)

packetPush(new Uint8Array([0, 0])); // ID (2 Bytes)

packetPush(new Uint8Array([this.#CMD_JS]));

packetPush(new Uint8Array(FunError ? [1] : [0]));

packetPushStr(FunReturn);

packetPush(new Uint8Array([0]));

this.#addToken(packet, this.#token, this.#PROTOCOL_TOKEN);

this.#addID(packet, callId, this.#PROTOCOL_ID);

this.#sendData(packet);

}

break;

case this.#CMD_CALL_FUNC:

{

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [Call Response]

const callResponse: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);

if (this.#log) {

console.log(`WebUI -> CMD -> Call Response [${callResponse}]`);

}

if (this.#callPromiseResolve[callId]) {

if (this.#log) {

console.log(`WebUI -> CMD -> Resolving Response #${callId}...`);

}

this.#callPromiseResolve[callId]?.(callResponse);

this.#callPromiseResolve[callId] = undefined;

}

}

break;

case this.#CMD_NAVIGATION:

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [URL]

const url: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);

if (this.#log) console.log(`WebUI -> CMD -> Navigation [${url}]`);

this.#close(this.#CMD_NAVIGATION, url);

break;

case this.#CMD_NEW_ID:

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [New Element]

const newElement: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);

if (this.#log) console.log(`WebUI -> CMD -> New Bind ID [${newElement}]`);

if (!this.#bindsList.includes(newElement)) this.#bindsList.push(newElement);

// Generate objects

this.#updateBindsList();

break;

case this.#CMD_CLOSE:

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

if (this.#log) {

// Debug Close

console.log(`WebUI -> CMD -> Close`);

if (this.#wsIsConnected()) {

this.#wsStayAlive = false;

this.#ws.close();

}

}

else {

// Release Close

globalThis.close();

}

break;

case this.#CMD_CHECK_TK:

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [Status]

// 5: [BindsList]

const status = (buffer8[this.#PROTOCOL_DATA] == 0 ? false : true);

const tokenHex = `0x${this.#token.toString(16).padStart(8, '0')}`;

if (status) {

if (this.#log) console.log(`WebUI -> CMD -> Token [${tokenHex}] Accepted`);

this.#TokenAccepted = true;

// Get binds list (CSV)

let csv: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA + 1);

csv = csv.endsWith(',') ? csv.slice(0, -1) : csv;

this.#bindsList = csv.split(',');

// Generate objects

this.#updateBindsList();

// User event callback

if (this.#eventsCallback) {

this.#eventsCallback(this.event.CONNECTED);

}

}

else {

if (this.#log) console.log(`WebUI -> CMD -> Token [${tokenHex}] Not Accepted. Reload page...`);

// Refresh the page to get a new token

this.#allowNavigation = true;

this.#wsStayAlive = false;

globalThis.location.reload();

}

break;

}

} else {

// Raw-binary based commands

switch (buffer8[this.#PROTOCOL_CMD]) {

case this.#CMD_SEND_RAW:

// Protocol

// 0: [SIGNATURE]

// 1: [TOKEN]

// 2: [ID]

// 3: [CMD]

// 4: [Function,Null,Raw Data]

// Get function name

const functionName: string = this.#getDataStrFromPacket(buffer8, this.#PROTOCOL_DATA);

// Get the raw data

const rawDataIndex: number = this.#PROTOCOL_DATA + functionName.length + 1;

const rawDataSize: number = (buffer8.length - rawDataIndex) - 1;

const userRawData = buffer8.subarray(rawDataIndex, (rawDataIndex + rawDataSize));

if (this.#log) console.log(`WebUI -> CMD -> Received Raw ${rawDataSize} bytes for [${functionName}()]`);

// Call the user function, and pass the raw data

if (typeof window[functionName] === 'function') window[functionName](userRawData);

else await AsyncFunction(functionName + '(userRawData)')();

break;

}

}

};

// -- Public APIs --------------------------

/**

* Call a backend function

*

* @param fn - binding name

* @param data - data to be send to the backend function

* @return - Response of the backend callback string

* @example - const res = await webui.call("myID", 123, true, "Hi", new Uint8Array([0x42, 0x43, 0x44]))

*/

async call(fn: string, ...args: DataTypes[]): Promise<DataTypes> {

if (!fn) return Promise.reject(new SyntaxError('No binding name is provided'));

if (!this.#wsIsConnected()) return Promise.reject(new Error('WebSocket is not connected'));

// Check binding list

if (!this.#AllEvents && !this.#bindsList.includes(`${fn}`))

return Promise.reject(new ReferenceError(`No binding was found for "${fn}"`));

// Call backend and wait for response

if (this.#log) console.log(`WebUI -> Calling [${fn}(...)]`);

const response = (await this.#callPromise(fn, ...args)) as string;

// WebUI lib accept `DataTypes` but return only string

if (typeof response !== 'string') return '';

return response;

}

/**

* Active or deactivate webui debug logging

*

* @param status - log status to set

*/

setLogging(status: boolean) {

if (status) {

console.log('WebUI -> Log Enabled.');

this.#log = true;

} else {

console.log('WebUI -> Log Disabled.');

this.#log = false;

}

}

/**

* Encode text into base64 string

*

* @param data - text string

*/

encode(data: string): string {

return btoa(data);

}

/**

* Decode base64 string into text

*

* @param data - base64 string

*/

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;

}

/**

* Check if UI is connected to the back-end. The connection

* is done by including `webui.js` virtual file in the HTML.

*

* @return - Boolean `true` if connected

*/

isConnected(): boolean {

return ((this.#wsIsConnected()) && (this.#TokenAccepted));

}

/**

* Get OS high contrast preference.

*

* @return - Boolean `True` if OS is using high contrast theme

*/

async isHighContrast(): Promise<boolean> {

// Call a core function and wait for response

const response = await this.callCore("high_contrast") as boolean;

if (this.#log) console.log(`Core Response: [${response}]`);

return response;

}