added headerNode & headerReset

src/core/libs/socket/index.ts

@@ -19,7 +19,13 @@ interface ioConnTypes {
 }
 export default class SocketConnection {
     ioConn: any
-    state: { connAttemps: number; registeredNamespaces: any; connectionState: any; listeners: any; latency: any; namespace: any; }
+    state: { 
+        connAttemps: number; 
+        registeredNamespaces: any; 
+        connectionState: any; 
+        listeners: any; 
+        latency: any; 
+    }
     props: any
     opts: any
     dispatcher: any;
@@ -35,7 +41,6 @@ export default class SocketConnection {
         this.dispatcher = props.connector
 
         this.state = {
-            namespaceOrigin: this.props.node ?? "/",
             latency: 0,
             listeners: {},
             connectionState: "init",
@@ -44,6 +49,7 @@ export default class SocketConnection {
         }
 
         this.opts = {
+            namespaceOrigin: "/",
             hostname: "localhost:5000",
             port: "5000",
             reconnection: true,
@@ -103,7 +109,7 @@ export default class SocketConnection {
 
     createConnection(namespace: void) {
         const getNode = () => {
-            const defaultNode = `${this.opts.hostname}${this.state.namespaceOrigin}`
+            const defaultNode = `${this.opts.hostname}${this.opts.namespaceOrigin}`
             if (typeof (namespace) !== "undefined") {
                 return `${this.opts.hostname}:${this.opts.port}${namespace}`
             }
@@ -115,7 +121,7 @@ export default class SocketConnection {
             this.ioConn.updateState = (payload: ioConnTypes) => {
                 this.state = { ...this.state, ...payload }
                 const sendBackPayload = { ...this.state, ioConn: this.ioConn, namespaceConnector: this.namespaceConnector }
-                this.dispatcher({ type: "socket/updateStateFromSocket", node: this.state.namespaceOrigin, payload: sendBackPayload })
+                this.dispatcher({ type: "socket/updateStateFromSocket", node: this.opts.namespaceOrigin, payload: sendBackPayload })
             }
 
             this.ioConn.updateListener = (listenerKey: ioConnTypes, toState: ioConnTypes) => {
@@ -164,6 +170,15 @@ export default class SocketConnection {
                 return this.ioConn.emit(...context)
             }
 
+            this.ioConn._close = () => {
+                this.ioConn.disconnect()
+                this.ioConn.updateConnectionState(0)
+            }
+
+            this.ioConn.destroy = () => {
+                this.dispatcher({ type: "socket/destroyNode", node: this.opts.namespaceOrigin })
+            }
+
             resolve(true)
         })
     }

src/models/socket.ts

@@ -19,11 +19,13 @@ export default {
     nodes: {},
     socket_address: app_config.endpoint_websocket, //set by default
     socket_port: "7000",
+    headerNode: "/"
   },
   effects: {
     *createNodeSocket({ payload, then }, { select, put }) {
       const state = yield select(state => state)
       let opt = {
+        namespaceOrigin: state.socket.headerNode,
         hostname: `${state.socket.socket_address}:${state.socket.socket_port}`, // set stated data
         port: state.socket.socket_port,
         reconnectionAttempts: 10
@@ -35,7 +37,10 @@ export default {
 
       try {
         new SocketConnection({
-          payload: opt, connector: state.app.dispatcher, then: (data) => {
+          namespaceOrigin: opt.namespaceOrigin,
+          connector: state.app.dispatcher,
+          payload: opt,
+          then: () => {
             if (typeof (then) !== "undefined") {
               return then(true)
             }
@@ -53,6 +58,9 @@ export default {
       const state = yield select(state => state.socket)
       state.nodes[node].namespaceConnector(`/${namespace}`)
     },
+    *resetHeader({  }, { put }) {
+      yield put({ type: "createNodeSocket" })
+    },
     *break({ listener, node }, { select, put }) {
       if (!node || !listener) {
         verbosity(`cannot change a listener without declaring the node/listener`)
@@ -76,7 +84,28 @@ export default {
       }
       const state = yield select(state => state.socket)
       state.nodes[node].ioConn.updateListener(listener)
-    }
+    },
+    *destroyNode({ node }, { select, put }) {
+      if (!node) {
+        verbosity(`cannot destroy a node without declaring it`)
+        return false
+      }
+      const state = yield select(state => state.socket)
+      if (state.nodes[node].connectionState !== "closed") {
+        console.log("The node is not closed!, closing before destroying")
+        state.nodes[node].ioConn._close()
+      }
+      let updated = {}
+
+      __legacy__objectToArray(state.nodes).forEach(e => {
+        if (e.key !== node) {
+          updated[e.key] = e.value
+        }
+      })
+  
+      yield put({ type: "updateState", payload: { nodes: updated }  })
+    },
+
   },
   reducers: {
     updateState(state, { payload }) {

src/pages/index.js

@@ -8,22 +8,18 @@ import { __legacy__objectToArray } from 'core'
 
 @connect((store) => (store))
 export default class Index extends React.Component {
-    state = {
-        mainNode: "/"
-    }
-
     handleDispatchNamespace(key) {
         console.log(`Dispatching socket namespace (${key})`)
         this.props.dispatch({
             type: "socket/namespaceConnector",
-            node: this.state.mainNode,
+            node: this.props.socket.headerNode,
             namespace: key
         })
     }
-
+    
     render() {
         const dispatch = this.props.dispatch
-        const { connectionState, latency } = this.props.socket.nodes[this.state.mainNode]
+        const headerNode = this.props.socket.nodes[this.props.socket.headerNode] ?? null
 
         const getListenersList = (data) => {
             if (typeof (data) == "undefined" && data == null) {
@@ -63,32 +59,32 @@ export default class Index extends React.Component {
                 <antd.Card>
                     <h1><Icons.ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1>
                     <antd.Card>
-                        <h3> Main Node </h3>
+                        <h3> Header Node </h3>
                         <antd.Card>
                             <antd.Tag>{this.props.socket.socket_address}</antd.Tag>
-                            <antd.Tag> {this.props.socket.nodes[this.state.mainNode].ioConn.nsp} </antd.Tag>
-                            <antd.Tag color={connectionState == "connected" ? "green" : "volcano"} > {connectionState} </antd.Tag>
-                            <antd.Tag color={latency > 60 ? "red" : "green"} > ~{latency}ms </antd.Tag>
+                            <antd.Tag> {headerNode.ioConn.nsp ?? ""} </antd.Tag>
+                            <antd.Tag color={headerNode.connectionState ?? false == "connected" ? "green" : "volcano"} > {headerNode.connectionState ?? "destroyed"} </antd.Tag>
+                            <antd.Tag color={(headerNode.latency ?? 0 ) > 60 ? "red" : "green"} > ~{headerNode.latency ?? "not exist"}ms </antd.Tag>
                         </antd.Card>
                     </antd.Card>
                     <antd.Card>
                         <h3> Listener manager </h3>
                         <antd.Card>
-                            {getListenersList(this.props.socket.nodes[this.state.mainNode].listeners)}
+                            {getListenersList(headerNode.listeners ?? null)}
                         </antd.Card>
                     </antd.Card>
                     <antd.Card>
                         <h3> Registered Namespaces </h3>
                         <antd.Card>
                             <div style={{ display: "flex", flexDirection: "row", backgroundColor: "#fefefe", overflow: "scroll", textAlign: "center" }}>
-                                {getNamespacesMonitor(this.props.socket.nodes[this.state.mainNode].registeredNamespaces)}
+                                {getNamespacesMonitor(headerNode.registeredNamespaces ?? null)}
                             </div>
                         </antd.Card>
                     </antd.Card>
                     <antd.Card>
                         <h3> Misc </h3>
                         <antd.Card>
-
+                            <antd.Button onClick={() => { dispatch({ type: "socket/resetHeader" }) }} > Reset HeaderSocket </antd.Button>
                         </antd.Card>
                     </antd.Card>
                 </antd.Card>