Replace eventSource reconnect interval with timeout

app2/src/routes/+layout.svelte

@@ -24,7 +24,7 @@
 
 	onMount(async () => {
 		if ($user.bearer_token !== '') {
-			validateUser($user);
+			await validateUser($user);
 		}
 		connectToEventSource();
         connectToSocket()
@@ -68,7 +68,7 @@
 	}
 
 	onDestroy(() => {
-		NotificationSource?.close();
+		disconnectEventSource();
         socket?.close();
 	});
 
@@ -87,137 +87,75 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-		return;
 	}
 
 	let menuOpen = false;
     let throttle = new throttler();
 
-	let NotificationSource: EventSource;
     let socket: WebSocket
-	let reconnectIntervalId: number = 0;
+	let eventSourceUrl = '/events';
-	let connectionLost = false;
+	let eventSource: EventSource;
-	let unresponsiveTimeout: number;
+	let unresponsiveTimeoutId: number;
 
 	function connectToEventSource() {
-		NotificationSource = new EventSource('/events');
+		eventSource = new EventSource(eventSourceUrl);
-		console.log('Attempting SSE connection.');
 
-		NotificationSource.addEventListener('open', () => {
+		eventSource.addEventListener('open', () => {
-			clearInterval(reconnectIntervalId);
-			reconnectIntervalId = 0;
-			connectionLost = false;
-			console.log('SSE connection established');
 			notifications.success('Connection to device established', 5000);
 			telemetry.setRSSI('found'); // Update store and flag as server being available again
 		});
 
-		NotificationSource.addEventListener(
+		eventSource.addEventListener('rssi', (event) => {
-			'rssi',
-			(event) => {
 			telemetry.setRSSI(event.data);
-				// Reset a timer to detect unresponsiveness
+			resetUnresponsiveCheck();
-				clearTimeout(unresponsiveTimeout);
+		});
 
-				unresponsiveTimeout = setTimeout(() => {
+		eventSource.addEventListener('error', (event) => {
-					console.log('Server is unresponsive');
 			reconnectEventSource();
-				}, 2000) as unknown as number; // Detect unresponsiveness after 2 seconds
+		});
-			},
-			false
-		);
 
-        NotificationSource.addEventListener(
+		eventSource.addEventListener('infoToast', (event) => {
-			'motion',
-			(event) => {
-                const data = JSON.parse(event.data);
-                servoAngles.set(data.angles);
-			},
-			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(
+		eventSource.addEventListener('successToast', (event) => {
-			'successToast',
-			(event) => {
 			notifications.success(event.data, 5000);
-			},
+		});
-			false
-		);
 
-		NotificationSource.addEventListener(
+		eventSource.addEventListener('warningToast', (event) => {
-			'warningToast',
-			(event) => {
 			notifications.warning(event.data, 5000);
-			},
+		});
-			false
-		);
 
-		NotificationSource.addEventListener(
+		eventSource.addEventListener('errorToast', (event) => {
-			'errorToast',
-			(event) => {
 			notifications.error(event.data, 5000);
-			},
+		});
-			false
-		);
 
-		NotificationSource.addEventListener(
+		eventSource.addEventListener('battery', (event) => {
-			'battery',
-			(event) => {
 			telemetry.setBattery(event.data);
-			},
+		});
-			false
-		);
 
-		NotificationSource.addEventListener(
+		eventSource.addEventListener('download_ota', (event) => {
-			'download_ota',
-			(event) => {
 			telemetry.setDownloadOTA(event.data);
-			},
+		});
-			false
+		eventSource.addEventListener('analytics', (event) => {
-		);
-		NotificationSource.addEventListener(
-			'analytics',
-			(event) => {
 			analytics.addData(event.data);
-			},
+		});
-			false
+	}
-		);
+
+	function disconnectEventSource() {
+		clearTimeout(unresponsiveTimeoutId);
+		eventSource?.close();
 	}
 
 	function reconnectEventSource() {
-		if (connectionLost === false) {
-			NotificationSource.close();
 		notifications.error('Connection to device lost', 5000);
-			if (reconnectIntervalId === 0) {
+		disconnectEventSource();
-				reconnectIntervalId = setInterval(connectToEventSource, 2000) as unknown as number;
+		connectToEventSource();
-				console.log('SSE reconnect Timer ID: ' + reconnectIntervalId);
 	}
-		}
+
-		connectionLost = true;
+	function resetUnresponsiveCheck() {
+		clearTimeout(unresponsiveTimeoutId);
+		unresponsiveTimeoutId = setTimeout(() => reconnectEventSource(), 2000);
 	}
 
 </script>