move graph_update to MelbankGraph component

YeonV · Jan 13, 2025 · afed601 · afed601
1 parent c3b1480
commit afed601
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 31 deletions.
diff --git a/src/components/MGraph.tsx b/src/components/MGraph.tsx
@@ -26,6 +26,7 @@ import {
 } from '@mui/material'
 import BladeFrame from './SchemaForm/components/BladeFrame'
 import { Tune } from '@mui/icons-material'
+import ws from '../utils/Websocket'
 
 ChartJS.register(
   CategoryScale,
@@ -194,6 +195,37 @@ const MGraph = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animationDuration, fillOpacity, scaleType])
 
+  useEffect(() => {
+    const handleWebsockets = () => {
+      const req = {
+        event_type: 'graph_update',
+        id: 9000,
+        type: 'subscribe_event'
+      }
+      console.log('Send')
+      ws.send(JSON.stringify(req.id && req))
+    }
+    setTimeout(() => {
+      handleWebsockets()
+    }, 500)
+
+    document.addEventListener('subs_graph_update', handleWebsockets)
+
+    return () => {
+      const removeGetWs = async () => {
+        const request = {
+          id: 9000,
+          type: 'unsubscribe_event',
+          event_type: 'graph_update'
+        }
+        ws.send(JSON.stringify(request.id && request))
+      }
+      console.log('Clean Up')
+      removeGetWs()
+      document.removeEventListener('subs_graph_update', handleWebsockets)
+    }
+  }, [])
+
   return (
     <Stack alignItems={'center'} sx={{ position: 'relative', width: '100%' }}>
       <Fab

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -63,31 +63,31 @@ export default function Home() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useEffect(() => {
-    const handleWebsockets = () => {
-      const req = {
-        event_type: 'graph_update',
-        id: 9000,
-        type: 'subscribe_event'
-      }
-      // console.log("Send");
-      ws.send(JSON.stringify(req.id && req))
-    }
-    document.addEventListener('subs_device_created', handleWebsockets)
-    return () => {
-      const removeGetWs = async () => {
-        const request = {
-          id: 9000,
-          type: 'unsubscribe_event',
-          event_type: 'graph_update'
-        }
-        ws.send(JSON.stringify(request.id && request))
-      }
-      // console.log("Clean Up");
-      removeGetWs()
-      document.removeEventListener('subs_device_created', handleWebsockets)
-    }
-  }, [])
+  // useEffect(() => {
+  //   const handleWebsockets = () => {
+  //     const req = {
+  //       event_type: 'graph_update',
+  //       id: 9000,
+  //       type: 'subscribe_event'
+  //     }
+  //     // console.log("Send");
+  //     ws.send(JSON.stringify(req.id && req))
+  //   }
+  //   document.addEventListener('subs_device_created', handleWebsockets)
+  //   return () => {
+  //     const removeGetWs = async () => {
+  //       const request = {
+  //         id: 9000,
+  //         type: 'unsubscribe_event',
+  //         event_type: 'graph_update'
+  //       }
+  //       ws.send(JSON.stringify(request.id && request))
+  //     }
+  //     // console.log("Clean Up");
+  //     removeGetWs()
+  //     document.removeEventListener('subs_device_created', handleWebsockets)
+  //   }
+  // }, [])
 
   useEffect(() => {
     const handleWebsockets = () => {

diff --git a/src/utils/Websocket.ts b/src/utils/Websocket.ts
@@ -52,12 +52,12 @@ function createSocket() {
           type: 'subscribe_event'
         }
         ws.send(JSON.stringify(requ.id && requ))
-        const reque = {
-          event_type: 'graph_update',
-          id: 9000,
-          type: 'subscribe_event'
-        }
-        ws.send(JSON.stringify(reque.id && reque))
+        // const reque = {
+        //   event_type: 'graph_update',
+        //   id: 9000,
+        //   type: 'subscribe_event'
+        // }
+        // ws.send(JSON.stringify(reque.id && reque))
         const reqs = {
           event_type: 'scene_activated',
           id: 9003,