Socket io implementation

frontend/src/App.tsx

@@ -5,9 +5,12 @@ import { ImCross } from 'react-icons/im';
 import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
 import MainLayout from './components/MainLayout';
 import { PasswordSend, ServerStatusResponse } from './js/models';
-import { fireUpdateRequest, getstatus, login, setpassword } from './js/utils';
+import { errorNotify, fireUpdateRequest, getstatus, login, setpassword } from './js/utils';
 import HomePage from './pages/HomePage';
 import ServiceDetails from './pages/ServiceDetails';
+import io from 'socket.io-client';
+
+const socket = io({transports: ["websocket", "polling"], path:"/sock" });
 
 function App() {
 
@@ -29,11 +32,19 @@ function App() {
       })
   }
 
-  useEffect(getStatus,[])
-
   useEffect(()=>{
-      const updater = setInterval(fireUpdateRequest,2000)
-      return () => clearInterval(updater)     
+    getStatus()
+    socket.on("update", () => {
+      fireUpdateRequest()
+    })
+    socket.on("connect_error", (err) => {
+      errorNotify("Socket.Io connection failed! ",`Error message: [${err.message}]`)
+      getStatus()
+    });
+    return () => {
+      socket.off("update")
+      socket.off("connect_error")
+    }
   },[])
 
   const form = useForm({

frontend/src/components/AddNewRegex.tsx

@@ -2,7 +2,7 @@ import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Mo
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { RegexAddForm } from '../js/models';
-import { addregex, b64decode, b64encode, fireUpdateRequest, okNotify } from '../js/utils';
+import { addregex, b64decode, b64encode, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
 import FilterTypeSelector from './FilterTypeSelector';
 
@@ -58,7 +58,6 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
             if (!res){
                 setSubmitLoading(false)
                 close();
-                fireUpdateRequest();
                 okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_port} service`)
             }else if (res.toLowerCase() === "invalid regex"){
                 setSubmitLoading(false)

frontend/src/components/AddNewService.tsx

@@ -1,7 +1,7 @@
 import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
-import { addservice, fireUpdateRequest, okNotify, startservice } from '../js/utils';
+import { addservice, okNotify, startservice } from '../js/utils';
 import { ImCross } from "react-icons/im"
 
 type ServiceAddForm = {
@@ -39,7 +39,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             if (res.status === "ok"){
                 setSubmitLoading(false)
                 close();
-                fireUpdateRequest();
                 if (autostart) startservice(port)
                 okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
             }else{

frontend/src/components/RegexView/index.tsx

@@ -1,7 +1,7 @@
 import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { RegexFilter } from '../../js/models';
-import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, fireUpdateRequest, okNotify } from '../../js/utils';
+import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, okNotify } from '../../js/utils';
 import style from "./index.module.scss";
 import { BsTrashFill } from "react-icons/bs"
 import YesNoModal from '../YesNoModal';
@@ -25,7 +25,6 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
     deleteregex(regexInfo.id).then(res => {
       if(!res){
         okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
-        fireUpdateRequest()
       }else{
         errorNotify(`Regex ${regex_expr} deleation failed!`,`Error: ${res}`)
       }
@@ -37,7 +36,6 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
     (regexInfo.active?deactivateregex:activateregex)(regexInfo.id).then(res => {
       if(!res){
         okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been ${regexInfo.active?"deactivated":"activated"}!`)
-        fireUpdateRequest()
       }else{
         errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
       }

frontend/src/components/ServiceRow/RenameForm.tsx

@@ -1,7 +1,7 @@
 import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { fireUpdateRequest, okNotify, renameservice } from '../../js/utils';
+import { okNotify, renameservice } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { Service } from '../../js/models';
 
@@ -29,7 +29,6 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
             if (!res){
                 setSubmitLoading(false)
                 close();
-                fireUpdateRequest();
                 okNotify(`Service ${service.name} has been renamed in ${ name }`, `Successfully renamed service on port ${service.port}`)
             }else{
                 setSubmitLoading(false)

frontend/src/components/ServiceRow/index.tsx

@@ -5,7 +5,7 @@ import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
 import YesNoModal from '../YesNoModal';
-import { deleteservice, errorNotify, fireUpdateRequest, okNotify, startservice, stopservice } from '../../js/utils';
+import { deleteservice, errorNotify, okNotify, startservice, stopservice } from '../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
@@ -28,7 +28,6 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         await stopservice(service.port).then(res => {
             if(!res){
                 okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
-                fireUpdateRequest();
             }else{
                 errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
             }
@@ -43,7 +42,6 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         await startservice(service.port).then(res => {
             if(!res){
                 okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
-                fireUpdateRequest();
             }else{
                 errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
             }
@@ -57,7 +55,6 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         deleteservice(service.port).then(res => {
             if (!res){
                 okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
-                fireUpdateRequest();
             }else
                 errorNotify("An error occurred while deleting a service",`Error: ${res}`)
         }).catch(err => {