add: improved the frontend and the backend by adding websockets

front/src/pages/ChannelPage.tsx

@@ -71,15 +71,17 @@ export default function ChannelPage() {
     }, [name]);
 
     useEffect(() => {
-        const id = setInterval(() => {
-            axios
-                .get(`/api/channels/${name}/messages`).then((res) => {
-                    setMessages(res.data)
-                })
-        }, 2000)
-
-        return () => { clearInterval(id) }
-    }, [])
+        const socket = new WebSocket(`/api/channels/${name}`);
+          
+        socket.addEventListener('message', function (event) {
+            if (event.data === "new_message" || event.data === "delete_message") {
+                axios
+                    .get(`/api/channels/${name}/messages`).then((res) => {
+                        setMessages(res.data)
+                    })
+            }
+        });
+    }, [name])
 
     useEffect(() => {
         const words = message.toString().split(" ");
@@ -102,7 +104,14 @@ export default function ChannelPage() {
     
 
     if (!channel || !messages) {
-        return <div>Loading...</div>;
+        return (
+            <div className="channel-page">
+                <TopBar user={user} />
+                <div className="channel">
+                    <p>Loading...</p>
+                </div>
+            </div>
+        )
     }
 
     return (