Browse Source

6.29添加心跳包

liuqiao 2 years ago
parent
commit
28db20d178
3 changed files with 57 additions and 48 deletions
  1. 1 0
      .env.development
  2. 4 4
      src/views/index/compoents/tool1.vue
  3. 52 44
      src/views/index/index.vue

+ 1 - 0
.env.development

@@ -7,5 +7,6 @@ ENV = 'development'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_API = '/api'
 
 
 VUE_APP_BASE_websokt = '/192.168.0.43'
 VUE_APP_BASE_websokt = '/192.168.0.43'
+//VUE_APP_BASE_websokt = '/www.adicn.com'
 
 
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

+ 4 - 4
src/views/index/compoents/tool1.vue

@@ -13,12 +13,12 @@
                          <el-image :src="item.icon" fit="cover" /> 
                          <el-image :src="item.icon" fit="cover" /> 
                     </el-tooltip>
                     </el-tooltip>
                  </div>
                  </div>
-                  <span class="shu">|</span>
+                  <!-- <span class="shu">|</span>
                         <div class="item1"  v-for="(item,index) in toollist3"  :key="'tl3-'+ index"  :class="{activeOrange1:active=='tl3-'+ index}" @click="meshclick($event,index,'tl3-'+ index)">
                         <div class="item1"  v-for="(item,index) in toollist3"  :key="'tl3-'+ index"  :class="{activeOrange1:active=='tl3-'+ index}" @click="meshclick($event,index,'tl3-'+ index)">
                      <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                      <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                          <el-image :src="item.icon" fit="cover" /> 
                          <el-image :src="item.icon" fit="cover" /> 
                     </el-tooltip>
                     </el-tooltip>
-                 </div>
+                 </div> -->
                   <span class="shu">|</span>
                   <span class="shu">|</span>
                            <div class="item1"  v-for="(item,index) in toollist4"   :key="'tl4-'+ index"  :class="{activeOrange2:active=='tl4-'+ index}" :tabIndex="index" @click="meshclick($event,index,'tl4-'+ index)">
                            <div class="item1"  v-for="(item,index) in toollist4"   :key="'tl4-'+ index"  :class="{activeOrange2:active=='tl4-'+ index}" :tabIndex="index" @click="meshclick($event,index,'tl4-'+ index)">
                      <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                      <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
@@ -76,8 +76,8 @@ export default {
             toollist2:[
             toollist2:[
              { icon:tl3, titlie:'默认鼠标控制'},
              { icon:tl3, titlie:'默认鼠标控制'},
              { icon:tl4, titlie:'缩小到窗口'},
              { icon:tl4, titlie:'缩小到窗口'},
-             { icon:tl5, titlie:'轨道'},
-             { icon:tl6, titlie:'pan'},
+            //  { icon:tl5, titlie:'轨道'},
+            //  { icon:tl6, titlie:'pan'},
              { icon:tl7, titlie:'zoom'},
              { icon:tl7, titlie:'zoom'},
              { icon:tl17, titlie:'折线图'},
              { icon:tl17, titlie:'折线图'},
            ],
            ],

+ 52 - 44
src/views/index/index.vue

@@ -503,7 +503,11 @@ linezhexian(num){
           if(canshu==''){
           if(canshu==''){
             setTimeout(function(){
             setTimeout(function(){
             that.initWebSocket();
             that.initWebSocket();
-        },500)
+             // this.startimg("init",'loaddata');
+        },300)
+           setTimeout(function(){
+               that.startimg("init",'loaddata');
+        },1000)
             }
             }
            })   
            })   
         }else if(val=='FEMLab(结构力学)'){
         }else if(val=='FEMLab(结构力学)'){
@@ -713,43 +717,48 @@ let params = {
   },
   },
     // 心跳包
     // 心跳包
 reconnect(){
 reconnect(){
-  // var that=this;
-  //   if(that.lockReconnect) return;
-  //   that.lockReconnect = true;
-  //   //没连接上会一直重连,设置延迟避免请求过多
-  //   that.timeoutnum&&clearTimeout(that.timeoutnum);
-  //   that.timeoutnum= setTimeout(function () {
-  //     //新连接
-  //     this.initWebSocket();
-  //     that.lockReconnect = false;
-  //   },5000);
+  var that=this;
+    if(that.lockReconnect) return;
+    that.lockReconnect = true;
+    //没连接上会一直重连,设置延迟避免请求过多
+    that.timeoutnum&&clearTimeout(that.timeoutnum);
+    that.timeoutnum= setTimeout(function () {
+      //新连接
+      this.initWebSocket();
+      that.lockReconnect = false;
+    },5000);
   },
   },
  reset(){//重置心跳
  reset(){//重置心跳
-//         var that=this;
-//         clearTimeout(this.timeoutObj);
-//         clearTimeout(this.serverTimeoutObj);
-//      that.start();
+        var that=this;
+        clearTimeout(this.timeoutObj);
+        clearTimeout(this.serverTimeoutObj);
+     that.start();
     },
     },
     start(){//开启心跳
     start(){//开启心跳
-    // console.log(11111)
-    //     var self = this;
-    //     self.timeoutObj&&clearTimeout(self.timeoutObj);
-    //     self.serverTimeoutObj&&clearTimeout(self.serverTimeoutObj);
-    //     self.timeoutObj = setTimeout(function(){
-    //         self.ws.send("heartCheck");
-    //       //这里发送一个心跳,后端收到后,返回一个心跳消息
-    //       // if(self.ws.readyState==1){//如果连接正常
-    //       //       self.ws.send("heartCheck");
-    //       // }else{//否则重连
-    //       //     self.reconnect()
-    //       // }
-    //         self.serverTimeoutObj = setTimeout(function(){
-    //          // 超时关闭
-    //           self.ws.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
-    //         }, self.timeout)
-    //     }, this.timeout)
+        var self = this;
+        self.timeoutObj&&clearTimeout(self.timeoutObj);
+        self.serverTimeoutObj&&clearTimeout(self.serverTimeoutObj);
+        self.timeoutObj = setTimeout(function(){
+          console.log(self.websock.readyState);
+          //这里发送一个心跳,后端收到后,返回一个心跳消息
+          if(self.websock.readyState==1){//如果连接正常
+                self.websock.send("heartCheck");
+          }else{//否则重连
+              self.reconnect()
+          }
+            self.serverTimeoutObj = setTimeout(function(){
+             // 超时关闭
+              self.websock.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+            }, self.timeout)
+        }, this.timeout)
     },  
     },  
 // }, 
 // }, 
+beforeDestroy() { 
+  this.websock.close()
+  // 清除时间
+  clearTimeout(this.timeoutObj)
+  clearTimeout(this.serverTimeoutObj)
+},
     // // 文件渲染websoket图片的渲染
     // // 文件渲染websoket图片的渲染
     initWebSocket(){ //初始化weosocket
     initWebSocket(){ //初始化weosocket
      
      
@@ -764,8 +773,7 @@ reconnect(){
          
          
       },
       },
       websocketonopen(e){ //连接建立之后执行send方法发送数据
       websocketonopen(e){ //连接建立之后执行send方法发送数据
-        this.startimg("init",'loaddata');
-        console.log(e);
+      //  this.startimg("init",'loaddata');
         this.start();
         this.start();
       },
       },
       websocketonerror(){//连接建立失败重连
       websocketonerror(){//连接建立失败重连
@@ -773,18 +781,22 @@ reconnect(){
               this.reconnect();
               this.reconnect();
       },
       },
       websocketonmessage(e){ //数据接收
       websocketonmessage(e){ //数据接收
-           this.loadingopen();
+      console.log(e);
+        
             this.reset();
             this.reset();
+            let data=e.data;
+            if(data.indexOf("heartCheck") != -1){
+            }else{
+                 this.loadingopen();
         try{
         try{
-    
              let eadata=e.data
              let eadata=e.data
              var rdata=JSON.parse(e.data)
              var rdata=JSON.parse(e.data)
            if(rdata.hasOwnProperty("img")){
            if(rdata.hasOwnProperty("img")){
+            this.loadingopen();
            this.$refs.TFileStream.imgtupian=true;
            this.$refs.TFileStream.imgtupian=true;
           this.$refs.TFileStream.fetchData(rdata);
           this.$refs.TFileStream.fetchData(rdata);
           this.$refs.monitor.container_show=false;
           this.$refs.monitor.container_show=false;
            }
            }
-         
           // HCFD云图的参数返回 存储
           // HCFD云图的参数返回 存储
           console.log(rdata);
           console.log(rdata);
           let rdataparamJson =JSON.parse(rdata.paramJson);
           let rdataparamJson =JSON.parse(rdata.paramJson);
@@ -816,7 +828,6 @@ reconnect(){
                           this.$refs.hcfd.streamdata(JSON.stringify(data))
                           this.$refs.hcfd.streamdata(JSON.stringify(data))
                       }
                       }
                       if(data.msgType=='solidsurface_param'){
                       if(data.msgType=='solidsurface_param'){
-                          //this.$refs.hcfd.colorval(JSON.stringify(data))
                       }
                       }
                        if(data.msgType=='animation_param'){
                        if(data.msgType=='animation_param'){
                          this.$refs.hcfd.zoomanimation(JSON.stringify(data))
                          this.$refs.hcfd.zoomanimation(JSON.stringify(data))
@@ -889,20 +900,17 @@ reconnect(){
        }
        }
         return true;       
         return true;       
         }catch(error){
         }catch(error){
-          this.loadingend(this.loadingopen());
+        this.loadingend(this.loadingopen());
           return false;
           return false;
         }
         }
-         
+                       
+            }
       },
       },
       websocketsend(Data){//数据发送
       websocketsend(Data){//数据发送
         this.websock.send(Data);
         this.websock.send(Data);
       },
       },
       websocketclose(e){  //关闭
       websocketclose(e){  //关闭
       this.websock.close();
       this.websock.close();
-        // Message({
-        //     type: "error",
-          //   message: "websock断开连接",
-          // });
            this.loadingend(this.loadingopen());
            this.loadingend(this.loadingopen());
           this.reconnect();
           this.reconnect();
       },
       },