fixed chat sockets listens redefined

back/volume/src/chat/chat.gateway.ts

@@ -43,6 +43,12 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
   async handleConnection (socket: Socket): Promise<void> {}
 
   async handleDisconnect (socket: Socket): Promise<void> {
+    const connect = await this.connectedUserRepository.findOneBy({
+      socket: socket.id
+    })
+    if (connect)
+      await this.connectedUserRepository.delete({ socket: socket.id })
+    socket.disconnect()
     console.log('socket %s has disconnected', socket.id)
   }
 

front/volume/src/App.svelte

@@ -34,36 +34,10 @@
 
   // Single Page Application config
   let appState: string = APPSTATE.HOME;
-
-  async function updateChat() {
-    const urlSplit = appState.split("#", 2)
-    if (appState.includes(APPSTATE.CHANNELS) && urlSplit.length > 1) {
-      const currentChannelName = appState.split("#", 2)[1];
-      fetch(API_URL + "/channels", {
-        credentials: "include",
-        mode: "cors",
-      }).then((res) => {
-        res.json().then(async (channels) => {
-          await formatChannelNames(channels);
-          const channel = channels.find((c: ChannelsType) => c.name === currentChannelName);
-          selectedChannel = channel;
-          if (channel) {
-            chan.selectChat(channel.id); // disabled as it causes a bug where joining a channel happen twice
-          } else {
-            alert("Failed loading channel");
-          }
-        });
-      }).catch(() => {
-        alert("Failed loading channel");
-      });
-    }
-  }
-
   history.replaceState({ appState: "" }, "", "/");
   window.onpopstate = (e: PopStateEvent) => {
     if (e.state) {
       appState = e.state.appState;
-      void updateChat();  // why this?
     }
   };
 
@@ -75,7 +49,6 @@
   if (newState === appState) return;
     appState = newState;
     history.pushState({ appState }, "", appState);
-    void updateChat();
   }
 
   onMount(() => {
@@ -169,6 +142,7 @@
   }
   let selectedChannel: ChannelsType;
   const handleSelectChannel = (channel: ChannelsType) => {
+    selectedChannel = channel;
     setAppState(APPSTATE.CHANNELS + "#" + channel.name);
   };
 

front/volume/src/components/Channels.svelte

@@ -17,7 +17,6 @@
   }
   import { onMount } from "svelte";
   import { API_URL, store } from "../Auth";
-  import { socket } from "../socket";
   import type User from "./Profile.svelte";
 
   export async function formatChannelNames(channel: Array<ChannelsType>): Promise<void> {
@@ -76,25 +75,6 @@
     return true;
   }
 
-  const joinChannel = async (channel: ChannelsType) => {
-    console.log(channels)
-    socket.connect();
-    if (!channel.password) {
-      socket.emit("joinChannel", {
-        UserId: $store.ftId,
-        ChannelId: channel.id,
-      });
-    } else {
-      await show_popup("Channel is protected, enter password:")
-      socket.emit("joinChannel", {
-        UserId: $store.ftId,
-        ChannelId: channel.id,
-        pwd: $content,
-      });
-    }
-    console.log("Try to join channel: ", $store.ftId, channel.id, $content)
-  };
-
   const getChannels = async () => {
     const res = await fetch(API_URL + "/channels", {
       credentials: "include",
@@ -116,20 +96,6 @@
 
 
   export let onSelectChannel: (channel: ChannelsType) => void;
-  let channel: ChannelsType;
-
-  export const selectChat = (id: number) => {
-    console.log("channel: ", id)
-    getChannels().then(() => {
-      channel = channels.find((c) => c.id === id);
-      if (channel) {
-        joinChannel(channel);
-      } else {
-        show_popup("Did not find channel", false)
-      }
-
-    })
-  };
 
   const createChannel = async () => {
     let name: string;

front/volume/src/components/Chat.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
   import { store, API_URL } from "../Auth";
-  import { socket } from "../socket";
+  import { io, Socket } from "socket.io-client";
   import { show_popup, content } from "./Alert/content";
   import { APPSTATE } from "../App.svelte";
   import type { ChannelsType, chatMessagesType } from "./Channels.svelte";
@@ -17,11 +17,45 @@
   let newText = "";
 
   export let setAppState: (newState: APPSTATE | string) => void;
+  let socket: Socket;
   onMount(async () => {
+    socket = io(
+      "http://" + (import.meta.env.VITE_HOST ?? "localhost") + ":3001"
+    );
+    socket.connect();
+    if (!channel) setAppState("/channels");
+    if (!channel.password) {
+      socket.emit("joinChannel", {
+        UserId: $store.ftId,
+        ChannelId: channel.id,
+      });
+    } else {
+      await show_popup("Channel is protected, enter password:");
+      socket.emit("joinChannel", {
+        UserId: $store.ftId,
+        ChannelId: channel.id,
+        pwd: $content,
+      });
+    }
+    socket.on("newMessage", (msg: chatMessagesType) => {
+      console.log(msg);
+      messages = [...messages, msg];
+    });
+
+    socket.on("messages", (msgs: Array<chatMessagesType>) => {
+      messages = msgs;
       getMembers();
       usersInterval = setInterval(async () => {
         getMembers();
       }, 1000);
+      console.log("You are joining channel: ", channel.name);
+    });
+    socket.on("failedJoin", (error: string) => {
+      show_popup(`Failed to join channel: ${error}`, false);
+      setAppState(APPSTATE.CHANNELS);
+    });
+
+    console.log("Try to join channel: ", $store.ftId, channel.id, $content);
   });
 
   async function getMembers() {
@@ -33,30 +67,13 @@
     if (res.ok) blockedUsers = await res.json();
     res = await fetch(`${API_URL}/channels/${channel.id}/users`, {
       credentials: "include",
-      mode: "cors"
+      mode: "cors",
-    })
+    });
     if (res.ok) chatMembers = await res.json();
   }
 
-  socket.on("newMessage", (msg: chatMessagesType) => {
-    console.log(msg)
-    messages = [...messages, msg];
-  });
-
-
-  socket.on("messages", (msgs: Array<chatMessagesType>) => {
-    messages = msgs;
-    console.log("You are joining channel: ", channel.name)
-  });
-
-  socket.on("failedJoin", (error: string) => {
-    show_popup(`Failed to join channel: ${error}`, false) 
-    setAppState("/channels")
-  });
-
-
   onDestroy(() => {
-    clearInterval(usersInterval)
+    clearInterval(usersInterval);
     socket.disconnect();
   });
 
@@ -119,8 +136,7 @@
         body: JSON.stringify({ id: target.ftId }),
       });
     }
-    if (response.ok) 
+    if (response.ok) await show_popup("User blocked", false);
-      await show_popup("User blocked", false);
     else await show_popup("Failed to block user", false);
   };
 
@@ -156,8 +172,10 @@
     });
     if (response.ok) {
       const target = await response.json();
-      await show_popup("Enter a time for which the user will be banned from this channel")
+      await show_popup(
-      const duration = $content 
+        "Enter a time for which the user will be banned from this channel"
+      );
+      const duration = $content;
       response = await fetch(API_URL + "/channels/" + channel.id + "/ban", {
         credentials: "include",
         method: "POST",
@@ -167,7 +185,7 @@
         },
         body: JSON.stringify({ data: [target.ftId, duration] }),
       });
-      socket.emit("kickUser", channel.id, $store.ftId, target.ftId)
+      socket.emit("kickUser", channel.id, $store.ftId, target.ftId);
       dispatch("return-home");
     }
   };
@@ -204,9 +222,15 @@
     });
     if (response.ok) {
       const target = await response.json();
-      socket.emit("kickUser", {chan : channel.id, from : $store.ftId, to: target.ftId});
+      socket.emit("kickUser", {
+        chan: channel.id,
+        from: $store.ftId,
+        to: target.ftId,
+      });
       dispatch("return-home");
-    } else {await show_popup("merde",false)}
+    } else {
+      await show_popup("merde", false);
+    }
   };
 
   //--------------------------------------------------------------------------------/
@@ -288,14 +312,13 @@
   //--------------------------------------------------------------------------------/
 
   const leaveChannel = async () => {
-    await show_popup("Press \"Okay\" to leave this channel?", false);
+    await show_popup('Press "Okay" to leave this channel?', false);
-    if ($content == 'ok') {
+    if ($content == "ok") {
       socket.emit("leaveChannel");
       dispatch("return-home");
-      socket.disconnect()
+      socket.disconnect();
-      
-    }
     }
+  };
   function onSendMessage() {
     dispatch("send-message", selectedUser);
     showProfileMenu = false;
@@ -328,9 +351,7 @@
       >
         <ul>
           <li>
-            <button on:click={onSendMessage}>
+            <button on:click={onSendMessage}> Send Message </button>
-              Send Message
-            </button>
           </li>
           <li>
             <button on:click={() => dispatch("view-profile", selectedUser)}>
@@ -379,10 +400,7 @@
     </div>
 
     {#if showChatMembers}
-      <div
+      <div on:click|stopPropagation on:keydown|stopPropagation />
-        on:click|stopPropagation
-        on:keydown|stopPropagation
-      />
       <ul>
         {#each chatMembers as member}
           <li>
@@ -391,8 +409,12 @@
               <button on:click={() => banUser(member.username)}> ban </button>
               <button on:click={() => kickUser(member.username)}> kick </button>
               <button on:click={() => muteUser(member.username)}> mute </button>
-              <button on:click={() => adminUser(member.username)}> promote </button>
+              <button on:click={() => adminUser(member.username)}>
-              <button on:click={() => removeAdminUser(member.username)}> demote </button>
+                promote
+              </button>
+              <button on:click={() => removeAdminUser(member.username)}>
+                demote
+              </button>
             </p>
           </li>
         {/each}

front/volume/src/socket.ts

@@ -1,3 +0,0 @@
-import { io, Socket } from "socket.io-client";
-
-export const socket: Socket = io("http://" + (import.meta.env.VITE_HOST ?? 'localhost') + ":3001");