fix: improved websocket usage

front/src/pages/ChannelPage.tsx

@@ -71,17 +71,28 @@ export default function ChannelPage() {
     }, [name]);
 
     useEffect(() => {
-        const socket = new WebSocket(`/api/channels/${name}`);
+        const socket = new WebSocket(`/api/ws`);
+
+        const id = setInterval(() => {
+            socket.send(JSON.stringify("ping"));
+        }, 10000);
           
         socket.addEventListener('message', function (event) {
-            if (event.data === "new_message" || event.data === "delete_message") {
+            const data = JSON.parse(event.data);
+            console.log(data);
+            if ((data.type === "new_message" || data.type === "delete_message") && data.channel_id === channel?.id) {
                 axios
                     .get(`/api/channels/${name}/messages`).then((res) => {
                         setMessages(res.data)
                     })
             }
         });
-    }, [name])
+
+        return () => {
+            clearInterval(id);
+            socket.close();
+        }
+    }, [channel])
 
     useEffect(() => {
         const words = message.toString().split(" ");