Netty-啓蒙からレンガ運搬まで(完全応用編)(フロントエンドVue編)

バックエンド編:https://lux-sun.blog.csdn.net/article/details/101352493
 
前端編
1、main.jsにthisを割り当てる

// main.js

import websocket from '@/assets/js/websocket'

Vue.prototype.websocket = websocket

2、トップページmountedフック関数で長い接続を開く

// index.vue

mounted () {
    this.websocket.initWebSocket() //      
}

3、すべての業務はここで処理し、他の場所でwebsocketを呼び出す必要はない.jsの関数

// websocket.js

import cookie from '@/assets/js/cookieUtil'
import store from '@/store'
import { Notification } from 'element-ui'
import goodorder from '@/api/goodorderBG'

let websocketURL = 'wss://xxx/websocket'
let heartbeatTime = 20000 // nginx 60s   ，   20s     
let reconnectionTime = 10000 //     10s       
let ws = null
let that = null
let reconnection = true
let reconnectionCount = 0
export default {
  initWebSocket(){
    console.log('   websocket');
    that = this
    if(ws!==null){
      this.closeWebsocket()
    }
    ws = new WebSocket(websocketURL);
    ws.onmessage = this.websocketOnMessage;
    ws.onopen = this.websocketOnOpen;
    ws.onerror = this.websocketOnError;
    ws.onclose = this.websocketClose;
  },
  websocketOnOpen(){ //         send      
    Notification({
      title: '       ',
      message: '          ',
      type: 'success',
      offset: 60 //    
    })
    reconnectionCount = 0
    let account = JSON.parse(cookie.getCookie())
    let actions = {"operand":1, "userId":account.userInfo.userId}
    that.websocketSend(JSON.stringify(actions)) //   userId
    that.initData() //    websocket    
  },
  websocketOnError(){ //         
  },
  websocketOnMessage(e){ //     
    let data = JSON.parse(e.data)
    if(data.status === 1){ // 1：     
      setTimeout(() => {
        that.heartbeat()
      },heartbeatTime) //    
    }else if(data.status === 2) { // 2：             
      let info = JSON.parse(data.data)
      if(info.type === 1){ //       
        store.dispatch('websocket/changeAuditOrderNum',info.data.total)
        Notification({
          title: '               ',
          message: data.msg,
          offset: 60
        });
      }
    }
  },
  websocketSend(data){ //     
    ws.send(data);
  },
  websocketClose(e){ //   
    if(reconnection){
      if(reconnectionCount === 0){
        Notification({
          title: '      ',
          message: '          ',
          type: 'error',
          offset: 60
        })
      }
      setTimeout(() => {
        console.log('    ')
        reconnectionCount += 1
        that.initWebSocket()
      },reconnectionTime) //     
    }else{
      //             true
      console.log('    ')
      reconnection = true
    }
  },
  closeWebsocket(){ //     websocket
    try {
      ws.close()
      ws = null
    }catch (e) { }
  },
  heartbeat(){
    let actions = {"operand":2};
    this.websocketSend(JSON.stringify(actions));
  },
  setReconnection(rc){ //        ，   false
    reconnection = rc
  },
  initData(){
    //        
    goodorder.getTempGoodorderCount(
      {
        status: 0,
        type: 0
      }
    ).then(res => {
      if(res.success){
        store.dispatch('websocket/changeAuditOrderNum',res.data)
      } else if (res.nullwarn) {
        store.dispatch('websocket/changeAuditOrderNum',0)
      } else {
        this.$message({ type: 'error', message: res.msg })
      }
    }).catch(error => {
      if(error !== 'noLogin'){
        this.$message({ type: 'error', message: '    ' })
      }
    })
  }
}

4、ここではVuexを使っています.ちょっと見てみましょう.

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', false, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules
})

export default store

// store/modules/websocket.js

const state = {
  tempOrderNum: 0,
  noticeNum: 0
}

const mutations = {
  changeTempOrderNum: (state,num) => {
    state.tempOrderNum = num
    state.noticeNum = state.tempOrderNum
  }
}

const actions = {
  changeTempOrderNum({ commit },num) {
    commit('changeTempOrderNum',num)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}