@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
4
4
// const socket = new WebSocket()
5
5
6
6
const MyWebSocket = ( ) => {
7
+ const wsURI = 'ws://localhost:8765'
7
8
const [ socket , setSocket ] = useState ( null )
8
9
const [ isOpen , setIsOpen ] = useState ( false )
9
10
// 1. connect to the websocket server
@@ -13,7 +14,7 @@ const MyWebSocket = () => {
13
14
useEffect ( ( ) => {
14
15
// connect to the websocket server
15
16
if ( socket === null ) {
16
- const wsURI = 'ws://localhost:8765'
17
+
17
18
setSocket ( new WebSocket ( wsURI ) )
18
19
}
19
20
} , [ socket ] )
@@ -23,17 +24,37 @@ const MyWebSocket = () => {
23
24
// connect to the websocket server
24
25
if ( socket ) {
25
26
socket . onopen = ( ) => {
26
- console . log ( "open" )
27
27
setIsOpen ( true )
28
28
}
29
29
socket . onclose = ( ) => {
30
30
setIsOpen ( false )
31
31
}
32
32
}
33
+ return ( ) => {
34
+ if ( socket ) {
35
+ socket . close ( 1000 , "Disconnected by dismount" )
36
+ }
37
+ }
33
38
} , [ socket ] )
34
39
40
+ const performClose = _ => {
41
+ if ( socket && socket . readyState == WebSocket . OPEN ) {
42
+ socket . close ( 1000 , "Disconnected by user" )
43
+ }
44
+ }
45
+
46
+ const performOpen = _ => {
47
+ if ( socket && socket . readyState == WebSocket . CLOSED ) {
48
+ setSocket ( new WebSocket ( wsURI ) )
49
+ }
50
+ }
51
+
35
52
return < div >
36
53
< h1 > WebSocket</ h1 >
54
+ < div >
55
+ < button onClick = { performClose } > Close</ button >
56
+ < button onClick = { performOpen } > Open</ button >
57
+ </ div >
37
58
< div > { isOpen && < p > Open Socket</ p > } </ div >
38
59
</ div >
39
60
}
0 commit comments