refactor: 消息通知弹框优化

backend/src/main/java/io/metersphere/websocket/NotificationWebSocket.java

@@ -1,9 +1,12 @@
 package io.metersphere.websocket;
 
+import com.alibaba.fastjson.JSON;
 import io.metersphere.base.domain.Notification;
 import io.metersphere.commons.constants.NotificationConstants;
 import io.metersphere.commons.utils.LogUtil;
 import io.metersphere.notice.service.NotificationService;
+import lombok.Builder;
+import lombok.Data;
 import org.springframework.stereotype.Component;
 
 import javax.annotation.Resource;
@@ -98,10 +101,21 @@ public class NotificationWebSocket {
                 notification.setReceiver(userId);
                 notification.setStatus(NotificationConstants.Status.UNREAD.name());
                 int count = notificationService.countNotification(notification);
-                session.getBasicRemote().sendText(count + "");
+                NotificationMessage message = NotificationMessage.builder()
+                        .count(count)
+                        .now(System.currentTimeMillis())
+                        .build();
+                session.getBasicRemote().sendText(JSON.toJSONString(message));
             } catch (Exception e) {
                 LogUtil.error(e.getMessage(), e);
             }
         }
     }
+
+    @Data
+    @Builder
+    public static class NotificationMessage {
+        private Integer count;
+        private Long now;
+    }
 }

frontend/src/business/components/notice/Notification.vue

@@ -62,6 +62,7 @@ export default {
   data() {
     return {
       noticeCount: 0,
+      serverTime: new Date().getTime(),
       taskVisible: false,
       result: {},
       systemNoticeData: [],
@@ -120,13 +121,14 @@ export default {
     onError(e) {
     },
     onMessage(e) {
-      let count = e.data;
-      this.noticeCount = count;
+      let m = JSON.parse(e.data);
+      this.noticeCount = m.count;
+      this.serverTime = m.now;
       this.initIndex++;
-      if (count > 0) {
+      if (this.noticeCount > 0) {
         this.showNotification();
       }
-      if (this.taskVisible && count > 0 && this.initEnd) {
+      if (this.taskVisible && this.noticeCount > 0 && this.initEnd) {
         this.$refs.systemNotice.init();
         this.$refs.mentionedMe.init();
       }
@@ -156,7 +158,7 @@ export default {
     showNotification() {
       this.result = this.$post('/notification/list/all/' + 1 + '/' + 10, {}, response => {
         let data = response.data.listObject;
-        let now = new Date().getTime();
+        let now = this.serverTime;
         data.filter(d => d.status === 'UNREAD').forEach(d => {
           if (now - d.createTime > 10 * 1000) {
             return;