keep socket connection alive

5 files changed, 27 insertions, 11 deletions

diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 288a7928..2a6bf977 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -3,7 +3,6 @@
 	let pinCode = '';
 	let pinInput;
 
-	$: console.log(pinCode.length);
 	$: pinCode.length > 5 && ($pin = pinCode);
 </script>
 
diff --git a/src/lib/socket.js b/src/lib/socket.js
index b385db9d..1ed90f0b 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { invoices, newPayment, rate, user } from '$lib/store';
+import { invoices, newPayment, last, rate, user } from '$lib/store';
 import { success } from '$lib/utils';
 import { env } from '$env/dynamic/public';
 
@@ -16,6 +16,7 @@ export const send = (type, data) => {
 
 export const messages = (data) => ({
 	rate() {
+    last.set(Date.now());
 		rate.set(data);
 	},
 
@@ -46,16 +47,12 @@ let currentReconnectDelay = initialReconnectDelay;
 export function connect(t) {
 	token = t;
 
-	clearInterval(interval);
-
 	if (socket) return auth();
 
 	socket = new WebSocket(socketUrl);
 	socket.addEventListener('open', onWebsocketOpen);
 	socket.addEventListener('close', onWebsocketClose);
 	socket.addEventListener('message', onWebsocketMessage);
-
-	interval = setInterval(() => send('heartbeat'), 5000);
 }
 
 export function close() {
diff --git a/src/lib/store.js b/src/lib/store.js
index 3174a86c..52f2fe2a 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -43,3 +43,4 @@ export const tempProfileFiles = writable();
 export const avatarUpload = writable();
 export const bannerUpload = writable();
 export const pin = persistSession('pin', undefined, 5 * 60 * 1000);
+export const last = writable();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5cc75b30..1cdf2a69 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,9 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
-	import { onMount } from 'svelte';
-	import { connect } from '$lib/socket';
-	import { selectedRate, rate, user } from '$lib/store';
+	import { onDestroy, onMount } from 'svelte';
+	import { connect, send } from '$lib/socket';
+	import { last, selectedRate, rate, user } from '$lib/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
@@ -33,13 +33,31 @@
 		locale.subscribe((lng) => {
 			if (lng) localStorage.setItem(localeLocalStorageKey, lng);
 		});
+
+		browser && count();
 	});
 
 	$: browser && connect(token);
+
+	let lost, timer;
+	let count = () => {
+    lost = (Date.now() - $last) > 10000
+		if (lost) connect(token);
+		send('heartbeat');
+		timer = setTimeout(count, 5000);
+	};
+
+	onDestroy(() => browser && clearTimeout(timer));
 </script>
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
+{#if lost}
+<div class="fixed bottom-12 right-12 text-red-600 bg-white z-50 px-4 py-2 rounded-full border">
+  Lost connection to server, try refreshing
+</div>
+{/if}
+
 <main data-sveltekit-prefetch>
 	<slot />
 </main>
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 7dd6d51c..16ec186e 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -1,7 +1,8 @@
 <script>
 	import { back, copy, f, get, reverseFormat, s, sats } from '$lib/utils';
+	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
-	import { invoices } from '$lib/store';
+	import { invoices, last } from '$lib/store';
 	import { Icon, Heart, Image, Qr, Tip } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
@@ -52,7 +53,7 @@
 	<button
 		class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
 		class:invisible={!user}
-  on:click={back}
+		on:click={back}
 	>
 		<Icon icon="arrow-left" style="w-10" />
 	</button>