added temporaly socket debugger

This commit is contained in:
srgooglo 2020-10-23 16:13:52 +02:00
parent 1afeceb9d7
commit b1ec317b2a

View File

@ -8,21 +8,22 @@ import { __legacy__objectToArray } from 'core'
@connect((store) => (store)) @connect((store) => (store))
export default class Index extends React.Component { export default class Index extends React.Component {
handleOpenFloat() { state = {
FloatComponent({ children: <ReduxDebugger {...this.props} />, title: "redux debugger" }) mainNode: "/"
} }
handleDispatchNamespace(key) { handleDispatchNamespace(key) {
console.log(`Dispatching socket namespace (${key})`) console.log(`Dispatching socket namespace (${key})`)
this.props.dispatch({ this.props.dispatch({
type: "socket/namespaceConnector", type: "socket/namespaceConnector",
node: this.state.mainNode,
namespace: key namespace: key
}) })
} }
render() { render() {
const dispatch = this.props.dispatch const dispatch = this.props.dispatch
const { connectionState, socket_address, latency } = this.props.socket const { connectionState, latency } = this.props.socket.nodes[this.state.mainNode]
const getListenersList = (data) => { const getListenersList = (data) => {
if (typeof (data) == "undefined" && data == null) { if (typeof (data) == "undefined" && data == null) {
@ -47,9 +48,8 @@ export default class Index extends React.Component {
__legacy__objectToArray(data).map(e => { __legacy__objectToArray(data).map(e => {
return ( return (
<div key={e.key} style={{ display: "flex", flexDirection: "column", justifyContent: "center", margin: "0 10px", width: "100%", height: "100%" }}> <div key={e.key} style={{ display: "flex", flexDirection: "column", justifyContent: "center", margin: "0 10px", width: "100%", height: "100%" }}>
<h4>{e.key}</h4> <h4>{e.value}</h4>
<antd.Button onClick={() => { this.handleDispatchNamespace(e.key) }} > dispatch </antd.Button> <antd.Button onClick={() => { this.handleDispatchNamespace(e.value) }} > connect </antd.Button>
<antd.Button onClick={() => { dispatch({ type: "socket/toogleListener", listener: e.key }) }} > break </antd.Button>
</div> </div>
) )
}) })
@ -63,9 +63,10 @@ export default class Index extends React.Component {
<antd.Card> <antd.Card>
<h1><Icons.ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1> <h1><Icons.ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1>
<antd.Card> <antd.Card>
<h3> State </h3> <h3> Main Node </h3>
<antd.Card> <antd.Card>
<antd.Tag>{socket_address}</antd.Tag> <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={connectionState == "connected" ? "green" : "volcano"} > {connectionState} </antd.Tag>
<antd.Tag color={latency > 60 ? "red" : "green"} > ~{latency}ms </antd.Tag> <antd.Tag color={latency > 60 ? "red" : "green"} > ~{latency}ms </antd.Tag>
</antd.Card> </antd.Card>
@ -73,25 +74,21 @@ export default class Index extends React.Component {
<antd.Card> <antd.Card>
<h3> Listener manager </h3> <h3> Listener manager </h3>
<antd.Card> <antd.Card>
{getListenersList(this.props.socket.listeners)} {getListenersList(this.props.socket.nodes[this.state.mainNode].listeners)}
</antd.Card> </antd.Card>
</antd.Card> </antd.Card>
<antd.Card> <antd.Card>
<h3> Registered Namespaces </h3> <h3> Registered Namespaces </h3>
<antd.Card> <antd.Card>
<div style={{ display: "flex", flexDirection: "row", backgroundColor: "#fefefe", overflow: "scroll", textAlign: "center" }}> <div style={{ display: "flex", flexDirection: "row", backgroundColor: "#fefefe", overflow: "scroll", textAlign: "center" }}>
{getNamespacesMonitor(this.props.socket.registeredNamespaces)} {getNamespacesMonitor(this.props.socket.nodes[this.state.mainNode].registeredNamespaces)}
</div> </div>
</antd.Card> </antd.Card>
</antd.Card> </antd.Card>
<antd.Card> <antd.Card>
<h3> Misc </h3> <h3> Misc </h3>
<antd.Card> <antd.Card>
<antd.Button onClick={() => dispatch({ type: "socket/getLatency" })} > getLatency </antd.Button>
<antd.Button onClick={() => dispatch({ type: "socket/floodTest", ticks: 100 })} > start floodtest </antd.Button>
<antd.Button onClick={() => dispatch({ type: "socket/toogleListener", listener: "floodTest" })}> break floodTest </antd.Button>
<antd.Button onClick={() => dispatch({ type: "socket/break", listener: "floodTest" })}> fullbreak </antd.Button>
</antd.Card> </antd.Card>
</antd.Card> </antd.Card>
</antd.Card> </antd.Card>