fix: fixed websockets

front/src/main.tsx

@@ -10,16 +10,21 @@ import Register from './pages/Register'
 import CreateChannel from './pages/CreateChannel'
 import ChannelsPage from './pages/ChannelsPage'
 
+const socket = new WebSocket("/api/ws");
+setInterval(() => {
+  socket.send("ping");
+}, 30 * 1000);
+
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/c/:name" element={<ChannelPage />} />
-      <Route path="/u/:username" element={<UserPage />} />
+      <Route path="/" element={<Home socket={socket} />} />
+      <Route path="/c/:name" element={<ChannelPage socket={socket} />} />
+      <Route path="/u/:username" element={<UserPage socket={socket} />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/create-channel" element={<CreateChannel />} />
-      <Route path="/channels" element={<ChannelsPage />} />
+      <Route path="/channels" element={<ChannelsPage socket={socket} />} />
     </Routes>
   </BrowserRouter>
 )

front/src/pages/ChannelPage.tsx

@@ -7,7 +7,7 @@ import axios from "axios";
 
 import "../styles/ChannelPage.css";
 
-export default function ChannelPage() {
+export default function ChannelPage({socket}: {socket: WebSocket}) {
     const { name } = useParams();
     const [channel, setChannel] = useState<Channel>();
     const [messages, setMessages] = useState<Messages>();
@@ -70,13 +70,7 @@ export default function ChannelPage() {
         });
     }, [name]);
 
-    useEffect(() => {
-        const socket = new WebSocket(`/api/ws`);
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-          
+    useEffect(() => {          
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
             if ((data.type === "new_message" || data.type === "delete_message") && data.channel_id === channel?.id) {
@@ -86,11 +80,6 @@ export default function ChannelPage() {
                     })
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        }
     }, [channel])
 
     useEffect(() => {

front/src/pages/ChannelsPage.tsx

@@ -6,7 +6,7 @@ import TopBar from "../components/TopBar"
 
 import "../styles/ChannelsPage.css"
 
-export default function ChannelsPage() {
+export default function ChannelsPage({socket}: {socket: WebSocket}) {
     const [channels, setChannels] = useState<Channels>();
     const [search, setSearch] = useState<string>("");
     const [user, setUser] = useState<User>();
@@ -34,12 +34,6 @@ export default function ChannelsPage() {
     }, [])
 
     useEffect(() => {
-        const socket = new WebSocket("/api/ws");
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
             if (data.type === "new_channel") {
@@ -53,11 +47,6 @@ export default function ChannelsPage() {
                     })
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        }
     }, [])
 
     if (!channels) {

front/src/pages/Home.tsx

@@ -7,7 +7,7 @@ import axios from "axios"
 
 import "../styles/Home.css"
 
-export default function Home() {
+export default function Home({socket}: {socket: WebSocket}) {
     const [user, setUser] = useState<User>();
     const [channels, setChannels] = useState<RecentChannels>();
     const [messages , setMessages] = useState<Messages>();
@@ -59,12 +59,6 @@ export default function Home() {
     }, [])
 
     useEffect(() => {
-        const socket = new WebSocket("/api/ws");
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-
         socket.addEventListener('message', function (event) 
         {
             const data = JSON.parse(event.data);
@@ -106,11 +100,6 @@ export default function Home() {
                     })
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        }
     }, [])
 
     useEffect(() => {

front/src/pages/UserPage.tsx

@@ -7,7 +7,7 @@ import axios from "axios";
 
 import "../styles/UserPage.css";
 
-export default function UserPage() {
+export default function UserPage({socket}: {socket: WebSocket}) {
     const { username } = useParams();
     const [pageUser, setPageUser] = useState<User>();
     const [messages, setMessages] = useState<Messages>();
@@ -45,12 +45,6 @@ export default function UserPage() {
     }, [username]);
 
     useEffect(() => {
-        const socket = new WebSocket("/api/ws");
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
             if ((data.type === "new_message" || data.type === "delete_message") && data.user_id === pageUser?.id) {
@@ -65,11 +59,6 @@ export default function UserPage() {
                     });
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        };
     }, [pageUser]);
 
     if (!pageUser) {