added events handlers to basics events (" disconnect, connect... etc ")

src/core/libs/socket/index.ts

@@ -2,6 +2,7 @@ import io from 'socket.io-client'
 import { verbosity } from 'core/libs/verbosity'
 import { connect } from 'umi'
 import settings from 'core/libs/settings'
+import { notify } from 'core/libs/appInterface'
 
 const maxDeep_Attemp = Number(2)
 export class SocketConnection{
@@ -22,7 +23,7 @@ export class SocketConnection{
         this.props = props
         this.opts = {
             reconnection: true,
-            reconnectionAttempts: Infinity,
+            reconnectionAttempts: maxDeep_Attemp,
             reconnectionDelay: 1000,
             reconnectionDelayMax: 5000,
             randomizationFactor: 0.5,
@@ -61,6 +62,7 @@ export class SocketConnection{
         }
         this.ioConn = io(this.state.address, this.opts)
         this.conn.open()
+
         this.ioConn.on("connect_error", () => {
             if (this.state.connAttemps >= maxDeep_Attemp) {
                 verbosity(['Maximun nº of attemps reached => max', maxDeep_Attemp + 1])
@@ -69,7 +71,20 @@ export class SocketConnection{
             }
             verbosity([`Strike [${this.state.connAttemps + 1}] / ${maxDeep_Attemp + 1} !`])
             this.state.connAttemps = this.state.connAttemps + 1
-            
+        })
+
+        this.ioConn.on('disconnect', () => {
+            verbosity("Connection disconnect!")
+        })
+        this.ioConn.on('reconnect', (attemptNumber:number) => {
+            verbosity(["Connection reconected with (", attemptNumber , ") tries"])
+        })
+        this.ioConn.on('connect', () => {
+            notify.success("You are now online")
+            verbosity("Successfully connect")
+        })
+        this.ioConn.on('close', () => {
+            verbosity("Connection closed!")
         })
     }
     
@@ -81,7 +96,6 @@ export class SocketConnection{
             this.ioConn.disconnect()
         },
         close: () => {
-            verbosity("Connection closed!")
             this.ioConn.close()
         },
         destroy: () => {

src/models/app.js

@@ -16,6 +16,7 @@ export default {
   state: {
     env_proccess: process.env,
     socket_conn: null,
+    socket_opt: null,
     server_key: keys.server_key,
     resolvers: null,
 
@@ -117,11 +118,10 @@ export default {
       const { user_id, access_token } = payload.authFrame
       yield put({ type: 'handleLogin', payload: { user_id, access_token, user_data: payload.dataFrame } })
     },
-    *initializeSocket({payload}, {select}){
+    *initializeSocket({payload}, {select, put}){
       if(!payload) return false
-
-      new SocketConnection(payload)
-      
+      const { type, address } = payload
+      yield put({ type: "handleSocket", payload: new SocketConnection(payload) })
     },
     *initializePlugins({ payload }, { select }){
         const extended = yield select(state => state.extended)
@@ -260,6 +260,10 @@ export default {
     handleUpdateResolvers(state, { payload }) {
       state.resolvers = payload
     },
+    handleSocket(state, { payload }) {
+      state.socket_conn = payload
+      state.socket_opt = payload.opts
+    },
     handleUpdateAuthFrames(state, { payload }) {
       state.session_authframe = payload
       state.session_token = payload.session_token,

src/pages/debug/debuggers/socket.js

@@ -7,13 +7,12 @@ import * as antd from 'antd'
 import { objectToArray } from 'core'
 import settings from 'core/libs/settings'
 
-const defaultSocketAddress = "85.251.59.39"
+const defaultSocketAddress = "localhost:7000"
 
 @connect(({ app }) => ({ app }))
-export default class SocketDebug extends React.Component{
+export default class SocketDebug extends React.PureComponent{
     state = {
         resolvers: objectToArray(this.props.app.resolvers),
-        connNode: null,
         InputRaw: defaultSocketAddress
     }
 
@@ -26,7 +25,16 @@ export default class SocketDebug extends React.Component{
         })
     }
 
+    handleDisconnectSocket(){
+        const socket = this.props.app.socket_conn
+        if (socket) {
+            console.log("closing")
+            socket.conn.close()
+        }
+    }
+
     render(){
+        const { socket_opt } = this.props.app
         return(
             <div>
                 <antd.Card>
@@ -42,12 +50,28 @@ export default class SocketDebug extends React.Component{
                     />
                 </antd.Card>
 
-                connectedNode: {this.state.connNode}
+                {socket_opt?  
+                     <antd.List 
+                         grid={{
+                           gutter: 5,
+                           xxl: 3,
+                         }}
+                         dataSource={objectToArray(socket_opt)}
+                         renderItem={(e) => {
+                             return(
+                                 <div style={{ border: "0.1px rgb(217, 217, 217) solid" ,backgroundColor: "rgb(250, 250, 250)", borderRadius: "4px", width: "fit-content", paddingRight: "12px" }}>
+                                     <antd.Tag>{e.key}</antd.Tag>{JSON.stringify(e.value)}
+                                 </div>
+                             )
+                         }}
+                     />
+                : null}
                 
                 <antd.Card>
-                    <antd.Button onClick={() => this.setState({ InputRaw: defaultSocketAddress })} > Set default </antd.Button>
-                    <antd.Button onClick={() => this.dispatchSocket(this.state.InputRaw)} > connect </antd.Button>
+                    <antd.Button onClick={() => this.dispatchSocket(this.state.InputRaw)} > Connect </antd.Button>
+                    <antd.Button onClick={() => this.handleDisconnectSocket()} > Disconnect </antd.Button>
                     <antd.Input onChange={(e) => this.setState({ InputRaw: e.target.value })} value={this.state.InputRaw} placeholder="ws:// http:// some.bruh:9090" />
+                    <antd.Button onClick={() => this.setState({ InputRaw: defaultSocketAddress })} > Set default </antd.Button>
                 </antd.Card>
                         
             </div>