websocket

src/views/components/WarehouseWarning.vue

@@ -31,9 +31,13 @@ export default {
   },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      timeout: 1000
     }
   },
+  created() {
+    this.initWebSocket()
+  },
   mounted() {
     this.getData()
     console.log(11333)
@@ -104,15 +108,129 @@ export default {
           }
         }
       }, 1000 * 3 * this.scollNum)
+    },
+    initWebSocket() {
+      const wsUri = process.env.VUE_APP_WS_API + '/webSocket'
+      this.websock = new WebSocket(wsUri)
+      this.websock.onerror = this.webSocketOnError
+      this.websock.onmessage = this.webSocketOnMessage
+    },
+    webSocketOnError(e) {
+      this.$notify({
+        title: 'WebSocket连接发生错误',
+        type: 'error',
+        duration: 0
+      })
+    },
+    webSocketOnMessage(e) {
+      const data = JSON.parse(e.data)
+      console.log(data)
+      if (data.msgType === 'INFO') {
+        this.$notify({
+          title: '',
+          message: data.msg,
+          type: 'success',
+          dangerouslyUseHTMLString: true,
+          duration: 5500
+        })
+      } else if (data.msgType === 'ERROR') {
+        this.$notify({
+          title: '',
+          message: data.msg,
+          dangerouslyUseHTMLString: true,
+          type: 'error',
+          duration: 0
+        })
       }
+    },
+    webSocketSend(agentData) {
+      this.websock.send(agentData)
+    }
+    // initWebSocket() {
+    //   // if (WebSocket in window) {
+    //   // 初始化weosocket
+    //   const wsUri = process.env.VUE_APP_WS_API + '/webSocket'
+    //   this.websocket = null
+    //   this.websocket = new WebSocket(wsUri)
+    //   this.websocket.onopen = this.websocketonopen
+    //   this.websocket.onerror = this.websocketonerror
+    //   this.websocket.onmessage = this.websocketonmessage
+    //   this.websocket.onclose = this.websocketclose
+    //   // } else {
+    //   //   // 浏览器不支持 WebSocket
+    //   //   console.log('您的浏览器不支持 WebSocket!')
+    //   // }
+    // },
+    // websocketonopen() {
+    //   this.start()
+    // },
+    // start() {
+    //   // 开启心跳
+    //   const that = this
+    //   that.timeoutObj && clearTimeout(that.timeoutObj)
+    //   that.timeoutObj = setTimeout(function() {
+    //     // 这里发送一个心跳，后端收到后，返回一个心跳消息，
+    //     if (that.websocket && that.websocket.readyState === 1) {
+    //       // 如果连接正常
+    //       console.log('WebSocket连接成功')
+    //       that.websocket.send('----timingHeart---')
+    //     } else { // 否则重连
+    //       that.reconnect()
+    //     }
+    //   }, that.timeout)
+    // },
+    // reconnect() { // 重新连接
+    //   console.log('重新连接')
+    //   const that = this
+    //   if (that.websocket && that.websocket.readyState === 1) {
+    //     clearInterval(that.timeoutnum)
+    //     that.timeoutnum = null
+    //     that.timeNum = 0
+    //     return
+    //   }
+    //   if (!that.timeoutnum) {
+    //     that.timeoutnum = setInterval(function() {
+    //       if (that.websocket && that.websocket.readyState === 1) {
+    //         clearInterval(that.timeoutnum)
+    //         that.timeoutnum = null
+    //         that.timeNum = 0
+    //         return
+    //       }
+    //       // 新连接
+    //       that.initWebSocket()
+    //       that.timeNum++
+    //       if (that.timeNum >= 3) {
+    //         clearInterval(that.timeoutnum)
+    //         that.timeoutnum = null
+    //         that.timeNum = 0
+    //       }
+    //     }, 1000)
+    //   }
+    // },
+    // websocketonerror(e) {
+    //   // 错误
+    //   // this.initWebSocket()
+    //   console.log('WebSocket连接发生错误')
+    // },
+    // websocketonmessage(e) {
+    //   // 数据接收
+    //   var data = JSON.parse(e.data)
+    //   // this.$store.commit('SET_ws', data)
+    //   console.log('接收数据', data)
+    //   // 操作处理...
+    // },
+    // websocketclose(e) {
+    //   // 关闭
+    //   this.websocket && this.websocket.close && this.websocket.close()
+    // }
   }
 }
 </script>
 <style lang="scss" scoped>
-@import '~@/assets/styles/lend-manage.scss';
-.warehouse-left{
+@import "~@/assets/styles/lend-manage.scss";
+.warehouse-left {
   position: relative;
-  h2{
+  h2 {
     position: absolute;
     left: 50%;
     top: 0;

src/views/storeManage/warehouse3D/index.vue

@@ -101,7 +101,7 @@ export default {
     },
     initWebSocket() {
       // 初始化weosocket
-      const url = 'ws://192.168.99.65:7070/webSocket/testname'
+      const url = 'ws://192.168.99.65:7071/webSocket'
       const wsuri = url // ws地址
       this.websocket = new WebSocket(wsuri)
       this.websocket.onopen = this.websocketonopen
@@ -127,6 +127,7 @@ export default {
     },
     websocketonmessage(e) {
       // 数据接收
+      console.log(e.data)
       var data = JSON.parse(e.data)
       this.$store.commit('SET_ws', data)
       console.log('接收数据')