Implement SSE globally

client/src/layouts/default/AppBar.vue

@@ -130,11 +130,11 @@ import { useUserStore } from "@/store/UserStore";
 import userService from "@/services/userService";
 
 const drawer = ref(false);
-const notifications = ref([]);
 const isActive = ref(0);
 const toast = ref(null);
 const store = useUserStore();
-const { user, isLoading, getUserInfo } = storeToRefs(store);
+const { user, isLoading, notifications } = storeToRefs(store);
+
 const navItems = ref([
   { title: "Home", path: "/" },
   { title: "Virtual Machines", path: "/vm" },
@@ -184,28 +184,8 @@ const seen = (id) => {
   });
 };
 
-async function runSSE() {
-  const token = localStorage.getItem("token");
-  if (!token) return;
-  const response = await fetch("http://localhost:3000/v1/notification/stream", {
-    method: "GET",
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  if (!response.ok) {
-    console.error("Failed to connect to SSE endpoint");
-    return;
-  }
-  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
-  let finished = false;
-  while (!finished) {
-    const { done } = await reader.read();
-    if (done) break;
-  }
-}
 onMounted(async () => {
-  if (!user.value) await getUserInfo;
   getNotifications();
-  runSSE();
 });
 </script>
 

client/src/main.js

@@ -17,7 +17,7 @@ import "mosha-vue-toastify/dist/style.css";
 import mitt from "mitt";
 
 const pinia = createPinia();
-
+import { useUserStore } from "./store/UserStore";
 // Plugins
 import { registerPlugins } from "@/plugins";
 
@@ -31,4 +31,8 @@ app.component("No-Navbar-Layout", NoNavbar);
 
 app.provide("emitter", emitter);
 
-app.use(pinia).use(moshaToast).mount("#app");
+app.use(pinia);
+const store = useUserStore();
+store.startSSE();
+
+app.use(moshaToast).mount("#app");

client/src/services/userService.js

@@ -51,6 +51,12 @@ export default {
       });
   },
 
+  async SSE() {
+    return await authClient().get("/notification/stream", {
+      responseType: "stream",
+    });
+  },
+
   // user
   async getUser() {
     return await authClient().get("/user");

client/src/store/UserStore.js

@@ -7,19 +7,22 @@ export const useUserStore = defineStore("userStore", {
     user: null,
     newUser: null,
     isLoaded: false,
+    notifications: [],
     maintenance: false,
     next_launch: false,
     next_launch_admin: false,
+    isAuthenticated: localStorage.getItem("token"),
   }),
   actions: {
     async login(email, password) {
       try {
         const res = await userService.signIn(email, password);
         const { access_token } = res.data.data;
         localStorage.setItem("token", access_token);
+        this.isLoaded = true;
         return res;
       } catch (error) {
-        return error;
+        if (error) throw error;
       }
     },
     async getUserInfo() {
@@ -31,14 +34,24 @@ export const useUserStore = defineStore("userStore", {
         if (error.response.status == 401) {
           localStorage.removeItem("token");
           router.push("/login");
-          return error
+          return error;
         }
-        return error
+        return error;
       } finally {
         this.isLoaded = true;
       }
     },
 
+    async startSSE() {
+      try {
+        await userService.SSE((notification) => {
+          this.notifications.push(notification);
+        });
+      } catch (error) {
+        console.error("Error starting SSE:", error);
+      }
+    },
+
     async getNextLaunch() {
       try {
         const response = await userService.nextLaunch();