feat: 支付成功websocket通知

.env.development

-VUE_APP_URL = 'http://localhost:8297/'
\ No newline at end of file
+VUE_APP_URL = 'http://localhost:8297/'
+VUE_APP_WEBSOCKET = 'ws://localhost:8297/websocket'
\ No newline at end of file

src/store/modules/user.js

 import Vue from 'vue'
-import {getInfo, login} from "@/api/common/login"
-import {ACCESS_TOKEN, BEARER} from "@/store/mutation-types"
+import { getInfo, login } from "@/api/common/login"
+import { ACCESS_TOKEN, BEARER } from "@/store/mutation-types"
+import SocketService from '@/util/websocket'
 
 const user = {
   state: {
@@ -12,6 +13,7 @@ const user = {
     roles: [],
     info: {},
     buttons: null,
+    websocket: null,
   },
 
   mutations: {
@@ -33,11 +35,14 @@ const user = {
     SET_BUTTONS: (state, buttons) => {
       state.buttons = buttons
     },
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    }
   },
 
   actions: {
     // 登录
-    Login({commit}, userInfo) {
+    Login({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
         login(userInfo).then(response => {
           if (response.code == SYS_CONST.REQUEST.SUCCEED) {
@@ -57,7 +62,7 @@ const user = {
       })
     },
     // 获取用户信息
-    GetInfo({commit}) {
+    GetInfo({ commit }) {
       return new Promise((resolve, reject) => {
         getInfo().then(response => {
           let data = response.data;
@@ -74,6 +79,9 @@ const user = {
           commit('SET_AVATAR', data.userInfo.avatar);
           commit('SET_BUTTONS', buttonAuthList);
 
+          SocketService.init(data.userInfo.id)
+
+
           resolve(response)
         }).catch(error => {
           reject(error)
@@ -82,7 +90,7 @@ const user = {
     },
 
     // 登出
-    Logout({commit}) {
+    Logout({ commit }) {
       return new Promise((resolve) => {
         commit('SET_TOKEN', '');
         commit('SET_ROLES', []);

src/util/websocket.js

+import store from '@/store'
+import { notification } from 'ant-design-vue'
+
+export default class SocketService {
+  static webSocket = null
+  static reConnectTimeout = 1000
+  static init(userId) {
+    const ws = new WebSocket(`${process.env.VUE_APP_WEBSOCKET}?userId=${userId}`)
+
+    this.reConnectTimeout = 1000
+    ws.onmessage = this.onmessage
+    ws.onerror = this.onerror
+    ws.onclose = this.onclose
+    ws.onopen = this.onopen
+
+    this.webSocket = ws
+
+    store.commit('SET_WEBSOCKET', ws)
+
+    return ws
+  }
+
+  static onclose() {
+    console.info('连接关闭')
+  }
+
+  static onopen() {
+    console.info('连接建立')
+  }
+
+  static onerror() {
+    console.info('连接发生错误')
+    store.commit('SET_WEBSOCKET', null)
+  }
+
+  static reconnect() {
+    this.webSocket = null
+    setTimeout(() => {
+      console.info('reconnect at ', new Date())
+      this.init(store.getters.userInfo.id)
+      this.reConnectTimeout = this.reConnectTimeout + 5000
+    }, this.reConnectTimeout)
+  }
+
+
+
+  static onmessage(e) {
+    console.info('from server', e)
+    const { data } = e
+    if (data == 1) {
+      notification.open({
+        message: '消息提醒',
+        description: '用户已支付，请派单',
+        key: 'orderNotification',
+        btn: h => {
+          return h(
+            'a-button',
+            {
+              props: {
+                type: 'primary',
+                size: 'small',
+              },
+              on: {
+                click: () => this.$notification.close('orderNotification'),
+              },
+            },
+            '确定',
+          );
+        },
+      });
+    }
+  }
+}
+
+
+// 心跳检测
+// eslint-disable-next-line no-unused-vars
+const heartCheck = {
+  interval: 60000,
+  intervalObj: null,
+  start: function () {
+    console.log('start heart check');
+    this.intervalObj && clearInterval(this.intervalObj);
+    this.intervalObj = setInterval(function () {
+      //发送测试信息，后端收到后，返回一个消息，
+      console.info('heart beat check')
+      SocketService.webSocket.send('hello');
+    }, this.interval)
+  }
+}
\ No newline at end of file

src/views/system/Login.vue

@@ -180,7 +180,6 @@ export default {
             this.$store
               .dispatch("GenerateRoutes", initRouterTree(menuList))
               .then(() => {
-                console.info('this.$store.getters.addRouters', this.$store.getters.addRouters)
                 this.$router.addRoutes(this.$store.getters.addRouters);
                 let redirectPath = this.$route.query.redirect;
                 if (redirectPath) {