Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Work on the Launder and Websockets. It needs work.

Browse Source
This commit is contained in:
Scott Idem
2025-10-13 15:41:55 -04:00
parent 5b9dacd291
commit de071dae49
4 changed files with 195 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/lib/element_websocket_v2.svelte
View File

@@ -1,28 +1,58 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
interface Props {
log_lvl?: number;
ws_connect?: boolean;
ws_connect_status?: null|string;
ws_server?: string;
base_url?: any;
group_id?: string;
client_id?: any;
cmd?: null|string;
msg?: null|string;
type?: null|string; // msg, cmd, json, hello, bye
trigger_send?: any;
classes?: string;
hide__ws_form?: boolean;
hide__ws_messages?: boolean;
hide__ws_commands?: boolean;
export let log_lvl: number = 0;
export let ws_connect: boolean = false;
export let ws_connect_status: null|string = null;
export let ws_server = 'dev-api.oneskyit.com';
export let base_url = `wss://${ws_server}/ws`;
export let group_id = 'ae-grp-99';
export let client_id = Date.now();
ws_conn_status?: any;
ws_recv_status?: any;
ws_sent_status?: any;
}
let {
log_lvl = 0,
ws_connect = false,
ws_connect_status = $bindable(null),
ws_server = 'dev-api.oneskyit.com',
base_url = `wss://${ws_server}/ws`,
group_id = $bindable('ae-grp-99'),
client_id = Date.now(),
cmd = $bindable(null),
msg = $bindable(null),
type = null,
trigger_send = $bindable(null),
classes = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8',
hide__ws_form = $bindable(true),
hide__ws_messages = $bindable(false),
hide__ws_commands = $bindable(false),
ws_conn_status = $bindable(null),
ws_recv_status = $bindable(null),
ws_sent_status = $bindable(null)
}: Props = $props();
// import { run, preventDefault } from 'svelte/legacy';
// import { createEventDispatcher, onMount } from 'svelte';
export let cmd: null|string = null;
export let msg: null|string = null;
export let type: null|string = null; // msg, cmd, json, hello, bye
export let trigger_send: any = null;
export let classes: string = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8';
export let hide__ws_form: boolean = true;
export let hide__ws_messages: boolean = false;
export let hide__ws_commands: boolean = false;
// *** Set initial variables
const dispatch = createEventDispatcher();
// const dispatch = createEventDispatcher();
// JSON formatted data
let ws_data = {
let ws_data = $state({
'client_id': null, // The device or browser ID if available.
// 'src': null, // Sending client
// 'account_id': null, // Essentially the person ID or user ID if available.
@@ -34,20 +64,31 @@ let ws_data = {
'cmd': null, // Command string
// 'data': null,
// 'b64': null,
}
})
let ws_received_list_cmd: string[] = [];
let ws_received_list_other: any[] = [];
let ws_received_list_cmd: string[] = $state([]);
let ws_received_list_other: any[] = $state([]);
let ws_received_list_msg: string[] = [];
onMount(async () => {
console.log('** Component Mounted: ** Element Websocket v2');
});
// onMount(async () => {
// console.log('** Component Mounted: ** Element Websocket v2');
// });
// *** Functions and Logic
function ws_connect_group_id({group_id, client_id}) {
console.log(`${base_url}/group/${group_id}/client/${client_id}`);
if (!group_id) {
group_id = 'ae-grp-99';
console.log(`WS: No group_id specified! Setting to default: ${group_id}`);
return false;
}
if (!client_id) {
client_id = Date.now();
console.log(`WS: No client_id specified! Setting to current timestamp: ${client_id}`);
// return false;
}
console.log(`WS Connect URL: ${base_url}/group/${group_id}/client/${client_id}`);
let ws_connection = new WebSocket(`${base_url}/group/${group_id}/client/${client_id}`);
ws_connection.onopen = function() {
@@ -55,9 +96,10 @@ function ws_connect_group_id({group_id, client_id}) {
ws_connect_status = 'connected';
dispatch('ws_conn', {
'status': 'connected'
});
// dispatch('ws_conn', {
// 'status': 'connected'
// });
ws_conn_status = 'connected';
// ws_connection.send(JSON.stringify({
// client_id: client_id,
@@ -105,7 +147,18 @@ function ws_connect_group_id({group_id, client_id}) {
ws_received_list_other = ws_received_list_other; // trigger Svelte update -2024-10-04
}
dispatch('ws_recv', {
// dispatch('ws_recv', {
// // 'client_id': ws_data.client_id, // The device or browser ID if available.
// 'src': ws_recv_data.client_id, // The device or browser ID if available.
// // 'account_id': ws_recv_data.account_id, // Essentially the person ID or user ID if available.
// 'dest': group_id, // Destination client
// 'target': ws_recv_data.target, // echo, dm (direct), grp (group), all (broadcast)
// 'type': ws_recv_data.type, // Message type (msg, cmd, json, hello, bye)
// // 'grp': ws_recv_data.grp, // Destination group
// 'msg': ws_recv_data.msg, // Message string
// 'cmd': ws_recv_data.cmd, // Command string
// });
ws_recv_status = {
// 'client_id': ws_data.client_id, // The device or browser ID if available.
'src': ws_recv_data.client_id, // The device or browser ID if available.
// 'account_id': ws_recv_data.account_id, // Essentially the person ID or user ID if available.
@@ -115,7 +168,7 @@ function ws_connect_group_id({group_id, client_id}) {
// 'grp': ws_recv_data.grp, // Destination group
'msg': ws_recv_data.msg, // Message string
'cmd': ws_recv_data.cmd, // Command string
});
};
};
@@ -142,9 +195,10 @@ function ws_connect_group_id({group_id, client_id}) {
ws_received_list_other.unshift(fake_ws_recv_data);
ws_received_list_other = ws_received_list_other; // trigger Svelte update -2024-10-04
dispatch('ws_conn', {
'status': 'disconnected'
});
// dispatch('ws_conn', {
// 'status': 'disconnected'
// });
ws_conn_status = 'disconnected';
if (ws_connect) {
setTimeout(function() {
@@ -179,23 +233,8 @@ function ws_connect_group_id({group_id, client_id}) {
}
// Start the WS function
let ws_group: any = null;
$: if (ws_connect && group_id) {
ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
} else {
ws_group?.close();
}
let ws_group: any = $state(null);
$: if (trigger_send && cmd) {
trigger_send = null;
console.log('WS: Send triggered!');
console.log(cmd);
ws_data.target = 'group';
ws_data.type = 'cmd';
ws_data.cmd = cmd;
handle_send_ws_data();
cmd = '';
}
function handle_send_ws_data() {
console.log(ws_data);
@@ -208,9 +247,21 @@ function handle_send_ws_data() {
}
let ws_data_json_str = JSON.stringify(ws_data);
let resp = ws_group.send(ws_data_json_str);
console.log(resp);
console.log(`WS: Send data response:`, resp);
dispatch('ws_sent', {
// dispatch('ws_sent', {
// // 'client_id': ws_data.client_id, // The device or browser ID if available.
// 'src': ws_data.client_id, // The device or browser ID if available.
// // 'account_id': ws_data.account_id, // Essentially the person ID or user ID if available.
// 'dest': group_id, // Destination client
// 'group_id': group_id,
// 'target': ws_data.target, // echo, dm (direct), grp (group), all (broadcast)
// 'type': ws_data.type, // Message type (msg, cmd, json, hello, bye)
// // 'grp': ws_data.grp, // Destination group
// 'msg': ws_data.msg, // Message string
// 'cmd': ws_data.cmd, // Command string
// });
ws_sent_status = {
// 'client_id': ws_data.client_id, // The device or browser ID if available.
'src': ws_data.client_id, // The device or browser ID if available.
// 'account_id': ws_data.account_id, // Essentially the person ID or user ID if available.
@@ -221,12 +272,41 @@ function handle_send_ws_data() {
// 'grp': ws_data.grp, // Destination group
'msg': ws_data.msg, // Message string
'cmd': ws_data.cmd, // Command string
});
};
cmd = '';
msg = '';
}
$effect(() => {
if (ws_connect && group_id) {
ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
} else {
ws_group?.close();
}
});
$effect(() => {
if (trigger_send && cmd) {
trigger_send = null;
console.log('WS: Send triggered!');
console.log(cmd);
ws_data.target = 'group';
ws_data.type = 'cmd';
ws_data.cmd = cmd;
handle_send_ws_data();
cmd = '';
}
});
function preventDefault(fn) {
return function (event) {
event.preventDefault();
fn.call(this, event);
};
}
</script>
@@ -235,7 +315,7 @@ function handle_send_ws_data() {
<span class="absolute top-0 right-0 flex flex-col gap-1">
<button
type="button"
on:click={() => {
onclick={() => {
hide__ws_form = !hide__ws_form;
}}
class="btn btn-sm text-xs hover:preset-filled-tertiary-500"
@@ -250,7 +330,7 @@ function handle_send_ws_data() {
</button>
<button
type="button"
on:click={() => {
onclick={() => {
hide__ws_messages = !hide__ws_messages;
}}
class="btn btn-sm text-xs hover:preset-filled-tertiary-500"
@@ -265,7 +345,7 @@ function handle_send_ws_data() {
</button>
<button
type="button"
on:click={() => {
onclick={() => {
hide__ws_commands = !hide__ws_commands;
}}
class="btn btn-sm text-xs hover:preset-filled-tertiary-500"
@@ -311,7 +391,7 @@ function handle_send_ws_data() {
{#if !hide__ws_form}
<form
on:submit|preventDefault={handle_send_ws_data}
onsubmit={preventDefault(handle_send_ws_data)}
>
<select
bind:value={ws_data.type}