[WIFI-10931] Fixed using ws websockets when using http GW endpoint

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.7.0(8)",
+  "version": "2.7.0(9)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.7.0(8)",
+      "version": "2.7.0(9)",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.7.0(8)",
+  "version": "2.7.0(9)",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",

src/components/DeviceSearchBar/index.js

@@ -25,7 +25,11 @@ const DeviceSearchBar = ({ action }) => {
         }
       } else if (socket.readyState !== WebSocket.CONNECTING && endpoints?.owgw !== undefined) {
         setWaitingSearch(value);
-        setSocket(new WebSocket(`${endpoints.owgw.replace('https', 'wss')}/api/v1/ws`));
+        setSocket(
+          new WebSocket(
+            `${endpoints.owgw.replace('https', 'wss').replace('http', 'ws')}/api/v1/ws`,
+          ),
+        );
       } else {
         setWaitingSearch(value);
       }
@@ -61,7 +65,9 @@ const DeviceSearchBar = ({ action }) => {
 
   useEffect(() => {
     if (socket === null && endpoints?.owgw !== undefined) {
-      setSocket(new WebSocket(`${endpoints.owgw.replace('https', 'wss')}/api/v1/ws`));
+      setSocket(
+        new WebSocket(`${endpoints.owgw.replace('https', 'wss').replace('http', 'ws')}/api/v1/ws`),
+      );
     }
   }, []);
 

src/contexts/WebSocketProvider/index.js

@@ -39,19 +39,25 @@ export const WebSocketProvider = ({ children, setNewConnectionData }) => {
     }
   }, []);
 
-  const onStartWebSocket = () => {
-    ws.current = new WebSocket(`${endpoints.owgw?.replace('https', 'wss')}/api/v1/ws`);
-    ws.current.onopen = () => {
-      setIsOpen(true);
-      ws.current?.send(`token:${currentToken}`);
-    };
-    ws.current.onclose = () => {
-      setIsOpen(false);
-      setTimeout(onStartWebSocket, 3000);
-    };
-    ws.current.onerror = () => {
-      setIsOpen(false);
-    };
+  const onStartWebSocket = (tries = 0) => {
+    const newTries = tries + 1;
+    if (tries <= 10) {
+      ws.current = new WebSocket(
+        `${endpoints.owgw?.replace('https', 'wss').replace('http', 'ws')}/api/v1/ws`,
+      );
+      ws.current.onopen = () => {
+        setIsOpen(true);
+        ws.current?.send(`token:${currentToken}`);
+      };
+      ws.current.onclose = () => {
+        setIsOpen(false);
+        setTimeout(() => onStartWebSocket(newTries), 3000);
+      };
+      ws.current.onerror = () => {
+        setIsOpen(false);
+        setTimeout(() => onStartWebSocket(newTries), 3000);
+      };
+    }
   };
 
   // useEffect for created the WebSocket and 'storing' it in useRef
@@ -75,6 +81,33 @@ export const WebSocketProvider = ({ children, setNewConnectionData }) => {
     };
   }, [ws?.current]);
 
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      let timeoutId;
+
+      if (ws?.current) {
+        if (document.visibilityState === 'hidden') {
+          timeoutId = setTimeout(() => {
+            ws.current.onclose = () => {};
+            ws.current?.close();
+            setIsOpen(false);
+          }, 5000);
+        } else {
+          clearTimeout(timeoutId);
+
+          if (!isOpen && endpoints?.owgw !== undefined) {
+            onStartWebSocket();
+          }
+        }
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [ws?.current, isOpen]);
+
   const values = useMemo(
     () => ({
       lastMessage,