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}

77
src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
View File

@@ -308,12 +308,18 @@ let ae_promises: key_val = {
slct_event_presentation_li: null
};
let trigger_handle_ws_conn = $state(false);
let trigger_handle_ws_recv = $state(false);
let trigger_handle_ws_sent = $state(false);
/* *** BEGIN *** Handle WebSocket events */
function handle_ws_conn(event) {
console.log('*** handle_ws_conn() ***');
console.log(event);
if (event.detail.status == 'connected') {
function handle_ws_conn(ws_conn_status: any) {
log_lvl = 1;
if (log_lvl) {
console.log('*** handle_ws_conn() ***', ws_conn_status);
}
if (ws_conn_status.status == 'connected') {
$events_sess.launcher.ws = {}; // Reset WS related values on a new connection.
$events_sess.launcher.ws.status = 'connected';
} else {
@@ -326,13 +332,14 @@ function handle_ws_conn(event) {
// This client received a WebSocket message.
// When this is called something seems to go wrong. It creates a loop when connected.
function handle_ws_recv(event) {
function handle_ws_recv(ws_recv_status: any) {
log_lvl = 1;
if (log_lvl) {
console.log('*** handle_ws_recv() ***', event);
console.log('*** handle_ws_recv() ***', ws_recv_status);
}
if (event.detail.type == 'cmd' && event.detail.cmd) {
let cmd = event.detail.cmd;
if (ws_recv_status.type == 'cmd' && ws_recv_status.cmd) {
let cmd = ws_recv_status.cmd;
// console.log(cmd);
if ($events_loc.launcher.controller != 'remote') {
@@ -500,11 +507,10 @@ function handle_ws_recv(event) {
// This client sent a WebSocket message.
function handle_ws_sent(event) {
console.log('*** handle_ws_sent() ***');
console.log(event);
let command = event.detail.cmd;
console.log(command);
function handle_ws_sent(ws_sent_status: any) {
console.log('*** handle_ws_sent() ***', ws_sent_status);
let command = ws_sent_status.cmd;
console.log(`CMD: ${command}`);
$events_sess.launcher.controller_cmd = null;
$events_sess.launcher.controller_trigger_send = null;
@@ -527,6 +533,30 @@ $effect(() => {
}
});
$effect(() => {
if (trigger_handle_ws_conn) {
let ws_conn_status = trigger_handle_ws_conn; // This a string status
trigger_handle_ws_conn = false;
handle_ws_conn(ws_conn_status);
}
});
$effect(() => {
if (trigger_handle_ws_recv) {
let ws_recv_status = trigger_handle_ws_recv; // This should be a key value object.
trigger_handle_ws_recv = false;
handle_ws_recv(ws_recv_status);
}
});
$effect(() => {
if (trigger_handle_ws_sent) {
let ws_sent_status = trigger_handle_ws_sent; // This should be a key value object.
trigger_handle_ws_sent = false;
handle_ws_sent(ws_sent_status);
}
});
async function handle_event_file_open () {
let event_file_obj;
if ($events_slct.event_file_obj && $events_slct.event_file_obj.event_file_id_random) {
@@ -1064,7 +1094,7 @@ $effect(() => {
<!-- Main modal -->
<!-- NOTE: The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. -->
<Modal
title="{$events_sess.launcher?.modal__title}"
title={$events_sess.launcher?.modal__title}
bind:open={$events_sess.launcher.modal__open}
autoclose={false}
size=""
@@ -1110,13 +1140,22 @@ $effect(() => {
<span class="fas fa-times m-1"></span>
Close Remote Poster Display Only
</button>
Open: {$ae_api.base_url} {$events_sess.launcher.modal__open}
<!-- /event/file/{$events_slct.event_file_obj.event_file_id_random}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download -->
<!-- <span class="aspect-9/16 max-h-96"> -->
{#if $events_sess.launcher.modal__open}
<img
src="{$ae_api.base_url}/event/file/{$events_sess.launcher.modal__open}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download"
alt="Placeholder"
alt="Placeholder: /event/file/{$events_sess.launcher.modal__open}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download"
class="margin-auto max-h-full max-w-full"
/>
{:else}
<div class="flex flex-row items-center justify-center p-4">
<span class="fas fa-info-circle mx-1"></span>
<span>No image selected</span>
</div>
{/if}
<!-- </span> -->
<button
@@ -1183,9 +1222,9 @@ $effect(() => {
bind:hide__ws_messages={$events_loc.launcher.hide__ws_messages}
bind:hide__ws_commands={$events_loc.launcher.hide__ws_commands}
on:ws_conn={handle_ws_conn}
on:ws_recv={handle_ws_recv}
on:ws_sent={handle_ws_sent}
bind:ws_conn_status={trigger_handle_ws_conn}
bind:ws_recv_status={trigger_handle_ws_recv}
bind:ws_sent_status={trigger_handle_ws_sent}
/>
<!-- on:ws_recv={handle_ws_recv} -->

1
src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
View File

@@ -8,7 +8,6 @@ let { log_lvl = 0 }: Props = $props();
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger, time } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig } from '$lib/ae_events_stores';
// import Element_websocket_v2 from '$lib/element_websocket_v2.svelte';
</script>

2
src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
View File

@@ -365,7 +365,7 @@ async function handle_open_file() {
>
{#if (screen_saver_exts.includes(event_file_obj.extension))}
<span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span>
Open Poster
Open Poster {event_file_obj.event_file_id}
{:else}
<span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span>
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}