From 72594ef9bef075a54ef0de35d5533f6f5cd584fa Mon Sep 17 00:00:00 2001 From: kiosion Date: Tue, 5 Mar 2024 12:48:06 -0500 Subject: [PATCH] fix: Remove WS EVLs on Socket Close --- .../components/experiments/mag-cursor.svelte | 12 --- .../src/components/experiments/toru.svelte | 59 +++++++----- svelte-app/src/components/experiments/toru.ts | 96 +++++++++++++------ svelte-app/src/lib/consts.ts | 2 + .../[[lang=lang]]/experiments/+page.svelte | 2 +- .../routes/[[lang=lang]]/experiments/+page.ts | 31 +++--- svelte-app/types/app/index.ts | 23 ----- 7 files changed, 122 insertions(+), 103 deletions(-) diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte index 43604ae1c..b3a7b4fb4 100644 --- a/svelte-app/src/components/experiments/mag-cursor.svelte +++ b/svelte-app/src/components/experiments/mag-cursor.svelte @@ -1,8 +1,4 @@ (containerRect = container?.getBoundingClientRect())} /> diff --git a/svelte-app/src/components/experiments/toru.svelte b/svelte-app/src/components/experiments/toru.svelte index 0864d6792..e2d3492cb 100644 --- a/svelte-app/src/components/experiments/toru.svelte +++ b/svelte-app/src/components/experiments/toru.svelte @@ -11,33 +11,42 @@ import type { ToruData } from '$components/experiments/toru'; - export let initData: ToruData | undefined; + export let initPromise: Promise; - onMount(() => initSync((res) => (initData = res))); + let data: ToruData | undefined; + + const onUpdate = (res: ToruData) => (data = res); + + onMount(() => + initPromise.then((res) => { + data = res; + initSync(onUpdate); + }) + ); beforeNavigate((navigation) => { if (navigation.to !== navigation.from) { - stopSync(); + stopSync(onUpdate); } }); - onDestroy(() => stopSync()); + onDestroy(() => stopSync(onUpdate)); - +
{ - if (initData?.url) { - window.open(initData.url, '_blank'); + if (data?.url) { + window.open(data.url, '_blank'); } }} on:keyup={(e) => { - if (e.key === 'Enter' && initData?.url) { - window.open(initData.url, '_blank'); + if (e.key === 'Enter' && data?.url) { + window.open(data.url, '_blank'); } }} > @@ -53,14 +62,14 @@
- {#if initData} + {#if data}
Album art for the currently playing track - {#if initData.playing} + {#if data.playing}
@@ -84,22 +93,22 @@ >

- {initData.title ?? 'Unknown title'} + {data.title ?? 'Unknown title'}

- {initData.artist ?? ''} - {initData.artist && initData.album ? '—' : ''} - {initData.album ?? ''} + {data.artist ?? ''} + {data.artist && data.album ? '—' : ''} + {data.album ?? ''}

Artist art for the currently playing track @@ -107,9 +116,9 @@ class="absolute bottom-0 left-0 right-0 top-0 -z-20 h-[150%] w-[150%] bg-light blur-xl transition-colors dark:bg-dark" /> {:else} -
+
@@ -154,10 +163,10 @@ class:opacity-20={hovered} class:dark:opacity-15={hovered} > - {#if initData} + {#if data} {:else} diff --git a/svelte-app/src/components/experiments/toru.ts b/svelte-app/src/components/experiments/toru.ts index fe3815cbd..decb859bc 100644 --- a/svelte-app/src/components/experiments/toru.ts +++ b/svelte-app/src/components/experiments/toru.ts @@ -20,27 +20,28 @@ let socketInstance: WebSocket | undefined, const interval = 36_000; -export const initSync = (onUpdate: (data: ToruData) => void) => { - if (!browser || (socketInstance && socketInstance.readyState === WebSocket.OPEN)) { - return; - } - - clearInterval(repeat); +const onOpen = () => { + Logger.info('[ToruSync] Connected'); + retries = 0; +}; - socketInstance = new WebSocket('wss://toru.kio.dev/api/v1/ws/kiosion?cover_size=large'); +const onClose = () => { + Logger.info('[ToruSync] Disconnected'); + stop(); +}; - socketInstance.addEventListener('open', () => { - Logger.info('[ToruSync] Connected'); - retries = 0; - }); +const onError = (e: Event) => { + Logger.error('[ToruSync] Error', e); +}; - socketInstance.addEventListener('message', (event: MessageEvent) => { - if (!event.data || event.data === 'pong') { +const onMessage = + (onUpdate: (data: ToruData) => void) => (e: MessageEvent) => { + if (!e.data || e.data === 'pong') { return; } try { - const res = JSON.parse(event.data as string) as ToruData; + const res = JSON.parse(e.data as string) as ToruData; Logger.info('[ToruSync] Received frame'); @@ -50,26 +51,54 @@ export const initSync = (onUpdate: (data: ToruData) => void) => { } catch (e) { Logger.error('[ToruSync] Error parsing', e); } - }); + }; - socketInstance.addEventListener('error', (e) => { - Logger.error('[ToruSync] Error', e); - }); +export const initSync = (onUpdate: (data: ToruData) => void) => { + if (!browser || (socketInstance && socketInstance.readyState === WebSocket.OPEN)) { + return; + } + + clearInterval(repeat); + + socketInstance = new WebSocket('wss://toru.kio.dev/api/v1/ws/kiosion?cover_size=large'); + + // socketInstance.addEventListener('open', () => { + // Logger.info('[ToruSync] Connected'); + // retries = 0; + // }); - socketInstance.addEventListener('close', () => { - Logger.info('[ToruSync] Disconnected'); + // socketInstance.addEventListener('message', (event: MessageEvent) => { + // if (!event.data || event.data === 'pong') { + // return; + // } - stop(); + // try { + // const res = JSON.parse(event.data as string) as ToruData; - // TODO: Don't run when the socket is closed intentionally - // if (retries < 5) { - // retries++; - // clearTimeout(retry); - // retry = setTimeout(() => { - // initSync(onUpdate); - // }, retries * 1000); - // } - }); + // Logger.info('[ToruSync] Received frame'); + + // if (res.title || res.album || res.artist) { + // onUpdate(res); + // } + // } catch (e) { + // Logger.error('[ToruSync] Error parsing', e); + // } + // }); + + // socketInstance.addEventListener('error', (e) => { + // Logger.error('[ToruSync] Error', e); + // }); + + // socketInstance.addEventListener('close', () => { + // Logger.info('[ToruSync] Disconnected'); + + // stop(); + // }); + + socketInstance.addEventListener('open', onOpen); + socketInstance.addEventListener('message', onMessage(onUpdate)); + socketInstance.addEventListener('error', onError); + socketInstance.addEventListener('close', onClose); repeat = setInterval(() => { if (socketInstance && socketInstance.readyState === WebSocket.OPEN) { @@ -78,7 +107,7 @@ export const initSync = (onUpdate: (data: ToruData) => void) => { }, interval); }; -export const stopSync = () => { +export const stopSync = (onUpdate: (data: ToruData) => void) => { if (!browser || !socketInstance) { return; } @@ -89,5 +118,10 @@ export const stopSync = () => { socketInstance.close(); } + socketInstance.removeEventListener('open', onOpen); + socketInstance.removeEventListener('message', onMessage(onUpdate)); + socketInstance.removeEventListener('error', onError); + socketInstance.removeEventListener('close', onClose); + socketInstance = undefined; }; diff --git a/svelte-app/src/lib/consts.ts b/svelte-app/src/lib/consts.ts index d87d07f80..14d32b31a 100644 --- a/svelte-app/src/lib/consts.ts +++ b/svelte-app/src/lib/consts.ts @@ -18,6 +18,8 @@ export const LOCAL_SETTINGS_KEY = 'kio-dev-settings'; export const BASE_PAGE_TITLE = 'kio.dev'; +export const TORU_API_URL = 'https://toru.kio.dev/api/v1'; + interface AppRoute { name: string; path: string; diff --git a/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte index 3482658a1..9f6ca33ff 100644 --- a/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte @@ -27,7 +27,7 @@ - + diff --git a/svelte-app/src/routes/[[lang=lang]]/experiments/+page.ts b/svelte-app/src/routes/[[lang=lang]]/experiments/+page.ts index 7050d5431..53dc5a2ee 100644 --- a/svelte-app/src/routes/[[lang=lang]]/experiments/+page.ts +++ b/svelte-app/src/routes/[[lang=lang]]/experiments/+page.ts @@ -1,19 +1,28 @@ +import { TORU_API_URL } from '$lib/consts'; +import Logger from '$lib/logger'; + import type { PageLoad } from './$types'; import type { ToruData } from '$components/experiments/toru'; -export const load = (async ({ fetch }) => { - let nowPlayingData: ToruData | undefined = undefined; +export const load = (({ fetch }) => { + const nowPlayingData = fetch(`${TORU_API_URL}/kiosion?res=json&cover_size=medium`) + .then((res) => { + if (!res.ok) { + throw new Error('Failed to fetch now playing data'); + } - try { - const toruRes = await fetch( - 'https://toru.kio.dev/api/v1/kiosion?res=json&cover_size=large' - ); + return res + .json() + .then((data) => data.data) + .catch((e) => { + throw new Error('Failed to parse now playing data', e); + }); + }) + .catch((e) => { + Logger.error(e); - if (toruRes.ok) { - nowPlayingData = await toruRes.json().then((data) => data.data); - } - // eslint-disable-next-line no-empty - } catch {} + return undefined; + }) satisfies Promise; return { fetch, nowPlayingData }; }) satisfies PageLoad; diff --git a/svelte-app/types/app/index.ts b/svelte-app/types/app/index.ts index 69855c055..f888b9deb 100644 --- a/svelte-app/types/app/index.ts +++ b/svelte-app/types/app/index.ts @@ -23,31 +23,8 @@ declare global { } } -export interface MenuStateOpt { - disabled?: boolean; - icon?: string; - text?: string; - action?: () => void | Promise | undefined; -} - -export interface MenuState { - open: boolean; - pos: { - x: number; - y: number; - }; - target: HTMLElement; - opts: MenuStateOpt[]; -} - -// Some internal Sveltekit types export type RouteFetch = (info: RequestInfo, init?: RequestInit) => Promise; -export type Subscriber = (value: T) => void; -export type Unsubscriber = () => void; -export type Updater = (value: T) => T; -export type Invalidator = (value?: T) => void; - // Re-exports export * from '$types/api'; export * from '$types/config';