18 - Handling WebSocket Open & Close Events

Author: codingforentrepreneurs

index.js

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom'
 
 const MyWebSocket = () => {
     const [socket, setSocket] = useState(null)
+    const [isOpen, setIsOpen] = useState(false)
     // 1. connect to the websocket server
     // 2. push & listen for messages in the websocket connection
     // 3. disconnect from websocket server
@@ -17,9 +18,23 @@ const MyWebSocket = () => {
         }
     }, [socket])
 
+
+    useEffect(()=>{
+        // connect to the websocket server
+        if (socket) {
+            socket.onopen = () => {
+                console.log("open")
+                setIsOpen(true)
+            }
+            socket.onclose = () => {
+                setIsOpen(false)
+            }
+        }
+    }, [socket])
+
     return <div>
         <h1>WebSocket</h1>
-        <p>{socket && socket.readyState === WebSocket.CONNECTING ? "Connecting" : "other"} </p>
+        <div>{isOpen && <p>Open Socket</p>} </div>
     </div>
 }