修改合约ws断掉后自动重新获取ws数据

src/api/contract.js

@@ -11,14 +11,14 @@ class Contract {
     }
 
     static getMarketInfo(data) {
-        return server.get(`/contract/getMarketInfo`, {params:data})
+        return server.get(`/contract/getMarketInfo`, {params:data,config:{loading:false}})
     }
 
     /**
      * 获取合约市场
     */
     static getMarketList(data) {
-        return server.get('/contract/getMarketList', {params:data})
+        return server.get('/contract/getMarketList', {params:data,config:{loading:false}})
     }
 
     /**

src/api/server/Socket.js

@@ -180,7 +180,7 @@
 class Socket {
 
     constructor(link, ...args) {
-        // ✅ 修复1：确保 this.link 存的是字符串，方便后面断线重连
+        // 修复1：确保 this.link 存的是字符串，方便后面断线重连
         if (link.constructor === WebSocket) {
             this.socket = link;
             this.link = link.url; 
@@ -196,7 +196,7 @@ class Socket {
         
         this.heartBeatTimer = null;
         
-        // ✅ 新增：重连相关的标识符
+        // 新增：重连相关的标识符
         this.reconnectTimer = null;
         this.isReconnecting = false;
         this.manualClose = false; // 判断是否是用户主动退出页面
@@ -244,7 +244,7 @@ class Socket {
         }
         
         for (let item of datas) {
-            // ✅ 修复2：发送前必须检查状态，彻底解决 "CLOSING or CLOSED state" 报错！
+            // 修复2：发送前必须检查状态，彻底解决 "CLOSING or CLOSED state" 报错！
             if (this.socket && this.socket.readyState === 1) {
                 this.socket.send(JSON.stringify(item));
             } else {
@@ -291,7 +291,7 @@ class Socket {
         return this.readyState >= 2;
     }
 
-    // ✅ 修复3：核心重连逻辑
+    // 修复3：核心重连逻辑
     reconnect() {
         // 如果是手动关闭（退出页面），或者正在重连中，则放弃重连
         if (this.manualClose || this.isReconnecting) return;
@@ -332,7 +332,7 @@ class Socket {
         if (!this.manualClose) this.reconnect();
     }
 
-    // ✅ 修复4：解决内存泄漏，用完立刻注销
+    // 修复4：解决内存泄漏，用完立刻注销
     emit(data) {
         return new Promise((resolve) => {
             this.send(JSON.stringify(data));

src/views/contract/handicap.vue

@@ -140,6 +140,17 @@ export default {
         buyList: [],
         tradeList: [],
         newPriceObj: {},
+		// 保存事件回调，防止内存泄漏
+		wsOpenHandler: null,
+		wsMessageHandler: null,
+		collapseHandler: null,
+		
+		// 防止接口无限密集重试的锁
+		isRetrying: false,
+		
+		lastMessageTime: 0, // 最后一次收到数据的时间戳
+		watchdogTimer: null, // 看门狗定时器
+		watchdogTimeout: 5000 // 判定假死的时间：5秒（可根据你们后端的推送频率调整）
         };
     },
     props: {
@@ -197,6 +208,7 @@ export default {
         if (this.symbol) {
             this.getMarketInfo();
             this.linkSocket();
+			this.startWatchdog();
         }
         bus.$on('collapse', msg => {
             this.newPriceObj.price =this.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3);
@@ -215,26 +227,66 @@ export default {
     },
 	beforeDestroy() {
 		this.unLink(this.symbol);
+		this.removeSocketListeners();
+		this.stopWatchdog();
 	},
   // 获取盘口
   methods: {
     parseTime: date.parseTime,
     omitTo: math.omitTo,
-    getMarketInfo() {
-        let data = {
-            symbol: this.symbol
-        };
-        Contract.getMarketInfo(data).then(res => {
-            this.sellList = res.swapSellList;
-            this.buyList = res.swapBuyList;
-            this.tradeList = res.swapTradeList;
-            // if(this.tradeList.length>0){
-              this.newPriceObj = this.tradeList[0];
-            // }
-            this.$emit("input", this.newPriceObj);
-			localStorage.setItem("price",this.newPriceObj.price)
-        });
-    },
+   //  getMarketInfo() {
+   //      let data = {
+   //          symbol: this.symbol
+   //      };
+   //      Contract.getMarketInfo(data).then(res => {
+   //          this.sellList = res.swapSellList;
+   //          this.buyList = res.swapBuyList;
+   //          this.tradeList = res.swapTradeList;
+   //          // if(this.tradeList.length>0){
+   //            this.newPriceObj = this.tradeList[0];
+   //          // }
+   //          this.$emit("input", this.newPriceObj);
+			// localStorage.setItem("price",this.newPriceObj.price)
+   //      });
+   //  },
+   // ✅ 修复：加入 .catch 捕获超时，并自动延迟重试
+       getMarketInfo() {
+         if (!this.symbol) return;
+         
+         let data = { symbol: this.symbol };
+         
+         Contract.getMarketInfo(data).then(res => {
+           this.isRetrying = false; // 成功后解除重试锁
+           this.sellList = res.swapSellList;
+           this.buyList = res.swapBuyList;
+           this.tradeList = res.swapTradeList;
+           
+           if(this.tradeList && this.tradeList.length > 0){
+             this.newPriceObj = this.tradeList[0];
+           }
+           this.$emit("input", this.newPriceObj);
+           localStorage.setItem("price", this.newPriceObj.price);
+           
+         }).catch(err => {
+           // 🔥 捕获超时异常，防止程序崩溃 (Uncaught in promise)
+           console.error("盘口接口请求失败/超时，3秒后自动重试...", err);
+           
+           // 如果没有在重试中，就开启延迟重试
+           if (!this.isRetrying) {
+               this.isRetrying = true;
+               setTimeout(() => {
+                   this.isRetrying = false;
+                   this.getMarketInfo(); // 重新发起请求
+                   
+                   // 顺便检查一下 WS，如果断了，通过底层重连
+                   if (this.ws && !this.ws.checkOpen()) {
+                       console.log("检测到网络较差，尝试重连 WebSocket...");
+                       this.ws.reconnect();
+                   }
+               }, 3000); // 延迟 3 秒重试，避免把服务器打死
+           }
+         });
+       },
     // 计算深度
     getValue(amount) {
         const arr = this.buyListShow
@@ -243,75 +295,180 @@ export default {
         let max = Math.max(...arr);
         return math.division(amount, max, 2) * 100;
     },
+	// 封装发送订阅方法
+	sendSubscribe() {
+	  if (!this.ws || !this.ws.socket || this.ws.socket.readyState !== 1) return;
+	  this.ws.send({ cmd: "sub", msg: this.msg.buy });
+	  this.ws.send({ cmd: "sub", msg: this.msg.sell });
+	  this.ws.send({ cmd: "sub", msg: this.msg.trade });
+	},
+
+	// 清理事件监听器
+	removeSocketListeners() {
+	  if (this.wsOpenHandler && this.ws) {
+	    this.ws.off("open", this.wsOpenHandler);
+	  }
+	  if (this.wsMessageHandler && this.ws) {
+	    this.ws.off("message", this.wsMessageHandler);
+	  }
+	},
+	
+	// 强化版看门狗：直接暴力强杀并重启 WebSocket
+	startWatchdog() {
+	    this.stopWatchdog();
+	    this.lastMessageTime = Date.now(); 
+	    
+	    this.watchdogTimer = setInterval(() => {
+	        const now = Date.now();
+	        if (now - this.lastMessageTime > this.watchdogTimeout) {
+	            console.error(`[看门狗报警] 已经 ${this.watchdogTimeout/1000} 秒没收到推送了！判定为后端假死！正在强行掐断并新建 WebSocket...`);
+	            
+	            // 1. 保底先通过 HTTP 请求拉取一次最新数据，防止黑屏
+	            this.getMarketInfo(); 
+	            
+	            // 2. 强行干预底层的 Socket 实例
+	            if (this.ws) {
+	                // 强制关闭旧的底层的原生连接（必须强制，否则服务器以为你还连着）
+	                if (this.ws.socket) {
+	                    this.ws.socket.close(); 
+	                }
+	                
+	                // 强制解除底层的重连锁，并调用我们封装好的 reconnect 暴力重启它！
+	                this.ws.isReconnecting = false;
+	                this.ws.manualClose = false;
+	                this.ws.reconnect();
+	            }
+
+	            // 3. 喂一次狗，重置时间，防止在重连的过程中它疯狂重复杀连接
+	            this.lastMessageTime = Date.now(); 
+	        }
+	    }, 5000); // 每 5 秒巡逻检查一次
+	},
+
+	// 🔥 新增：停止看门狗
+	stopWatchdog() {
+	    if (this.watchdogTimer) {
+	        clearInterval(this.watchdogTimer);
+	        this.watchdogTimer = null;
+	    }
+	},
+	
+	// 完善的 WebSocket 绑定与重连机制
+	linkSocket() {
+	  if (!this.ws) return;
+	  
+	  this.removeSocketListeners();
+
+	  // 监听 open 事件（无论是初次连接还是断网重连，都会触发这里）
+	  this.wsOpenHandler = () => {
+	    this.sendSubscribe();
+	  };
+	  this.ws.on("open", this.wsOpenHandler);
+
+	  // 监听消息
+	  this.wsMessageHandler = res => {
+	    let { data, msg, code, sub, type, status, cmd } = res;
+		
+		if (sub == this.msg.buy || sub == this.msg.sell || sub == this.msg.trade) {
+		    this.lastMessageTime = Date.now(); 
+		}
+		
+	    if (sub == this.msg.buy) {
+	      this.buyList = data;
+	    } else if (sub == this.msg.sell) {
+	      this.sellList = data;
+	    } else if (sub == this.msg.trade) {
+	      this.tradeList.unshift(data);
+	      this.tradeList.pop();
+	    } else if (type == "ping" || cmd == "ping") {
+	      this.ws.send({ cmd: "pong" });
+	    }
+	  };
+	  this.ws.on("message", this.wsMessageHandler);
+
+	  // 如果当前已经是连接状态，立刻发送一次
+	  if (this.ws.socket && this.ws.socket.readyState === 1) {
+	    this.sendSubscribe();
+	  }
+	  
+	  this.startWatchdog(); // 确保看门狗在跑
+	},
+
+	unLink(symbol) {
+	  if (!this.ws || !this.ws.socket || this.ws.socket.readyState !== 1) return;
+	  this.ws.send({ cmd: "unsub", msg: `swapBuyList_${symbol}` });
+	  this.ws.send({ cmd: "unsub", msg: `swapSellList_${symbol}` });
+	  this.ws.send({ cmd: "unsub", msg: `swapTradeList_${symbol}` });
+	}
     // 连接socket
-    linkSocket() {
-        if (this.ws.socket.readyState == 1) {
-            this.ws.send({
-            cmd: "sub",
-            msg: this.msg.buy
-            });
-            this.ws.send({
-            cmd: "sub",
-            msg: this.msg.sell
-            });
-            this.ws.send({
-            cmd: "sub",
-            msg: this.msg.trade
-            });
-        } else {
-            this.ws.on("open", () => {
-            this.ws.send({
-                cmd: "sub",
-                msg: this.msg.buy
-            });
-            this.ws.send({
-                cmd: "sub",
-                msg: this.msg.sell
-            });
-            this.ws.send({
-                cmd: "sub",
-                msg: this.msg.trade
-            });
-            });
-        }
-        this.ws.on("message", res => {
-            let { data, msg, code, sub, type, status, cmd } = res;
-            if (sub == this.msg.buy) {
-              this.buyList = data;
-            } else if (sub == this.msg.sell) {
-              this.sellList = data;
-            } else if (sub == this.msg.trade) {
-              // console.log('if (sub == this.msg.trade)', this.msg.trade)
-              this.tradeList.unshift(data);
-              this.tradeList.pop();
-              // this.newPriceObj = data;
-              // this.$emit("input", this.newPriceObj);
-            } else if (type == "ping" ||cmd == "ping") {
-              this.ws.send({
-                  cmd: "pong"
-              });
-            }
-        });
+    // linkSocket() {
+    //     if (this.ws.socket.readyState == 1) {
+    //         this.ws.send({
+    //         cmd: "sub",
+    //         msg: this.msg.buy
+    //         });
+    //         this.ws.send({
+    //         cmd: "sub",
+    //         msg: this.msg.sell
+    //         });
+    //         this.ws.send({
+    //         cmd: "sub",
+    //         msg: this.msg.trade
+    //         });
+    //     } else {
+    //         this.ws.on("open", () => {
+    //         this.ws.send({
+    //             cmd: "sub",
+    //             msg: this.msg.buy
+    //         });
+    //         this.ws.send({
+    //             cmd: "sub",
+    //             msg: this.msg.sell
+    //         });
+    //         this.ws.send({
+    //             cmd: "sub",
+    //             msg: this.msg.trade
+    //         });
+    //         });
+    //     }
+    //     this.ws.on("message", res => {
+    //         let { data, msg, code, sub, type, status, cmd } = res;
+    //         if (sub == this.msg.buy) {
+    //           this.buyList = data;
+    //         } else if (sub == this.msg.sell) {
+    //           this.sellList = data;
+    //         } else if (sub == this.msg.trade) {
+    //           // console.log('if (sub == this.msg.trade)', this.msg.trade)
+    //           this.tradeList.unshift(data);
+    //           this.tradeList.pop();
+    //           // this.newPriceObj = data;
+    //           // this.$emit("input", this.newPriceObj);
+    //         } else if (type == "ping" ||cmd == "ping") {
+    //           this.ws.send({
+    //               cmd: "pong"
+    //           });
+    //         }
+    //     });
 
-    },
-    // 取消订阅
-    unLink(symbol) {
-      // 取消买线
-        this.ws.send({
-            cmd: "unsub",
-            msg: `swapBuyList_${symbol}`
-        });
-        // 取消卖线
-        this.ws.send({
-            cmd: "unsub",
-            msg: `swapSellList_${symbol}`
-        });
-        // 取消成交
-        this.ws.send({
-            cmd: "unsub",
-            msg: `swapTradeList_${symbol}`
-        });
-    }
+    // },
+    // // 取消订阅
+    // unLink(symbol) {
+    //   // 取消买线
+    //     this.ws.send({
+    //         cmd: "unsub",
+    //         msg: `swapBuyList_${symbol}`
+    //     });
+    //     // 取消卖线
+    //     this.ws.send({
+    //         cmd: "unsub",
+    //         msg: `swapSellList_${symbol}`
+    //     });
+    //     // 取消成交
+    //     this.ws.send({
+    //         cmd: "unsub",
+    //         msg: `swapTradeList_${symbol}`
+    //     });
+    // }
   }
 };
 </script>

src/views/contract/index.vue

@@ -164,6 +164,244 @@
   </div>
 </template>
 <script>
+// import kline from "../option/kline";
+// import handicap from "./handicap.vue";
+// import account from "./account.vue";
+// import exchangeStore from "./exchange-store.vue";
+// import pageBottom from "./page-bottom.vue";
+// import Contract from "../../api/contract";
+// import Socket from "@/api/server/Socket.js";
+// import Home from "@/api/home";
+// import bus from "@/components/bus.js";
+// export default {
+//   components: {
+//     kline,
+//     handicap,
+//     account,
+//     exchangeStore,
+//     pageBottom
+//   },
+//   data() {
+//     return {
+//         contractList: [],
+//         activeSymbol: "",
+//         holdPositionAll: false,
+//         holdPositionList: [],
+//         newPriceObj: {},
+//         pcBannerList:[],
+//         accountInfo: {},
+//         defaultPrice: "",
+//         wsUrl: this.Globals.Server.Path.WS1,
+//         ws: new Socket(this.Globals.Server.Path.WS1),
+//         _time: null,
+//         contractOpen: false,
+//         contractAgreement: {},
+//         symbolDetail:{},
+// 		currentIcon: '',
+// 		imge:[],
+// 		Liste:[],
+// 		price1:0,
+// 		intervalId:''
+//     };
+//   },
+//   computed: {
+//     activeContract(val) {
+//         let contractList=this.contractList
+//             .map(item => item.marketInfoList)
+//             .flat()
+//             .find(item => item.symbol == this.activeSymbol) || {}
+//             if(val.price){
+//                 delete contractList.price
+//             }
+//         return contractList;
+//     },
+//     isLogin() {
+//         return Boolean(localStorage.token);
+//     }
+//   },
+//   watch: {
+//     activeSymbol() {
+//       this.holdPosition();
+//     },
+//   },
+//   destroyed() {
+//     clearInterval(this._time);
+//   },
+//   created() {
+//     // this.openStatus();
+//     this.getMarketList();
+//     this.holdPosition();
+//     this.indexList();
+//     this._time = setInterval(() => {
+//       if (this.contractOpen) {
+//         // mounted 中有定时器跑holdPosition了
+//         this.holdPosition();
+//       }
+//     }, 3000);
+//     this.ws.on("open", () => {
+//       this.swapMarketList();
+//     });
+//     // console.info(this.$refs)
+//     bus.$on('collapse', msg => {
+//         this.activeContract.price =this.activeContract.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3);
+//         this.holdPositionList.map(item=>{
+//             if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price
+//         })
+//     });
+// 	this.startWatchingPrice();
+//   },
+//   //三秒更新一次数据
+//   mounted: function () {
+    
+//       setInterval(() => {
+//         this.holdPosition();
+//       }, 2000)
+//   },
+//   methods: {
+// 	startWatchingPrice(){
+// 		this.intervalId = setInterval(() => {
+// 			let newPrice = localStorage.getItem('price');
+// 			this.price1 = newPrice;
+// 		}, 10); // 每秒检查一次
+// 	},
+//     ispopover1(item){
+//         this.activeSymbol=item;
+// 		this.getMarketList();
+//         this.$refs.popover.showPopper = false;
+//     },
+//     swapMarketList() {
+//       let msg = "swapMarketList";
+//       this.ws.send({
+//         cmd: "sub",
+//         msg: msg
+//       });
+//       this.ws.on("message", res => {
+//         let { data, sub,cmd } = res;
+        
+//         if (sub == msg) {
+//             // console.log(data, '11--------------------')
+//             if( data.symbol=='BTC' )(data.price).toFixed(1)
+//             this.contractList = data;
+// 			// console.log(this.contractList);
+// 			this.Listes();
+//         }else if (cmd == "ping") {
+//           this.ws.send({
+//             cmd: "pong"
+//           });
+//         }
+//       });
+//       this.ws.on('close',()=>{
+//           this.ws= new Socket(this.Globals.Server.Path.WS1),
+//           console.log('链接关闭');
+//           this.wsOpen();
+//       })
+//     },
+// 	Listes(){
+// 		this.Liste = []
+// 		this.contractList[0].marketInfoList.map(item=>{
+// 			this.imge[0].marketInfoList.map(items=>{
+// 				if(item.symbol==items.symbol){
+// 					this.Liste.push({
+// 						pair_name: item.pair_name,
+// 						symbol: item.symbol,
+// 						icon:items.icon
+// 					})
+// 				}
+// 			})
+// 		})
+// 	},
+//     wsOpen(){
+//         this.ws.on("open", () => {
+//           this.swapMarketList();
+//           this.$refs.handicap.linkSocket()
+//         });
+//     },
+//     // 获取合约市场
+//     getMarketList() {
+// 	  this.currentIcon = "";
+//       Contract.getMarketList().then(res => {
+// 		if(this.activeSymbol==''){
+// 			this.contractList = res;
+// 			this.imge = res;
+// 			// 默认值
+// 			let firstParent = res[0];
+// 			if (firstParent) {
+// 			  let first = firstParent.marketInfoList[0];
+// 			  if (first) this.activeSymbol = first.symbol;
+// 			  this.currentIcon = res[0].marketInfoList[0].icon;
+// 			}
+// 		}else{
+// 			// 币种切换获取icon
+// 			// console.log('11111');
+// 			for(let item of res[0].marketInfoList){
+// 			  if(this.activeSymbol==item.symbol){
+// 			    this.currentIcon = item.icon;
+// 			  }
+// 			}
+// 		}
+//       });
+//     },
+//     // 获取持仓
+//     holdPosition() {
+//       if (!this.isLogin) return;
+//       let data = {
+//         symbol: (this.holdPositionAll && this.activeSymbol) || ""
+//       };
+//       Contract.holdPosition(data, { loading: false }).then(res => {
+//         // console.info(res)
+//         res.map(item=>{
+//             if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price
+//         })
+//         this.holdPositionList = res;
+//       });
+//     },
+//     // 获取永续合约开通状态
+//     openStatus() {
+//       if(!this.isLogin) return;
+//       Contract.openStatus().then(res => {
+//         this.contractOpen = res.open;
+//         if (!this.contractOpen) {
+//           this.contractAgreement = res.contractAgreement;
+//           $("#openContract").modal("show");
+//         }
+//       });
+//     },
+//     // 开通永续合约
+//     opening() {
+//       Contract.opening().then(res => {
+//         $("#openContract").modal("hide");
+//         this.contractOpen = true;
+//         this.$message.success(this.$t('contract.j9'));
+//       });
+//     },
+//     indexList() {
+//         Home.indexList().then((res) => {
+//             this.pcBannerList = res.pcBannerList
+//             // setTimeout(() => {
+//             //     this.skroll();
+//             // }, 100);
+//         }).catch((res) => {});
+//     },
+//     //获取某一个持仓订单的数据
+//     setactiveItem(index=0){
+//         this.accountInfo=this.holdPositionList[index]
+//     },
+//     // 线上最新数据有延迟，多请求两次以保拿到
+//     getLastHoldPosition(){
+//       let ti = 0,timer=null;
+//       timer = setInterval(()=>{
+//         this.holdPosition();
+//         ti++;
+//         if(ti==3){
+//           clearInterval(timer);
+//         }
+//       }, 1000)
+//     }
+//   }
+// };
+
+
+
 import kline from "../option/kline";
 import handicap from "./handicap.vue";
 import account from "./account.vue";
@@ -173,6 +411,7 @@ import Contract from "../../api/contract";
 import Socket from "@/api/server/Socket.js";
 import Home from "@/api/home";
 import bus from "@/components/bus.js";
+
 export default {
   components: {
     kline,
@@ -192,27 +431,35 @@ export default {
         accountInfo: {},
         defaultPrice: "",
         wsUrl: this.Globals.Server.Path.WS1,
-        ws: new Socket(this.Globals.Server.Path.WS1),
+        
+        // 保证全局唯一 Socket 实例
+        ws: null,
+        
         _time: null,
         contractOpen: false,
         contractAgreement: {},
         symbolDetail:{},
-		currentIcon: '',
-		imge:[],
-		Liste:[],
-		price1:0,
-		intervalId:''
+        currentIcon: '',
+        imge:[],
+        Liste:[],
+        price1:0,
+        intervalId:'',
+
+        // 新增：保存事件函数引用，用于页面销毁时解绑
+        swapMarketHandler: null,
+        wsOpenHandler: null,
+        collapseHandler: null
     };
   },
   computed: {
     activeContract(val) {
-        let contractList=this.contractList
+        let contractList = this.contractList
             .map(item => item.marketInfoList)
             .flat()
-            .find(item => item.symbol == this.activeSymbol) || {}
-            if(val.price){
-                delete contractList.price
-            }
+            .find(item => item.symbol == this.activeSymbol) || {};
+        if(val.price){
+            delete contractList.price;
+        }
         return contractList;
     },
     isLogin() {
@@ -224,138 +471,164 @@ export default {
       this.holdPosition();
     },
   },
-  destroyed() {
-    clearInterval(this._time);
-  },
   created() {
-    // this.openStatus();
+    // 实例化底层的 Socket
+    this.ws = new Socket(this.wsUrl);
+
     this.getMarketList();
     this.holdPosition();
     this.indexList();
+
     this._time = setInterval(() => {
       if (this.contractOpen) {
-        // mounted 中有定时器跑holdPosition了
         this.holdPosition();
       }
     }, 3000);
-    this.ws.on("open", () => {
-      this.swapMarketList();
-    });
-    // console.info(this.$refs)
-    bus.$on('collapse', msg => {
-        this.activeContract.price =this.activeContract.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3);
-        this.holdPositionList.map(item=>{
-            if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price
-        })
-    });
-	this.startWatchingPrice();
+
+    // 定义 websocket open 事件回调
+    this.wsOpenHandler = () => {
+        console.log("主页面 WS 检测到连接/重连成功，请求市场列表...");
+        this.swapMarketList();
+    };
+    this.ws.on("open", this.wsOpenHandler);
+
+    // 定义 bus 总线事件回调
+    this.collapseHandler = msg => {
+        this.activeContract.price = this.activeContract.symbol == 'BTC' ? (msg.close).toFixed(1) : (msg.close).toFixed(3);
+        this.holdPositionList.map(item => {
+            if (item.symbol == this.activeContract.symbol) item.realtimePrice = this.activeContract.price;
+        });
+    };
+    bus.$on('collapse', this.collapseHandler);
+
+    this.startWatchingPrice();
   },
-  //三秒更新一次数据
+
   mounted: function () {
-    
-      setInterval(() => {
-        this.holdPosition();
-      }, 2000)
+      // setInterval(() => {
+      //   this.holdPosition();
+      // }, 2000);
   },
+
+  // 新增：页面销毁时，彻底释放资源！
+  beforeDestroy() {
+    clearInterval(this._time);
+    clearInterval(this.intervalId);
+
+    // 解绑全局 Bus
+    if (this.collapseHandler) {
+        bus.$off('collapse', this.collapseHandler);
+    }
+
+    // 解除 websocket 上的事件监听
+    if (this.ws) {
+        if (this.wsOpenHandler) this.ws.off("open", this.wsOpenHandler);
+        if (this.swapMarketHandler) this.ws.off("message", this.swapMarketHandler);
+        
+        // 通知服务器取消订阅（如果需要的话，也可以直接销毁 ws）
+        this.ws.send({ cmd: "unsub", msg: "swapMarketList" });
+        this.ws.destroy();
+        this.ws = null;
+    }
+  },
+
   methods: {
-	startWatchingPrice(){
-		this.intervalId = setInterval(() => {
-			let newPrice = localStorage.getItem('price');
-			this.price1 = newPrice;
-		}, 10); // 每秒检查一次
-	},
-    ispopover1(item){
-        this.activeSymbol=item;
-		this.getMarketList();
+    startWatchingPrice() {
+        this.intervalId = setInterval(() => {
+            let newPrice = localStorage.getItem('price');
+            this.price1 = newPrice;
+        }, 10);
+    },
+
+    ispopover1(item) {
+        this.activeSymbol = item;
+        this.getMarketList();
         this.$refs.popover.showPopper = false;
     },
+
     swapMarketList() {
       let msg = "swapMarketList";
-      this.ws.send({
-        cmd: "sub",
-        msg: msg
-      });
-      this.ws.on("message", res => {
-        let { data, sub,cmd } = res;
+      
+      // 1. 如果当前没有连接，就不发，等 open 时会自动发
+      if (this.ws && this.ws.checkOpen()) {
+          this.ws.send({ cmd: "sub", msg: msg });
+      }
+
+      // 2. 清除旧的监听器，防止重复绑定
+      if (this.swapMarketHandler) {
+          this.ws.off("message", this.swapMarketHandler);
+      }
+
+      // 3. 定义并绑定最新的数据接收函数
+      this.swapMarketHandler = res => {
+        let { data, sub, cmd } = res;
         
         if (sub == msg) {
-            // console.log(data, '11--------------------')
-            if( data.symbol=='BTC' )(data.price).toFixed(1)
+            if (data.symbol == 'BTC') (data.price).toFixed(1);
             this.contractList = data;
-			console.log(this.contractList);
-			this.Listes();
-        }else if (cmd == "ping") {
-          this.ws.send({
-            cmd: "pong"
-          });
+            this.Listes();
+        } else if (cmd == "ping") {
+            this.ws.send({ cmd: "pong" });
         }
-      });
-      this.ws.on('close',()=>{
-          this.ws= new Socket(this.Globals.Server.Path.WS1),
-          console.log('链接关闭');
-          this.wsOpen();
-      })
+      };
+
+      this.ws.on("message", this.swapMarketHandler);
     },
-	Listes(){
-		this.Liste = []
-		this.contractList[0].marketInfoList.map(item=>{
-			this.imge[0].marketInfoList.map(items=>{
-				if(item.symbol==items.symbol){
-					this.Liste.push({
-						pair_name: item.pair_name,
-						symbol: item.symbol,
-						icon:items.icon
-					})
-				}
-			})
-		})
-	},
-    wsOpen(){
-        this.ws.on("open", () => {
-          this.swapMarketList();
-          this.$refs.handicap.linkSocket()
+
+    Listes() {
+        this.Liste = [];
+        if(!this.contractList || !this.contractList[0] || !this.imge[0]) return;
+        
+        this.contractList[0].marketInfoList.map(item => {
+            this.imge[0].marketInfoList.map(items => {
+                if (item.symbol == items.symbol) {
+                    this.Liste.push({
+                        pair_name: item.pair_name,
+                        symbol: item.symbol,
+                        icon: items.icon
+                    });
+                }
+            });
         });
     },
-    // 获取合约市场
+
     getMarketList() {
-	  this.currentIcon = "";
+      this.currentIcon = "";
       Contract.getMarketList().then(res => {
-		if(this.activeSymbol==''){
-			this.contractList = res;
-			this.imge = res;
-			// 默认值
-			let firstParent = res[0];
-			if (firstParent) {
-			  let first = firstParent.marketInfoList[0];
-			  if (first) this.activeSymbol = first.symbol;
-			  this.currentIcon = res[0].marketInfoList[0].icon;
-			}
-		}else{
-			// 币种切换获取icon
-			console.log('11111');
-			for(let item of res[0].marketInfoList){
-			  if(this.activeSymbol==item.symbol){
-			    this.currentIcon = item.icon;
-			  }
-			}
-		}
+        if (this.activeSymbol == '') {
+            this.contractList = res;
+            this.imge = res;
+            let firstParent = res[0];
+            if (firstParent) {
+                let first = firstParent.marketInfoList[0];
+                if (first) this.activeSymbol = first.symbol;
+                this.currentIcon = res[0].marketInfoList[0].icon;
+            }
+        } else {
+            if(res && res[0]) {
+                for(let item of res[0].marketInfoList) {
+                    if (this.activeSymbol == item.symbol) {
+                        this.currentIcon = item.icon;
+                    }
+                }
+            }
+        }
       });
     },
-    // 获取持仓
+
     holdPosition() {
       if (!this.isLogin) return;
       let data = {
         symbol: (this.holdPositionAll && this.activeSymbol) || ""
       };
       Contract.holdPosition(data, { loading: false }).then(res => {
-        // console.info(res)
-        res.map(item=>{
-            if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price
-        })
+        res.map(item => {
+            if (item.symbol == this.activeContract.symbol) item.realtimePrice = this.activeContract.price;
+        });
         this.holdPositionList = res;
       });
     },
-    // 获取永续合约开通状态
+
     openStatus() {
       if(!this.isLogin) return;
       Contract.openStatus().then(res => {
@@ -366,7 +639,7 @@ export default {
         }
       });
     },
-    // 开通永续合约
+
     opening() {
       Contract.opening().then(res => {
         $("#openContract").modal("hide");
@@ -374,28 +647,26 @@ export default {
         this.$message.success(this.$t('contract.j9'));
       });
     },
+
     indexList() {
         Home.indexList().then((res) => {
-            this.pcBannerList = res.pcBannerList
-            // setTimeout(() => {
-            //     this.skroll();
-            // }, 100);
+            this.pcBannerList = res.pcBannerList;
         }).catch((res) => {});
     },
-    //获取某一个持仓订单的数据
-    setactiveItem(index=0){
-        this.accountInfo=this.holdPositionList[index]
+
+    setactiveItem(index=0) {
+        this.accountInfo = this.holdPositionList[index];
     },
-    // 线上最新数据有延迟，多请求两次以保拿到
-    getLastHoldPosition(){
-      let ti = 0,timer=null;
-      timer = setInterval(()=>{
+
+    getLastHoldPosition() {
+      let ti = 0, timer = null;
+      timer = setInterval(() => {
         this.holdPosition();
         ti++;
-        if(ti==3){
+        if (ti == 3) {
           clearInterval(timer);
         }
-      }, 1000)
+      }, 1000);
     }
   }
 };

src/views/option/kline.vue

@@ -129,60 +129,152 @@ data() {
         isCreateSocket: false,
         page: {},
         tt:undefined,
-        periodCurrent: ''
+        periodCurrent: '',
+		
+		// 保存事件回调防内存泄露
+		wsOpenHandler: null,
+		wsMessageHandler: null,
+		
+		// 看门狗：防止服务器装死不推K线
+		lastMessageTime: 0,
+		watchdogTimer: null,
+		watchdogTimeout: 5000  // 判定假死的时间：5秒（可根据你们后端的推送频率调整）
     };
 },
+// 新增：页面销毁时，彻底杀掉 Socket，防止内存泄漏和后台偷跑流量
+beforeDestroy() {
+    if (this.ws) {
+		this.stopWatchdog();
+        if (this.sub) this.unsub(this.ajaxTv.getSymbol(this.symbol), this.timer);
+        this.ws.destroy(); // 调用底层类的 destroy 方法
+        this.ws = null;
+    }
+},
 methods: {
-    reconnect() {
-      if(this.isCreateSocket) {
-        return;
-      };
-      let msgObj = {
-          cmd: "sub",
-          msg: this.sub,
-      };
-      this.isCreateSocket = true;
-      //没连接上会一直重连，设置延迟避免请求过多
-      this.tt && clearTimeout(this.tt);
-      let th=this
-      th.tt = setTimeout(function () {
-            th.isCreateSocket = false;
-            th.linkSocket(() => {
-                th.ws.send(msgObj);
-            });
+    // reconnect() {
+    //   if(this.isCreateSocket) {
+    //     return;
+    //   };
+    //   let msgObj = {
+    //       cmd: "sub",
+    //       msg: this.sub,
+    //   };
+    //   this.isCreateSocket = true;
+    //   //没连接上会一直重连，设置延迟避免请求过多
+    //   this.tt && clearTimeout(this.tt);
+    //   let th=this
+    //   th.tt = setTimeout(function () {
+    //         th.isCreateSocket = false;
+    //         th.linkSocket(() => {
+    //             th.ws.send(msgObj);
+    //         });
 
-      }, 4000);
-    },
-    // 链接socket
-    linkSocket(call) {
-        const ws = new Socket(this.wsUrl);
-        ws.on("open", () => {
-            this.ws = ws;
-            call && call();
-        });
+    //   }, 4000);
+    // },
+    // // 链接socket
+    // linkSocket(call) {
+    //     const ws = new Socket(this.wsUrl);
+    //     ws.on("open", () => {
+    //         this.ws = ws;
+    //         call && call();
+    //     });
 
-        ws.on("message", (res) => {
-            let { data, msg, code, sub, type, status, req, cmd } = res;
-            if (sub == this.sub && this.onRealtimeCallback) {
-                if(sub.indexOf("BTC")!= -1) (data.close).toFixed(1)
-                this.onRealtimeCallback(this.getMap(data));
-                bus.$emit('collapse', data);
-            } else if (type == "ping" || cmd == "ping") {
-            this.ws.send({
-                cmd: "pong",
-            });
-            }
-        });
-        ws.on('close',()=>{
-            console.log('链接关闭');
-            this.reconnect();
-        })
-        ws.on('error',()=>{
-            console.log('发生异常了');
-            this.reconnect();
-        })
+    //     ws.on("message", (res) => {
+    //         let { data, msg, code, sub, type, status, req, cmd } = res;
+    //         if (sub == this.sub && this.onRealtimeCallback) {
+    //             if(sub.indexOf("BTC")!= -1) (data.close).toFixed(1)
+    //             this.onRealtimeCallback(this.getMap(data));
+    //             bus.$emit('collapse', data);
+    //         } else if (type == "ping" || cmd == "ping") {
+    //         this.ws.send({
+    //             cmd: "pong",
+    //         });
+    //         }
+    //     });
+    //     ws.on('close',()=>{
+    //         console.log('链接关闭');
+    //         this.reconnect();
+    //     })
+    //     ws.on('error',()=>{
+    //         console.log('发生异常了');
+    //         this.reconnect();
+    //     })
 
-    },
+    // },
+	
+	// 新增：K线专属看门狗。如果超过 15 秒不跳动，强制干掉 WS 重连
+	startWatchdog() {
+	    this.stopWatchdog();
+	    this.lastMessageTime = Date.now();
+	    this.watchdogTimer = setInterval(() => {
+	        if (Date.now() - this.lastMessageTime > this.watchdogTimeout) {
+	            console.warn("[K线报警] 15秒没收到K线数据，强制重启底层WebSocket!");
+	            if (this.ws) {
+	                if (this.ws.socket) this.ws.socket.close();
+	                this.ws.isReconnecting = false;
+	                this.ws.manualClose = false;
+	                this.ws.reconnect();
+	            }
+	            this.lastMessageTime = Date.now(); // 喂狗
+	        }
+	    }, 5000);
+	},
+	
+	stopWatchdog() {
+	    if (this.watchdogTimer) {
+	        clearInterval(this.watchdogTimer);
+	        this.watchdogTimer = null;
+	    }
+	},
+	
+	// 核心重构：删除了多余的 reconnect，由底层 Socket.js 完全接管
+	linkSocket(call) {
+	    // 保证全局只有一个 WS 实例
+	    if (!this.ws) {
+	        this.ws = new Socket(this.wsUrl);
+	        
+	        // 监听 open，这是初次连接和断线重连成功的统一入口
+	        this.ws.on("open", () => {
+	            console.log("K线 WebSocket 连接/重连成功！");
+	            
+	            // 初次连接的回调
+	            if (call) {
+	                call();
+	                call = null; // 执行完清空，防止重连时再次执行
+	            }
+	            
+	            // 关键：如果是因为断网导致的重连，这里会自动把之前记忆的订阅重新发给服务器！
+	            if (this.sub) {
+	                this.ws.send({ cmd: "sub", msg: this.sub });
+	            }
+	        });
+
+	        this.ws.on("message", (res) => {
+	            let { data, sub, type, cmd } = res;
+				
+				// 收到任何包都喂狗，保持活跃
+				if (sub == this.sub || type == "ping" || cmd == "ping") {
+				    this.lastMessageTime = Date.now();
+				}
+				
+	            if (sub == this.sub && this.onRealtimeCallback) {
+	                if(sub.indexOf("BTC") != -1) (data.close).toFixed(1);
+	                this.onRealtimeCallback(this.getMap(data));
+	                bus.$emit('collapse', data);
+	            } else if (type == "ping" || cmd == "ping") {
+	                this.ws.send({ cmd: "pong" });
+	            }
+	        });
+	    } else {
+	        // 如果实例已经存在，直接执行回调
+	        if (call) call();
+			if (this.ws.checkOpen() && this.sub) {
+			    this.ws.send({ cmd: "sub", msg: this.sub });
+			}
+	    }
+		
+		this.startWatchdog(); // 确保看门狗在跑
+	},
     // 取消订阅
     unsub(pair_id, timer) {
         let msgObj = {