⬆️ Fix notification listen

.idea/workspace.xml

@@ -4,14 +4,8 @@
     <option name="autoReloadType" value="ALL" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="3fefb2c4-b6f9-466b-a523-53352e8d6f95" name="更改" comment=":sparkles: Recommend app component">
+    <list default="true" id="3fefb2c4-b6f9-466b-a523-53352e8d6f95" name="更改" comment=":bug: Bug fixes">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/web/src/stores/notifications.ts" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/stores/notifications.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/pkg/internal/services/ticket.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/internal/services/ticket.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/settings.toml" beforeDir="false" afterPath="$PROJECT_DIR$/settings.toml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/web/src/components/UserMenu.vue" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/components/UserMenu.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/web/src/components/auth/FactorPicker.vue" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/components/auth/FactorPicker.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/web/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/router/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/web/src/stores/userinfo.ts" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/stores/userinfo.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -151,7 +145,6 @@
   <component name="VcsManagerConfiguration">
     <MESSAGE value=":sparkles: Firebase is back" />
     <MESSAGE value=":sparkles: Apple push notification services" />
-    <MESSAGE value=":bug: Bug fixes" />
     <MESSAGE value=":bug: Bug fix and fix" />
     <MESSAGE value=":bug: Fix APNs non-production" />
     <MESSAGE value=":bug: Bug fixes on notification badges for APNs" />
@@ -174,7 +167,8 @@
     <MESSAGE value=":wastebasket: Remove the personal page" />
     <MESSAGE value=":recycle: OAuth authenticate" />
     <MESSAGE value=":sparkles: Recommend app component" />
-    <option name="LAST_COMMIT_MESSAGE" value=":sparkles: Recommend app component" />
+    <MESSAGE value=":bug: Bug fixes" />
+    <option name="LAST_COMMIT_MESSAGE" value=":bug: Bug fixes" />
   </component>
   <component name="VgoProject">
     <settings-migrated>true</settings-migrated>

web/src/stores/notifications.ts

@@ -1,64 +1,66 @@
-import { defineStore } from "pinia";
+import { defineStore } from "pinia"
-import { ref } from "vue";
+import { ref } from "vue"
-import { checkLoggedIn, getAtk } from "@/stores/userinfo";
+import { checkLoggedIn, getAtk } from "@/stores/userinfo"
-import { request } from "@/scripts/request";
+import { request } from "@/scripts/request"
 
 export const useNotifications = defineStore("notifications", () => {
-  let socket: WebSocket;
+  let socket: WebSocket
 
-  const loading = ref(false);
+  const loading = ref(false)
 
-  const notifications = ref<any[]>([]);
+  const notifications = ref<any[]>([])
   const total = ref(0)
 
   async function list() {
-    loading.value = true;
+    loading.value = true
     const res = await request(
       "/api/notifications?" +
       new URLSearchParams({
         take: (25).toString(),
-        offset: (0).toString()
+        offset: (0).toString(),
       }),
       {
-        headers: { Authorization: `Bearer ${getAtk()}` }
+        headers: { Authorization: `Bearer ${getAtk()}` },
-      }
+      },
-    );
+    )
     if (res.status === 200) {
-      const data = await res.json();
+      const data = await res.json()
-      notifications.value = data["data"];
+      notifications.value = data["data"]
-      total.value = data["count"];
+      total.value = data["count"]
     }
-    loading.value = false;
+    loading.value = false
   }
 
   function remove(idx: number) {
     notifications.value.splice(idx, 1)
-    total.value--;
+    total.value--
   }
 
   async function connect() {
-    if (!(checkLoggedIn())) return;
+    if (!(checkLoggedIn())) return
 
-    const uri = `ws://${window.location.host}/api/ws`;
+    const uri = `ws://${window.location.host}/api/ws`
 
-    socket = new WebSocket(uri + `?tk=${getAtk() as string}`);
+    socket = new WebSocket(uri + `?tk=${getAtk() as string}`)
 
     socket.addEventListener("open", (event) => {
-      console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type);
+      console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type)
-    });
+    })
     socket.addEventListener("close", (event) => {
-      console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code);
+      console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code)
-    });
+    })
     socket.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data);
+      const data = JSON.parse(event.data)
-      notifications.value.push(data);
+      if (data["w"] == "notifications.new") {
-      total.value++;
+        notifications.value.push(data["p"])
-    });
+        total.value++
+      }
+    })
   }
 
   function disconnect() {
-    socket.close();
+    socket.close()
   }
 
-  return { loading, notifications, total, list, remove, connect, disconnect };
+  return { loading, notifications, total, list, remove, connect, disconnect }
-});
+})