esua-epdc-admin/src/views/main-sidebar.vue

<template>
  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
    <div class="aui-sidebar__inner">
      <el-menu :default-active="$store.state.sidebarMenuActiveName"
               :collapse="$store.state.sidebarFold"
               :unique-opened="true"
               :collapseTransition="false"
               class="aui-sidebar__menu">
        <sub-menu v-for="menu in $store.state.sidebarMenuList"
                  :key="menu.id"
                  :menu="menu" />
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
import Cookies from 'js-cookie'

export default {
  data () {
    return {
      pid: '',
      parentPid: '',
      socket: '',
      stompClient: ''
    }
  },
  components: {
    SubMenu
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    const routeList = this.$store.state.sidebarMenuList
    const selectList = [{
      selectId: '1169180106757378049',
      num: 3
    }, {
      selectId: '1169486622820143105',
      num: 4
    }]
    selectList.forEach(selectRoute => {
      this.filterRoute(routeList, selectRoute)
    })
    console.log(routeList)
    this.initWebSocket()
  },
  methods: {
    filterRoute (routeList, selectRoute) {
      routeList.forEach((item, index) => {
        if (item.children && item.children.length >= 1) {
          this.filterRoute(item.children, selectRoute)
        } else {
          if (item.id === selectRoute.selectId) {
            console.log(item.pid)
            item.num = selectRoute.num
            this.pid = item.pid
          }
        }
      })
      routeList.forEach(item => {
        if (item.children && item.children.length >= 1) {
          if (item.id === this.pid) {
            item.redPoint = true
            if (parseInt(item.pid) !== 0) {
              this.parentPid = item.pid
            }
          }
        }
      })
      routeList.forEach(item => {
        if (item.id === this.parentPid) {
          item.redPoint = true
        }
      })
    },
    initWebSocket () {
      this.connection()
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          this.stompClient.send('alive')
        } catch (err) {
          console.log('断线了: ' + err)
          this.connection()
        }
      }, 5000)
    },
    connection () {
      // 建立连接对象
      this.socket = new SockJS('http://219.146.91.110:9094/epdc-api/ws/menuNoticeEndpoint')// 连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息，注意这里用的是http而不是原生WebSocket的ws

      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(this.socket)

      // 定义客户端的认证信息,按需求配置
      let token = Cookies.get('token') || ''
      console.log('token: ' + token)
      let headers = {
        'token': token
      }
      // 向服务器发起websocket连接
      this.stompClient.connect(headers, this.onConnected, this.onFailed)
    },
    onConnected: function (frame) {
      console.log('Connected: ' + frame)
      // let topic = '/menuNoticeTopic/getResponse'
      let topic2 = '/userMenuNotice/menuNoticeQueue/menu/getResponse'
      // this.stompClient.subscribe(topic, this.onSubscribe)
      this.stompClient.subscribe(topic2, this.onSubscribe2)
    },
    // onSubscribe (value) {
    //   console.log('subscribe', value)
    // },
    onSubscribe2 (value) {
      console.log('subscribe2', value)
    },
    onFailed (frame) {
      console.log('Failed: ' + frame)
    },
    disconnect () {
      if (this.stompClient != null) {
        this.stompClient.disconnect()
        console.log('Disconnected')
      }
    }
  }
}
</script>