add JoinHome.tsx and update App.tsx

src/App.tsx

 import React from "react";
 import "./App.css";
 import "./api/ocgcore";
+import JoinHome from "./JoinHome";
 
 function App() {
-  // test
-  const ws = new WebSocket("ws:/localhost:8000");
-  
-  console.log("websocket connected!");
-
-  ws.onmessage = e => {
-    console.log("websocket recv: " + e.data);
-  };
-
   return (
     <div className="App">
       <header className="App-header">
-        <p>Welcome to neos-ts!</p>
-        <a
-          className="App-link"
-          href="https://github.com/DarkNeos"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          DarkNeos
-        </a>
+        <JoinHome addr="ws://localhost:8000" />
       </header>
     </div>
   );

src/JoinHome.tsx

+import React, { useState, useEffect } from "react";
+
+export default function JoinHome(props: { addr: string }) {
+  const [isConnected, setConnected] = useState(false);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    const ws = new WebSocket(props.addr);
+
+    ws.onopen = () => {
+      console.log("websocket open");
+      setConnected(true);
+    };
+
+    ws.onclose = () => {
+      console.log("websocket closed");
+      setConnected(false);
+    };
+
+    ws.onmessage = (e) => {
+      const msg = e.data;
+      setMessage(msg);
+    };
+
+    return () => ws.close();
+  }, []);
+
+  return (
+    <div>
+      <p>{"isConnected: " + isConnected}</p>
+      <p>{"message: " + message}</p>
+    </div>
+  );
+}