Skip to content

Commit 27896ab

Browse files
19 - Manually Open & Close WebSocket Connection
1 parent d92fee7 commit 27896ab

File tree

1 file changed

+23
-2
lines changed

1 file changed

+23
-2
lines changed

index.js

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
44
// const socket = new WebSocket()
55

66
const MyWebSocket = () => {
7+
const wsURI = 'ws://localhost:8765'
78
const [socket, setSocket] = useState(null)
89
const [isOpen, setIsOpen] = useState(false)
910
// 1. connect to the websocket server
@@ -13,7 +14,7 @@ const MyWebSocket = () => {
1314
useEffect(()=>{
1415
// connect to the websocket server
1516
if (socket === null) {
16-
const wsURI = 'ws://localhost:8765'
17+
1718
setSocket(new WebSocket(wsURI))
1819
}
1920
}, [socket])
@@ -23,17 +24,37 @@ const MyWebSocket = () => {
2324
// connect to the websocket server
2425
if (socket) {
2526
socket.onopen = () => {
26-
console.log("open")
2727
setIsOpen(true)
2828
}
2929
socket.onclose = () => {
3030
setIsOpen(false)
3131
}
3232
}
33+
return () => {
34+
if (socket) {
35+
socket.close(1000, "Disconnected by dismount")
36+
}
37+
}
3338
}, [socket])
3439

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+
3552
return <div>
3653
<h1>WebSocket</h1>
54+
<div>
55+
<button onClick={performClose}>Close</button>
56+
<button onClick={performOpen}>Open</button>
57+
</div>
3758
<div>{isOpen && <p>Open Socket</p>} </div>
3859
</div>
3960
}

0 commit comments

Comments
 (0)