Merge pull request #34 from runeharlyk/main

Make eventSource use timeout for reconnect

interface/src/routes/+layout.svelte

@@ -17,17 +17,14 @@
 
 	export let data: LayoutData;
 
-	onMount(() => {
+	onMount(async () => {
 		if ($user.bearer_token !== '') {
-			validateUser($user);
+			await validateUser($user);
 		}
-		menuOpen = false;
 		connectToEventSource();
 	});
 
-	onDestroy(() => {
-		NotificationSource?.close();
-	});
+	onDestroy(() => disconnectEventSource());
 
 	async function validateUser(userdata: userProfile) {
 		try {
@@ -44,128 +41,74 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-		return;
 	}
 
 	let menuOpen = false;
 
-	let NotificationSource: EventSource;
-	let reconnectIntervalId: number = 0;
-	let connectionLost = false;
-	let unresponsiveTimeout: number;
+	let eventSourceUrl = '/events';
+	let eventSource: EventSource;
+	let unresponsiveTimeoutId: number;
 
 	function connectToEventSource() {
-		NotificationSource = new EventSource('/events');
-		console.log('Attempting SSE connection.');
-
-		NotificationSource.addEventListener('open', () => {
-			clearInterval(reconnectIntervalId);
-			reconnectIntervalId = 0;
-			connectionLost = false;
-			console.log('SSE connection established');
+		eventSource = new EventSource(eventSourceUrl);
+
+		eventSource.addEventListener('open', () => {
 			notifications.success('Connection to device established', 5000);
 			telemetry.setRSSI('found'); // Update store and flag as server being available again
 		});
 
-		NotificationSource.addEventListener(
-			'rssi',
-			(event) => {
-				telemetry.setRSSI(event.data);
-				// Reset a timer to detect unresponsiveness
-				clearTimeout(unresponsiveTimeout);
-
-				unresponsiveTimeout = setTimeout(() => {
-					console.log('Server is unresponsive');
-					reconnectEventSource();
-				}, 2000); // Detect unresponsiveness after 2 seconds
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'error',
-			(event) => {
-				reconnectEventSource();
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'close',
-			(event) => {
-				reconnectEventSource();
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'infoToast',
-			(event) => {
-				notifications.info(event.data, 5000);
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'successToast',
-			(event) => {
-				notifications.success(event.data, 5000);
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'warningToast',
-			(event) => {
-				notifications.warning(event.data, 5000);
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'errorToast',
-			(event) => {
-				notifications.error(event.data, 5000);
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'battery',
-			(event) => {
-				telemetry.setBattery(event.data);
-			},
-			false
-		);
-
-		NotificationSource.addEventListener(
-			'download_ota',
-			(event) => {
-				telemetry.setDownloadOTA(event.data);
-			},
-			false
-		);
-		NotificationSource.addEventListener(
-			'analytics',
-			(event) => {
-				analytics.addData(event.data);
-			},
-			false
-		);
+		eventSource.addEventListener('rssi', (event) => {
+			telemetry.setRSSI(event.data);
+			resetUnresponsiveCheck();
+		});
+
+		eventSource.addEventListener('error', (event) => {
+			reconnectEventSource();
+		});
+
+		eventSource.addEventListener('infoToast', (event) => {
+			notifications.info(event.data, 5000);
+		});
+
+		eventSource.addEventListener('successToast', (event) => {
+			notifications.success(event.data, 5000);
+		});
+
+		eventSource.addEventListener('warningToast', (event) => {
+			notifications.warning(event.data, 5000);
+		});
+
+		eventSource.addEventListener('errorToast', (event) => {
+			notifications.error(event.data, 5000);
+		});
+
+		eventSource.addEventListener('battery', (event) => {
+			telemetry.setBattery(event.data);
+		});
+
+		eventSource.addEventListener('download_ota', (event) => {
+			telemetry.setDownloadOTA(event.data);
+		});
+		eventSource.addEventListener('analytics', (event) => {
+			analytics.addData(event.data);
+		});
+	}
+
+	function disconnectEventSource() {
+		clearTimeout(unresponsiveTimeoutId);
+		eventSource?.close();
 	}
 
 	function reconnectEventSource() {
-		if (connectionLost === false) {
-			NotificationSource.close();
-			notifications.error('Connection to device lost', 5000);
-			if (reconnectIntervalId === 0) {
-				reconnectIntervalId = setInterval(connectToEventSource, 2000);
-				console.log('SSE reconnect Timer ID: ' + reconnectIntervalId);
-			}
-		}
-		connectionLost = true;
+		notifications.error('Connection to device lost', 5000);
+		disconnectEventSource();
+		connectToEventSource();
 	}
 
+	function resetUnresponsiveCheck() {
+		clearTimeout(unresponsiveTimeoutId);
+		unresponsiveTimeoutId = setTimeout(() => reconnectEventSource(), 2000);
+	}
 </script>
 
 <svelte:head>