接口接入

src/layout/top.vue

@@ -142,9 +142,98 @@ export default {
         this.mini = false
       }
     })
+    this.initWebSocket()
+  },
+  unmounted() {
+    this.websock.close() // 离开路由之后断开websocket连接
   },
   methods: {
-    config,
+    initWebSocket() {
+      const wsuri = 'ws:192.168.31.83:8200/websocket/' + this.user.info.userId
+      this.websock = new WebSocket(wsuri)
+      this.websock.onmessage = this.websocketonmessage
+      // 连接建立时触发
+      this.websock.onopen = this.websocketonopen
+      // 通信发生错误时触发
+      this.websock.onerror = this.websocketonerror
+      // 连接关闭时触发
+      this.websock.onclose = this.websocketclose
+    },
+    websocketonopen() {
+      // 开启心跳
+      this.start()
+      // 连接建立之后执行send方法发送数据
+      // let actions = {"room":"007854ce7b93476487c7ca8826d17eba","info":"1121212"};
+      // this.websocketsend(JSON.stringify(actions));
+    },
+    // 通信发生错误时触发
+    websocketonerror() {
+      console.log('出现错误')
+      this.reconnect()
+    },
+    // 客户端接收服务端数据时触发
+    websocketonmessage(e) {
+      console.log(e.data)
+      // 收到服务器信息，心跳重置
+      this.reset()
+    },
+    websocketsend(Data) {
+      // 数据发送
+      this.websock.send(Data)
+    },
+    // 连接关闭时触发
+    websocketclose(e) {
+      // 关闭
+      console.log('断开连接', e)
+      // 重连
+      this.reconnect()
+    },
+    reconnect() {
+      // 重新连接
+      const that = this
+      if (that.lockReconnect) {
+        return
+      }
+      that.lockReconnect = true
+      // 没连接上会一直重连，设置延迟避免请求过多
+      that.timeoutnum && clearTimeout(that.timeoutnum)
+      that.timeoutnum = setTimeout(function () {
+        // 新连接
+        that.initWebSocket()
+        that.lockReconnect = false
+      }, 5000)
+    },
+    reset() {
+      // 重置心跳
+      const that = this
+      // 清除时间
+      clearTimeout(that.timeoutObj)
+      clearTimeout(that.serverTimeoutObj)
+      // 重启心跳
+      that.start()
+    },
+    start() {
+      // 开启心跳
+      console.log('开启心跳')
+      const self = this
+      self.timeoutObj && clearTimeout(self.timeoutObj)
+      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
+      self.timeoutObj = setTimeout(function () {
+        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
+        if (self.ws.readyState === 1) {
+          // 如果连接正常
+          // self.ws.send("heartCheck"); //这里可以自己跟后端约定
+        } else {
+          // 否则重连
+          self.reconnect()
+        }
+        self.serverTimeoutObj = setTimeout(function () {
+          // 超时关闭
+          self.ws.close()
+        }, self.timeout)
+      }, self.timeout)
+    },
+
     dropDown(res) {
       if (res === 'info') {
         this.$router.push('/user')