Websocket.
in jsImport from {websocket} "./websocket "
The import {message} from 'antd'
//import the from e "express"

//the websocket four callback function, onopen, onmessage, one rror, onclose

The class createWebSocket {
//myUrl='
The constructor (url) {

//this. The instance=null
//super (url)
Enclosing the connect (url)
//the console log (url)
Enclosing myUrl url=
//this. GetMessage ()
}

The connect (url) {//connect to the server
This. Ws=new the WebSocket (url)
This. Ws. Onopen=(e)=& gt; {
Enclosing the status='open'
Message. The info (' link succeed ')
The console. The log (" connection to the server is the opened ")
//this. HeartCheck. Reset (). The start ()
This. Ws. Send (' succeed)
Enclosing heartCheck ()
}
}
Async getMessage () {//asynchronous data
Enclosing lockReconnect=true
Enclosing messageList=' ';
Await new Promise ((resolve)=& gt; {
This. Ws. Onmessage=(e)=& gt; {
//the console. The log (e.d ata)
Enclosing messageList=e.d ata
//the console. The log (enclosing messageList)
The resolve ()
}
})
The console. The log (enclosing messageList)
Return this. MessageList
}

HeartCheck () {//heartbeat
This. PingPong='ping'
Enclosing pingInterval=setInterval (()=& gt; {
If (this. Ws. ReadyState===1) {
This. Ws. Send (' ping ')
}
}, 10000);
Enclosing pongInterval=setInterval (()=& gt; {
If (this. PingPong==='ping') {
Enclosing the closeHandle (' pingPong not to pong)
}
The console. The log (' return the pong ')
}, 20000)
}
The closeHandle (res) {
If (this. The status!=='close') {
The console. The log (' disconnect, rewiring websocket, res)
If (this. PongInterval!==undefined & amp; & This pingInterval!==undefined) {
ClearInterval (enclosing pongInterval)
ClearInterval (enclosing pingInterval)
}
Enclosing the connect (enclosing myUrl)
} else {
The console. The log (' websocket manually shut down, or are in the connection)
}
}

Close () {//close the connection
ClearInterval (enclosing pingInterval)
ClearInterval (enclosing pongInterval)
This. Ws. Send (' close ')
Enclosing the status='close'
This. Ws. Onclose=e=& gt; {
The console. The log (' close ')
}
}
}

Export the default createWebSocket

Used in the components, the use of the server from change the value of the components of the value of state
The import createWebSocket from '../WebSocket '

Ws=new createWebSocket (' ws:... ')

ComponentDidMount () {
//this. The test ()
//the console. The log (" XXXX ")
This. Ws. GetMessage (). Then ((res)=& gt; {
The console. The log (res)
Enclosing setState ({data: res})
})
}
ComponentWillUnmount () {
This. Ws. The close ()
}


Using the node with a local server
Server.
in jsConst WebSocket=the require (' ws)
Const express=the require (' express ')
Const app=express ()
App. Listen (3003)//port needs to be changed, every time start, because the port will be occupied

Const WSS=new WebSocket Server ({port: 8989})//port number need to change, each time you start the
The console. The log (' the connection is starting ')
WSS) on (' connection ', function (ws) {
The console. The log (' client connected ')
Ws. On (' message ', function (the message) {
The console. The log (" received: ", message)
Ws. Send (" hello world ")
})
})
Stay in control node server. Js start the server