Added room functionality

src/layout/pages/Room.tsx

@@ -0,0 +1,51 @@
+import useWebSocket from "react-use-websocket";
+import React from "react";
+import {useParams} from "react-router";
+
+const Room = () => {
+
+    const {roomId} = useParams();
+
+    const WS_URL = `ws://localhost:5062/room/${roomId}`;
+
+    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>
+            <h1>Room {roomId}</h1>
+            <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 Room;