added temporaly socket debugger

This commit is contained in:
srgooglo 2020-10-23 16:13:52 +02:00
parent f7535ae7c0
commit ca1bbf0dd2

View File

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