Netty - 从启蒙到搬砖（完整应用篇）（前端 Vue 篇）_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
}