asan-service/mixins/WS_Admin.js

import { io } from 'socket.io/client-dist/socket.io'
export default {
  data() {
    return {
      adminNotificationOffset: 60
    }
  },
  computed: {
    userIsLoggedIn() {
      return this.$auth.loggedIn
    },
    adminWS: {
      get() {
        return this.$store.state.admin.adminWS
      },
      set(val) {
        this.$store.commit('front/set', ['adminWS', val])
      }
    }
  },
  methods: {
    initAdminWS() {
      this.adminWS = true

      /// /////////////////////////////////////////// connetct to ws server
      const socket = io(`${this.$config.WebSocketURL}/admin`, {
        reconnectionDelay: 20000,
        reconnectionDelayMax: 20000,
        auth: {
          token: this.$auth.strategy.token.get()
        }
      })

      /// /////////////////////////////////////////// connection error

      socket.on('connect_error', () => {
        this.$notify({
          type: 'error',
          title: 'خطا',
          message: 'دریافت اعلانات ادمین با مشکل مواجه شد',
          position: 'top-left',
          offset: this.adminNotificationOffset
          // duration: 0
        })
      })

      /// /////////////////////////////////////////// events
      socket.on('connect', () => {
        // console.log('**************** You have access to admin notifications')
      })

      socket.on(`admin:allNotifs`, data => {
        this.$store.commit('admin/set', ['unreadCuMsgs', data.unreadCuMsgs])
        this.$store.commit('admin/set', ['unreadTickets', data.unreadTickets])
        this.$store.commit('admin/set', ['newCustomers', data.newCustomers])
        this.$store.commit('admin/set', ['newRepresentations', data.newRepresentations])
        this.$store.commit('admin/set', ['newPieceRequests', data.newPieceRequests])
        this.$store.commit('admin/set', ['newOldPieceRequests', data.newOldPieceRequests])
        this.$store.commit('admin/set', ['newBufferRequests', data.newBufferRequests])
        this.$store.commit('admin/set', ['newGuaranteeReports', data.newGuaranteeReports])
        
        this.$store.commit('admin/set', ['newComplaintReports', data.newComplaintReports])
        this.$store.commit('admin/set', ['newWithdrawRequest', data.newWithdrawRequest])
        this.$store.commit('admin/set', ['pendingUsers', data.pendingUsers])
        this.$store.commit('admin/set', ['newAwardRequest', data.newAwardRequest])
        this.$store.commit('admin/set', ['newInstallDeviceRequest', data.newInstallDeviceRequest])
      })

      socket.on(`admin:notify`, data => {
        if (data.type === 'newAwardRequest') {
          // update store
          this.$store.commit('admin/set', ['newAwardRequest', data.newAwardRequest])

          // update DOM
          if (this.$route.name === 'admin-gps-award-req') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'newInstallDeviceRequest') {
          // update store
          this.$store.commit('admin/set', ['newInstallDeviceRequest', data.newInstallDeviceRequest])

          // update DOM
          if (this.$route.name === 'admin-gps-installed-device') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'newWithdrawRequest') {
          // update store
          this.$store.commit('admin/set', ['newWithdrawRequest', data.newWithdrawRequest])

          // update DOM
          if (this.$route.name === 'admin-gps-withdraw') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'updateNewCustomers') {
          // update store
          this.$store.commit('admin/set', ['updateNewCustomers', data.updateNewCustomers])

          // update DOM
          if (this.$route.name === 'admin-gps-users') {
            this.$nuxt.refresh()
          }
        }


        if (data.type === 'updateUnreadCuMsgs') {
          // update store
          this.$store.commit('admin/set', ['unreadCuMsgs', data.unreadCuMsgs])

          // update DOM
          if (this.$route.name === 'admin-contact-us') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'updateUnreadTickets') {
          // update store
          this.$store.commit('admin/set', ['unreadTickets', data.unreadTickets])

          // update DOM
          if (this.$route.name === 'admin-tickets') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'newTicketMsg') {
          if (this.$route.name === 'admin-tickets-ticket') {
            this.$nuxt.refresh()
            setTimeout(() => {
              window.scrollTo(0, document.body.scrollHeight)
            }, 500)
          }
        }

        if (data.type === 'updateNewCustomers') {
          this.$store.commit('admin/set', ['newCustomers', data.newCustomers])
        }

        if (data.type === 'updateNewRepresentations') {
          // update store
          this.$store.commit('admin/set', ['newRepresentations', data.newRepresentations])

          // update DOM
          if (this.$route.name === 'admin-representations') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'updateNewPieceRequests') {
          // update store
          this.$store.commit('admin/set', ['newPieceRequests', data.newPieceRequests])

          // update DOM
          if (this.$route.name === 'admin-piece-requests') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'updateNewOldPieceRequests') {
          // update store
          this.$store.commit('admin/set', ['newOldPieceRequests', data.newOldPieceRequests])

          // update DOM
          if (this.$route.name === 'admin-op-requests') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'updateNewBufferRequests') {
          // update store
          this.$store.commit('admin/set', ['newBufferRequests', data.newBufferRequests])

          // update DOM
          if (this.$route.name === 'admin-buffer-requests') {
            this.$nuxt.refresh()
          }
        }

        if (data.type === 'updateNewGuaranteeReports') {
          // update store
          this.$store.commit('admin/set', ['newGuaranteeReports', data.newGuaranteeReports])

          // update DOM
          if (this.$route.name === 'admin-quarantee-reports') {
            this.$nuxt.refresh()
          }
        }
      })
    }
  },
  mounted() {
    if (this.userIsLoggedIn && !this.adminWS) {
      this.initAdminWS()
    }
  }
}