Make socket more stable

Author: SeeviewCreator

src/frontend/src/components/chat-detail-component.vue

@@ -63,10 +63,10 @@ const loadChat = async () => {
             // Try to initialize socket connection for real-time updates
             try {
                 await sockets.hub.initialize();
-                sockets.hub.joinChat(chatId);
-                sockets.hub.registerToEvent('ReceiveMessage', handleIncomingMessage);
-                sockets.hub.registerToEvent('UpdateMessage', handleMessageUpdate);
-                sockets.hub.registerToEvent('DeleteMessage', handleMessageDelete);
+                await sockets.hub.joinChat(chatId);
+                await sockets.hub.registerToEvent('ReceiveMessage', handleIncomingMessage);
+                await sockets.hub.registerToEvent('UpdateMessage', handleMessageUpdate);
+                await sockets.hub.registerToEvent('DeleteMessage', handleMessageDelete);
                 isSocketConnected.value = true;
             } catch (socketError) {
                 console.warn('Failed to connect to real-time messaging. Messages will not update automatically:', socketError);
@@ -322,10 +322,10 @@ onMounted(() => {
     loadChat();
 });
 
-onUnmounted(() => {
+onUnmounted(async () => {
     if (chat.value && isSocketConnected.value) {
         try {
-            sockets.hub.leaveChat(chat.value.uid);
+            await sockets.hub.leaveChat(chat.value.uid);
         } catch (error) {
             console.warn('Error leaving chat:', error);
         }

src/frontend/src/components/chats-list-component.vue

@@ -132,7 +132,6 @@ const loadUnreadCounts = async () => {
             })
         );
         unreadCounts.value = counts;
-        console.log('Loaded unread counts:', counts);
     } catch (error) {
         console.error('Error loading unread counts:', error);
     }
@@ -210,8 +209,8 @@ onMounted(async () => {
     await loadChats();
         try {
         await sockets.hub.initialize();
-        sockets.hub.registerToEvent('NewUnreadChatMessage', handleUnreadMessageUpdate);
-        sockets.hub.joinMessaging();
+        await sockets.hub.registerToEvent('NewUnreadChatMessage', handleUnreadMessageUpdate);
+        await sockets.hub.joinMessaging();
         isSocketConnected.value = true;
     } catch (error) {
         console.warn('Failed to connect to real-time messaging. Badge counts will not update automatically:', error);

src/frontend/src/layout/layout-component.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onUnmounted, ref, watch } from "vue";
+import { computed, watch, onMounted, ref } from "vue";
 import { useAuthStore } from "../stores/auth-store";
 import NavbarComponent from "./navbar-component.vue";
 import { services, sockets } from "../services/api";
@@ -8,50 +8,71 @@ const authStore = useAuthStore();
 
 const totalUnreadMessages = ref(0);
 const isSocketConnected = ref(false);
+const isAuthenticated = computed(() => authStore.isAuthenticated.value && !!authStore.userId.value);
 
-watch(authStore.isAuthenticated, async (_) => {
-    if (authStore.isAuthenticated) {
-        try {
-            await sockets.hub.initialize();
-            sockets.hub.registerToEvent("NewTotalUnreadChatMessage", 
-            (newTotal: number) => {
-                totalUnreadMessages.value = newTotal;
-            });
-            sockets.hub.joinMessaging();
-            isSocketConnected.value = true;
-        } catch (error) {
-            console.warn('Failed to connect to real-time messaging:', error);
-            isSocketConnected.value = false;
-        }
-        
-        const userId = authStore.userId;
-        await checkUnreadMessages(userId.value!);
-    }
-}, {immediate: true});
+const initSocket = async () => {
+  if (isSocketConnected.value) return;
+
+  try {
+    await sockets.hub.initialize();
+
+    await sockets.hub.registerToEvent("NewTotalUnreadChatMessage", (newTotal: number) => {
+      totalUnreadMessages.value = newTotal;
+    });
+
+    await sockets.hub.joinMessaging();
+    isSocketConnected.value = true;
+
+    const userId = authStore.userId;
+    if (userId?.value) await checkUnreadMessages(userId.value);
+  } catch (error) {
+    console.warn("Failed to connect to real-time messaging:", error);
+    isSocketConnected.value = false;
+  }
+};
 
 const checkUnreadMessages = async (userId: string) => {
-    try {
-        const res = await services.userChatMessageStatus.getTotalUnreadMessages(userId);
-        if (res.isSuccess && res.data) {
-            totalUnreadMessages.value = res.data.countUnreadMessages;
-        }
-    } catch (error) {
-        console.warn('Failed to fetch unread message count:', error);
+  try {
+    const res = await services.userChatMessageStatus.getTotalUnreadMessages(userId);
+    if (res.isSuccess && res.data) {
+      totalUnreadMessages.value = res.data.countUnreadMessages;
     }
-}
+  } catch (error) {
+    console.warn("Failed to fetch unread message count:", error);
+  }
+};
 
+const cleanupSocket = async () => {
+  if (!isSocketConnected.value) return;
+  try {
+    await sockets.hub.leaveMessaging();
+  } catch (e) {
+    console.warn("Error leaving messaging:", e);
+  } finally {
+    sockets.hub.flush();
+    isSocketConnected.value = false;
+  }
+};
 
-window.addEventListener('beforeunload', () => {
-    if (isSocketConnected.value) {
-        sockets.hub.leaveMessaging();
+watch(
+  isAuthenticated,
+  async (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      await initSocket();
+    } else if (!newVal && oldVal) {
+      await cleanupSocket();
     }
-})
+  },
+  { immediate: false }
+);
 
-onUnmounted(() => {
-    if (isSocketConnected.value) {
-        sockets.hub.leaveMessaging();
-    }
-})
+onMounted(async () => {
+  if (isAuthenticated.value) {
+    await initSocket();
+  }
+});
+
+window.addEventListener("beforeunload", cleanupSocket);
 </script>
 
 <template>

src/frontend/src/services/api/index.ts

@@ -51,26 +51,31 @@ export const sockets = {
          * @param action Function which is executed when the event is triggered over the socket
          */
         registerToEvent: async(event: string, action: Function) => {
+            await initPromise;
             socketBaseClient.registerToEvent(event, action);
         },
         /**
          * Send a JoinChat event over the socket to the backend
          * @param chatId Guid (string) with the chatId
          */
-        joinChat: (chatId: string) => {
+        joinChat: async (chatId: string) => {
+            await initPromise;
             socketBaseClient.sendEvent("JoinChat", [chatId]);
         },
         /**
          * Send a LeaveChat event over the socket to the backend to unsubscribe to chat messages
          * @param chatId Guid (string) with the chatId to be left
          */
-        leaveChat: (chatId: string) => {
+        leaveChat: async (chatId: string) => {
+            await initPromise;
             socketBaseClient.sendEvent("LeaveChat", [chatId]);
         },
-        joinMessaging: () => {
+        joinMessaging: async () => {
+            await initPromise;
             socketBaseClient.sendEvent("JoinMessaging", []);
         },
-        leaveMessaging: () => {
+        leaveMessaging: async () => {
+            await initPromise;
             socketBaseClient.sendEvent("LeaveMessaging", []);
         }
     }