17 - MyWebSocket React Component

Author: codingforentrepreneurs

index.js

@@ -1,43 +1,34 @@
 import React, {useEffect, useState} from 'react'
 import ReactDOM from 'react-dom'
 
+// const socket = new WebSocket()
 
-const Timer = (props) =>{
-    const [count, setCount] = useState(-1)
-    console.log(count, props)
-    useEffect(()=>{
-        // lookup to api service
-    }, [])
+const MyWebSocket = () => {
+    const [socket, setSocket] = useState(null)
+    // 1. connect to the websocket server
+    // 2. push & listen for messages in the websocket connection
+    // 3. disconnect from websocket server
 
     useEffect(()=>{
-        // console.log("mounted")
-        // setCount(count+1)
-        let myTimer;
-        if (count > 10) {
-            myTimer = setTimeout(()=>{
-                setCount(count + 1)
-            }, 1000)
-        }
-
-        return () => {
-            clearTimeout(myTimer)
+        // connect to the websocket server
+        if (socket === null) {
+            const wsURI = 'ws://localhost:8765'
+            setSocket(new WebSocket(wsURI))
         }
-    }, [count])
-
-    const handleClick = _ => {
-        setCount(count + 1)
-    }
+    }, [socket])
 
     return <div>
-
-        <h1>Timer - {count}</h1>
-        <button onClick={handleClick}>Reset</button>
+        <h1>WebSocket</h1>
+        <p>{socket && socket.readyState === WebSocket.CONNECTING ? "Connecting" : "other"} </p>
     </div>
 }
 
+
 const App = () => {
-    return <div>Hello world again.
-            <Timer className='my-timer' />
+    return <div>App
+
+        <MyWebSocket />
+            
     </div>
 }