websocket.js

src/mock/modules/common.js

@@ -9,7 +9,7 @@ export function login () {
     data: {
       'msg': 'success',
       'code': 0,
-      'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
+      'expire': Mock.Random.natural(60 * 60, 60 * 60 * 12),
       'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
     }
   }

src/store/modules/websocket.js

@@ -1,13 +1,110 @@
 const userId = localStorage.getItem('userId')
 const randomNum = localStorage.getItem('randomNum')
+
 export default {
   namespaced: true,
   state: {
-    webSocket: new WebSocket('ws://112.74.164.79:10088/web_socket/' + userId + '_' + randomNum)
+    websock: null,
+    url: 'ws://112.74.164.79:10088/web_socket/' + userId + '_' + randomNum,
+    lockReconnect: false, // 是否真正建立连接
+    timeout: 25 * 1000, // 25秒一次心跳
+    timeoutObj: null, // 心跳心跳倒计时
+    serverTimeoutObj: null, // 心跳倒计时
+    timeoutnum: null, // 断开 重连倒计时
+    message: {}
+  },
+  getters: {
+    message (state) {
+      return state.message
+    }
   },
   mutations: {
-    setWebSocket (state, items) {
-      state.webSocket = items
+    WEBSOCKET_INIT (state, url) {
+      const that = this
+      state.websock = new WebSocket(url)
+      state.url = url
+      state.websock.onopen = function () {
+        console.log('连接成功') // 发送用户JWT令牌 后端解析后自动绑定用户
+        // state.websock.send('id:123')
+        // state.websock.send('OpenBarScanner')
+        // 发送心跳包
+        that.commit('websocket/start')
+      }
+      state.websock.onmessage = function (callBack) {
+        // console.log(callBack.data)
+        // 重置心跳
+        // console.log(callBack.data)
+        that.commit('websocket/reset')
+        if (callBack.data === 'heartCheck') {
+          return
+        }
+        state.message = callBack.data
+      }
+      state.websock.οnerrοr = function () { // e错误
+        // console.log(e)
+        that.commit('websocket/reconnect')
+      }
+      state.websock.onclose = function () { // e关闭
+        // console.log(e)
+        that.commit('websocket/reconnect')
+      }
+    },
+    WEBSOCKET_SEND (state, message) {
+      state.websock.send(message)
+    },
+    reconnect (state) { // 重新连接
+      // console.log("重新连接")
+      var that = this
+      if (state.lockReconnect) {
+        return
+      }
+      state.lockReconnect = true
+      // 没连接上会一直重连，设置延迟避免请求过多
+      state.timeoutnum && clearTimeout(state.timeoutnum)
+      state.timeoutnum = setTimeout(function () {
+        // 新连接
+        that.commit('websocket/WEBSOCKET_INIT', state.url)
+        state.lockReconnect = false
+      }, 5000)
+    },
+    reset (state) { // 重置心跳
+      // 清除时间
+      clearTimeout(state.timeoutObj)
+      clearTimeout(state.serverTimeoutObj)
+      // 心跳
+      this.commit('websocket/start')
+    },
+    start (state) { // 开启心跳
+      // console.log("开启心跳")
+      var that = this
+      state.timeoutObj && clearTimeout(state.timeoutObj)
+      state.serverTimeoutObj && clearTimeout(state.serverTimeoutObj)
+      state.timeoutObj = setTimeout(function () {
+        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
+        // console.log(state.websock)
+        if (state.websock.readyState === 1) { // 如果连接正常
+          state.websock.send('heartCheck')
+        } else { // 否则重连
+          that.commit('websocket/reconnect')
+        }
+        state.serverTimeoutObj = setTimeout(function () {
+          // 超时关闭
+          state.websock.close()
+        }, state.timeout)
+      }, state.timeout)
+    }
+  },
+  actions: {
+    WEBSOCKET_INIT ({
+      commit
+    }, url) {
+      commit('WEBSOCKET_INIT', url)
+    },
+    WEBSOCKET_SEND ({
+      commit
+    }, message) {
+      commit('WEBSOCKET_SEND', message)
     }
+
   }
 }