Simple websocket compliant front-end

src/layout/pages/Home.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import useWebSocket from 'react-use-websocket';
+
+const WS_URL = "ws://localhost:5062/ws";
+
+const Home = () => {
+
+    const [message, setMessage] = React.useState<string>('');
+    const [messages, setMessages] = React.useState<string[]>([]);
+
+    const websocket = useWebSocket(WS_URL, {
+        onOpen: () => {
+            console.log('WebSocket connection established.');
+        },
+        onMessage: (event) => {
+            setMessages([...messages, event.data]);
+        }
+    });
+
+    const handleSend = () => {
+        websocket.sendMessage(message);
+        setMessage('');
+    }
+
+    const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setMessage(event.target.value);
+    }
+
+    return (
+        <div>
+            <form>
+                <input type="text" name="message" placeholder="Send a message" value={message}
+                       onChange={handleMessageChange}/>
+                <span onClick={handleSend}>Send</span>
+            </form>
+            <ul>
+                {
+                    messages.map((message, index) => {
+                        return <li key={index}>{message}</li>
+                    })
+                }
+            </ul>
+        </div>
+    );
+}
+
+export default Home;

src/layout/pages/NotFound.tsx

@@ -0,0 +1,9 @@
+const NotFound = () => {
+    return (
+        <div>
+            404
+        </div>
+    );
+}
+
+export default NotFound;