From 6d02123bd8a2ffb0cb67f15ee8e8bf2397e6362b Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 31 Oct 2022 11:14:26 -0700
Subject: keep socket connection alive

---
 src/routes/+layout.svelte            | 24 +++++++++++++++++++++---
 src/routes/invoice/[id]/+page.svelte |  5 +++--
 2 files changed, 24 insertions(+), 5 deletions(-)

(limited to 'src/routes')

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>
-- 
cgit v1.2.3