2021/10/13 zhangy

1.websocket使用代理

config/index.js

@@ -72,7 +72,8 @@ module.exports = {
       },
       '/zhongsteel.pass.web/pass/ems': {
         // target: '172.16.90.238:8888',
-         target: 'http://localhost:8086',
+        target: 'http://localhost:8086',
+        ws: true,
         changeOrigin: true,
         pathRewrite: {
           '^/zhongsteel.pass.web/pass/ems': '/'
@@ -93,6 +94,14 @@ module.exports = {
           '^/zhongsteel.pass.web/pass/localhost': '/'
         }
       }
+      // '/websocket': {
+      //   target: 'ws://localhost:8086',
+      //   ws: true, // 开启websocket代理  注意
+      //   changeOrigin: true,
+      //   pathRewrite: {
+      //     '^/websocket': '/'
+      //   }
+      // }
     },
 
     // Various Dev Server settings

src/components/main.vue

@@ -589,6 +589,7 @@ export default {
         };
         return {
             websocket: '',
+            interval: '',
             userInfo: {}, // 用户信息
             qrRole: [], //角色信息
             roleList: {
@@ -960,14 +961,9 @@ export default {
                 window.top.addEventListener('onunload', e => that.onunloadHandler(e))
                 // websocket初始化
                 let token = getCookie('accessToken');
-                // WebSocket
-                      if ('WebSocket' in window) {
-                        // this.websocket = new WebSocket('ws://localhost:8086/websocket/123?token=' + token,[token])
-                        this.websocket = new WebSocket('ws://localhost:8086/websocket/' + token);
-                        this.initWebSocket()
-                      } else {
-                        alert('当前浏览器 Not support websocket')
-                      }
+                if (token) {
+                   this.initWebSocket();
+                }
             }
 
             if (routerFlag > 0 || routerFlagP > 0) {
@@ -1262,20 +1258,43 @@ export default {
             this.$store.commit('userInfo', data)
         },
         initWebSocket () {
+          let that = this;
+          // websocket初始化
+          let token = getCookie('accessToken');
+          // WebSocket
+          if ('WebSocket' in window) {
+            // this.websocket = new WebSocket('ws://localhost:8086/websocket/123?token=' + token,[token])
+            // this.websocket = new WebSocket('ws:'+window.location.host+'/websocket/' + token);
+            that.websocket = new WebSocket('ws:'+window.location.host+'/zhongsteel.pass.web/pass/ems/websocket/' + token);
                 // 连接错误
-                this.websocket.onerror = this.setErrorMessage
+                that.websocket.onerror = that.setErrorMessage
         
                 // 连接成功
-                this.websocket.onopen = this.setOnopenMessage
+                that.websocket.onopen = that.setOnopenMessage
         
                 // 收到消息的回调
-                this.websocket.onmessage = this.setOnmessageMessage
+                that.websocket.onmessage = that.setOnmessageMessage
         
                 // 连接关闭的回调
-                this.websocket.onclose = this.setOncloseMessage
+                that.websocket.onclose = that.setOncloseMessage
         
                 // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-                window.onbeforeunload = this.onbeforeunload
+                window.onbeforeunload = that.onbeforeunload
+                //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
+                  that.interval = window.setTimeout(function(){ // bug：每次都会触发init，用setInterval导致定时器不断叠加
+                      console.log('websoket 轮询');
+                      if(that.websocket !== null){
+                          if (that.websocket.readyState !== that.websocket.OPEN) {
+                              if (token) {
+                                  console.log('websocket again')
+                                  that.initWebSocket()
+                              }
+                          }
+                      }
+                  },30000);
+                } else {
+                  alert('当前浏览器 Not support websocket');
+                }
               },
               setErrorMessage () {
                 console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
@@ -1304,7 +1323,10 @@ export default {
                           title: data.title,
                           message: data.message,
                           position: 'bottom-right',
-                          duration: 0
+                          duration: 0,
+                          onClose() {
+                            console.log('关闭啦', event);
+                          }
                         });
                 // let audio = new Audio()
                 // audio.src = '/static/img/14430.wav';
@@ -1324,7 +1346,11 @@ export default {
                 }
               },
               setOncloseMessage () {
-                console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
+                console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState);
+                if(this.interval){
+                    window.clearInterval(this.interval);
+                    // console.log("清除定时器");
+                }
               },
               onbeforeunload () {
                 this.closeWebSocket()

src/views/energyPerformance/components/supplyAnddemand/ProjectData.vue

@@ -44,14 +44,15 @@
                                     start-placeholder="开始日期"
                                     end-placeholder="结束日期">
                                 </el-date-picker> -->
-                                <!-- <zj-timegran-date
+                                <zj-timegran-date
                                     v-model="filterForm.data.clock"
                                     style="width: 100%;"
                                     :type="'daterange'"
                                     :timegranId="filterForm.data.timegranid"
                                     :oneFoo="getTableData"
                                     :defaultOffset="-1"
-                                ></zj-timegran-date> -->
+                                    :custom="1"
+                                ></zj-timegran-date>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">