Socket issue

modern/src/SocketController.js

@@ -2,7 +2,10 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector, connect } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { Snackbar } from '@mui/material';
-import { devicesActions, sessionActions } from './store';
+import {
+  devicesActions,
+  sessionActions,
+} from './store';
 import { useEffectAsync } from './reactHelper';
 import { useTranslation } from './common/components/LocalizationProvider';
 import { snackBarDurationLongMs } from './common/util/duration';
@@ -26,11 +29,19 @@ const SocketController = () => {
   const [events, setEvents] = useState([]);
   const [notifications, setNotifications] = useState([]);
 
+  const [timeKeepAlive, setTimeKeepAlive] = useState();
+
   const soundEvents = useAttributePreference('soundEvents', '');
   const soundAlarms = useAttributePreference('soundAlarms', 'sos');
 
   const features = useFeatures();
 
+  const resetCounterKeepAlive = () => {
+    setTimeKeepAlive(new Date());
+  };
+
+  const isConnected = () => Math.abs(new Date() - timeKeepAlive) < 10000;
+
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/api/socket`);
@@ -44,11 +55,10 @@ const SocketController = () => {
       dispatch(sessionActions.updateSocket(false));
       if (event.code !== logoutCode) {
         try {
-          const devicesResponse = await fetch('/api/devices');
+          const [devicesResponse, positionsResponse] = await Promise.all([fetch('/api/devices'), fetch('/api/positions')]);
           if (devicesResponse.ok) {
             dispatch(devicesActions.update(await devicesResponse.json()));
           }
-          const positionsResponse = await fetch('/api/positions');
           if (positionsResponse.ok) {
             dispatch(sessionActions.updatePositions(await positionsResponse.json()));
           }
@@ -58,7 +68,7 @@ const SocketController = () => {
         } catch (error) {
           // ignore errors
         }
-        setTimeout(() => connectSocket(), 60000);
+        setTimeout(connectSocket, 10000);
       }
     };
 
@@ -76,9 +86,39 @@ const SocketController = () => {
         }
         setEvents(data.events);
       }
+      if (data) {
+        resetCounterKeepAlive();
+      }
     };
   };
 
+  const keepAlive = async () => {
+    if (!isConnected) {
+      const socket = socketRef.current;
+      if (socket) {
+        socket.close(logoutCode);
+      }
+      try {
+        const [devicesResponse, positionsResponse] = await Promise.all([fetch('/api/devices'), fetch('/api/positions')]);
+        if (devicesResponse.ok) {
+          dispatch(devicesActions.update(await devicesResponse.json()));
+        }
+        if (positionsResponse.ok) {
+          dispatch(sessionActions.updatePositions(await positionsResponse.json()));
+        }
+        connectSocket();
+      } catch (error) {
+        // ignore errors
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (authenticated) {
+      setTimeout(keepAlive, 3000);
+    }
+  }, [timeKeepAlive]);
+
   useEffectAsync(async () => {
     if (authenticated) {
       const response = await fetch('/api/devices');
@@ -87,6 +127,7 @@ const SocketController = () => {
       } else {
         throw Error(await response.text());
       }
+      resetCounterKeepAlive();
       connectSocket();
       return () => {
         const socket = socketRef.current;
@@ -123,6 +164,11 @@ const SocketController = () => {
           message={notification.message}
           autoHideDuration={snackBarDurationLongMs}
           onClose={() => setEvents(events.filter((e) => e.id !== notification.id))}
+          ContentProps={{
+            sx: {
+              background: 'red',
+            },
+          }}
         />
       ))}
     </>