socket封装使用 vue

1、根目录permission.js

import VueSocketIO from "vue-socket.io";

import { getToken } from '@/utils/auth'

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then((res) => {
          if(res.data.user.personId){
            Vue.use(
              new VueSocketIO({
                connection: `${socketUrl}?personId=${res.data.user.personId}`,
                vuex: {
                  store,
                  mutationPrefix: "SOCKET_",
                  actionPrefix: "SOCKET_",
                },
                  options: { transports: ['websocket'] }
              })
            );
          }
          isRelogin.show = false
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
            store.dispatch('FedLogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
            })
          })
      } else {
        burying(to?.meta?.icon,to?.path,to?.meta?.title)
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      burying(to?.meta?.icon,to?.path,to?.meta?.title)
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

2、vuex同步方法 mutations 中监听socket

import { Notification } from 'element-ui';

import { getToken, setToken, removeToken } from '@/utils/auth'

mutations: {
    SET_STRENGTH:(state,strength)=>{
      state.strength=strength
    },
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    },
    SET_TODO: (state, todo) => {
      state.todos = todo
    },
    // 告警
　　类型：alarm

    SOCKET_alarm:(state,alarmdata)=>{
      const {receive,record,voiceBase64} = alarmdata
      // 区域看板页面。不弹框
      const noTip = ['/monitor/visualization/region','/largeScreen','/jobBoard']
      if(noTip.includes(Router.currentRoute.path)){
        state.alarmData = {receive,record}
      }else{//大屏不弹框
        let message = `<div>${receive.alarmContent}</div>`
        if(record.algorithmType == 2){
          message += `<img src='${record.alarmValue}' style='width:100%;margin-top:5px' />`
        }else if(record.algorithmType == 1){
          message = `<div>${receive.alarmContent} ${record.alarmValue}</div>`
        }
        Notification({
          title:record.ruleName,
          duration: 1000 * 20,
          dangerouslyUseHTMLString:true,
          iconClass:record.algorithmType == 1 ? 'el-icon-odometer' : 'el-icon-video-camera-solid',
          message,
          onClick:function(){
            Router.push({path:'/monitor/alarm/alarmList'})
          }
        })
      }
      // 语音播报
      var Sound = (function () {
          var df = document.createDocumentFragment();
          return function Sound(src) {
              var snd = new Audio(src);
              df.appendChild(snd);
              snd.addEventListener('ended', function () {df.removeChild(snd);});
              snd.play();
              return snd;
          }
      }());
      Sound(voiceBase64)
      // let speaker = new window.SpeechSynthesisUtterance()
      // let speakTimer
      // clearTimeout(speakTimer)
      // window.speechSynthesis.cancel()
      // if(os ==='windows'){
      //   speakTimer = setTimeout(function() {
      //     speaker.volume = 1
      //     speaker.pitch = 1
      //     speaker.rate = 0.8
      //     speaker.text = receive.alarmContent
      //     window.speechSynthesis.speak(speaker)
      //   }, 200)
      // }else{
      //   speakTimer = setTimeout(function() {
      //     speaker.volume = 0.9
      //     speaker.rate = 0.8
      //     speaker.text = receive.alarmContent
      //     window.speechSynthesis.speak(speaker)
      //   }, 200)
      // }
    }
  },