修改合约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

@@ -1,52 +1,217 @@
+// class Socket {
+
+//     constructor(link, ...args) {
+//         // 初始化socket
+//         if (link.constructor === WebSocket) {
+//             this.socket = link;
+//         } else {
+//             this.socket = new WebSocket(link);
+//         }
+
+//         // this.socket.binaryType = 'arraybuffer';
+
+//         this.doOpen();
+
+//         // 连接状态的标识符
+//         this.readyState = this.socket.readyState;
+//         // 订阅/发布模型
+//         this._events = {
+//             // 订阅的事件 ： 发布的方法
+
+//         };
+
+//         // 定时验证的标识符
+//         this.heartBeatTimer = null;
+
+//     }
+
+//     // 执行socket并发布事件
+//     doOpen() {
+
+//         this.afterOpenEmit = [];
+
+//         // 执行socket连接 并初始化验证请求
+//         this.socket.addEventListener("open", evt => this.onOpen(evt));
+
+//         // 接收socket数据
+//         this.socket.addEventListener("message", evt => this.onMessage(evt));
+
+//         // 关闭socket连接
+//         this.socket.addEventListener("close", evt => this.onClose(evt));
+
+//         // 请求发生错误
+//         this.socket.addEventListener("error", err => this.onError(err));
+
+//     }
+
+//     // 发布后通知订阅者
+//     Notify(entry) {
+//         // 检查是否有订阅者 返回队列
+//         const cbQueue = this._events[entry.Event];
+//         if (cbQueue && cbQueue.length) {
+//             for (let callback of cbQueue) {
+//                 if (callback instanceof Function) callback(entry.Data);
+//             }
+//         }
+//     }
+
+//     // 请求数据的方法
+//     onOpen(evt) {
+
+//         // 每隔20s检查连接
+//         // this.heartBeatTimer = setInterval(() => this.send({
+//         //     'cmd': 'ping',
+//         //     'args': ''
+//         // }), 20000);
+
+//         // 通知订阅
+//         this.Notify({Event: 'open', Data : evt});
+//     }
+
+//     /**
+//      * 订阅所有的数据
+//      * @param {array|object} datas 订阅参数集合
+//      */
+//     send(datas) {
+//         if (datas.constructor != Array) {
+// 			datas = [datas];
+//         }
+        
+//         for (let item of datas) {
+//             this.socket.send(JSON.stringify(item));
+//         }
+//     }
+
+
+//     onMessage(evt) {
+
+//         try {
+
+//             // 解析推送的数据
+//             const data = JSON.parse(evt.data);
+
+//             // 通知订阅者
+//             this.Notify({
+//                 Event: 'message',
+//                 Data: data
+//             });
+
+//         } catch (err) {
+//             console.error(' >> Data parsing error:', err);
+
+//             // 通知订阅者
+//             this.Notify({
+//                 Event: 'error',
+//                 Data: err
+//             });
+//         }
+//     }
+
+//     // 添加事件监听
+//     on(name, handler) {
+//         this.subscribe(name, handler);
+//     }
+
+//     // 取消订阅事件
+//     off(name, handler) {
+//         this.unsubscribe(name, handler);
+//     }
+
+//     // 订阅事件的方法
+//     subscribe(name, handler) {
+//         if (this._events.hasOwnProperty(name)) {
+//             this._events[name].push(handler); // 追加事件
+//         } else {
+//             this._events[name] = [handler]; // 添加事件
+//         }
+//     }
+
+//     // 取消订阅事件
+//     unsubscribe(name, handler) {
+
+//         let start = this._events[name].findIndex(item => item === handler);
+
+//         // 删除该事件
+//         this._events[name].splice(start, 1);
+
+//     }
+
+//     checkOpen() {
+//         return this.readyState >= 2;
+//     }
+
+//     onClose(evt) {
+//         this.Notify({Event: 'close', Data : evt});
+//     }
+
+
+//     onError(err) {
+//         this.Notify({Event: 'error', Data : err});
+//     }
+
+//     emit(data) {
+//         return new Promise((resolve) => {
+//             this.send(JSON.stringify(data));
+//             this.on('message', function (data) {
+//                 resolve(data);
+//             });
+//         });
+//     }
+
+//     doClose() {
+//         this.socket.close();
+//     }
+
+//     destroy() {
+//         if (this.heartBeatTimer) {
+//             clearInterval(this.heartBeatTimer);
+//             this.heartBeatTimer = null;
+//         }
+//         this.doClose();
+//         this._events = {};
+//         this.readyState = 0;
+//         this.socket = null;
+//     }
+// }
+
+// export default Socket
+
+
+
 class Socket {
 
     constructor(link, ...args) {
-        // 初始化socket
+        // 修复1：确保 this.link 存的是字符串，方便后面断线重连
         if (link.constructor === WebSocket) {
             this.socket = link;
+            this.link = link.url; 
         } else {
             this.socket = new WebSocket(link);
+            this.link = link;
         }
 
-        // this.socket.binaryType = 'arraybuffer';
-
         this.doOpen();
 
-        // 连接状态的标识符
         this.readyState = this.socket.readyState;
-        // 订阅/发布模型
+        this._events = {};
-        this._events = {
-            // 订阅的事件 ： 发布的方法
-
-        };
         
-        // 定时验证的标识符
         this.heartBeatTimer = null;
         
+        // 新增：重连相关的标识符
+        this.reconnectTimer = null;
+        this.isReconnecting = false;
+        this.manualClose = false; // 判断是否是用户主动退出页面
     }
 
-    // 执行socket并发布事件
     doOpen() {
-
         this.afterOpenEmit = [];
-
-        // 执行socket连接 并初始化验证请求
         this.socket.addEventListener("open", evt => this.onOpen(evt));
-
-        // 接收socket数据
         this.socket.addEventListener("message", evt => this.onMessage(evt));
-
-        // 关闭socket连接
         this.socket.addEventListener("close", evt => this.onClose(evt));
-
-        // 请求发生错误
         this.socket.addEventListener("error", err => this.onError(err));
-
     }
 
-    // 发布后通知订阅者
     Notify(entry) {
-        // 检查是否有订阅者 返回队列
         const cbQueue = this._events[entry.Event];
         if (cbQueue && cbQueue.length) {
             for (let callback of cbQueue) {
@@ -55,118 +220,152 @@ class Socket {
         }
     }
 
-    // 请求数据的方法
     onOpen(evt) {
+        // 连接成功，重置状态
+        this.isReconnecting = false;
+        this.manualClose = false; 
+
+        // 每次连上先清空旧的心跳，防止重复
+        if (this.heartBeatTimer) clearInterval(this.heartBeatTimer);
+
+        // 每隔20s发送心跳
+        this.heartBeatTimer = setInterval(() => {
+            this.send({
+                'cmd': 'ping',
+                'args': ''
+            });
+        }, 20000);
 
-        // 每隔20s检查连接
-        // this.heartBeatTimer = setInterval(() => this.send({
-        //     'cmd': 'ping',
-        //     'args': ''
-        // }), 20000);
-
-        // 通知订阅
         this.Notify({Event: 'open', Data : evt});
     }
 
-    /**
-     * 订阅所有的数据
-     * @param {array|object} datas 订阅参数集合
-     */
     send(datas) {
         if (datas.constructor != Array) {
             datas = [datas];
         }
         
         for (let item of datas) {
+            // 修复2：发送前必须检查状态，彻底解决 "CLOSING or CLOSED state" 报错！
+            if (this.socket && this.socket.readyState === 1) {
                 this.socket.send(JSON.stringify(item));
+            } else {
+                console.warn("WebSocket未连接，已拦截发送请求");
+            }
         }
     }
-
 
     onMessage(evt) {
-
         try {
-
-            // 解析推送的数据
             const data = JSON.parse(evt.data);
-
+            this.Notify({ Event: 'message', Data: data });
-            // 通知订阅者
-            this.Notify({
-                Event: 'message',
-                Data: data
-            });
-
         } catch (err) {
             console.error(' >> Data parsing error:', err);
-
+            this.Notify({ Event: 'error', Data: err });
-            // 通知订阅者
-            this.Notify({
-                Event: 'error',
-                Data: err
-            });
         }
     }
 
-    // 添加事件监听
     on(name, handler) {
         this.subscribe(name, handler);
     }
 
-    // 取消订阅事件
     off(name, handler) {
         this.unsubscribe(name, handler);
     }
 
-    // 订阅事件的方法
     subscribe(name, handler) {
         if (this._events.hasOwnProperty(name)) {
-            this._events[name].push(handler); // 追加事件
+            this._events[name].push(handler);
         } else {
-            this._events[name] = [handler]; // 添加事件
+            this._events[name] = [handler];
         }
     }
 
-    // 取消订阅事件
     unsubscribe(name, handler) {
-
+        if (!this._events[name]) return;
         let start = this._events[name].findIndex(item => item === handler);
-
+        if (start > -1) {
-        // 删除该事件
             this._events[name].splice(start, 1);
-
+        }
     }
 
     checkOpen() {
         return this.readyState >= 2;
     }
 
+    // 修复3：核心重连逻辑
+    reconnect() {
+        // 如果是手动关闭（退出页面），或者正在重连中，则放弃重连
+        if (this.manualClose || this.isReconnecting) return;
+        
+        this.isReconnecting = true;
+        
+        // 断网了，立刻停止发心跳
+        if (this.heartBeatTimer) {
+            clearInterval(this.heartBeatTimer);
+            this.heartBeatTimer = null;
+        }
+
+        console.log("WebSocket 掉线，3秒后尝试重新连接...");
+        
+        this.reconnectTimer = setTimeout(() => {
+            try {
+                this.socket = new WebSocket(this.link);
+                this.doOpen();
+            } catch (e) {
+                console.error("重连失败", e);
+                // 即使抛出异常也解除锁，等待下一次重连尝试
+                this.isReconnecting = false;
+                this.reconnect();
+                return;
+            }
+        }, 3000); 
+    }
+
     onClose(evt) {
         this.Notify({Event: 'close', Data : evt});
+        // 触发关闭时，只要不是主动退出的，就去重连
+        if (!this.manualClose) this.reconnect();
     }
 
-
     onError(err) {
         this.Notify({Event: 'error', Data : err});
+        // 发生错误断开时，去重连
+        if (!this.manualClose) this.reconnect();
     }
 
+    // 修复4：解决内存泄漏，用完立刻注销
     emit(data) {
         return new Promise((resolve) => {
             this.send(JSON.stringify(data));
-            this.on('message', function (data) {
+            
-                resolve(data);
+            const handler = (resData) => {
-            });
+                resolve(resData);
+                this.off('message', handler); // 立刻注销，释放内存
+            };
+            
+            this.on('message', handler);
         });
     }
 
     doClose() {
+        this.manualClose = true; // 标记为主动关闭，防止变成僵尸无限重连
+        if (this.socket) {
             this.socket.close();
         }
+    }
 
     destroy() {
+        this.manualClose = true; 
+        
         if (this.heartBeatTimer) {
             clearInterval(this.heartBeatTimer);
             this.heartBeatTimer = null;
         }
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        
         this.doClose();
         this._events = {};
         this.readyState = 0;
@@ -174,4 +373,4 @@ class Socket {
     }
 }
 
-export default Socket
+export default Socket;

src/views/contract/handicap.vue

@@ -136,6 +136,18 @@ export default {
         buyList: [],
         tradeList: [],
         newPriceObj: {},
+		
+		// 保存事件回调，防止内存泄漏
+		wsOpenHandler: null,
+		wsMessageHandler: null,
+		collapseHandler: null,
+		
+		// 防止接口无限密集重试的锁
+		isRetrying: false,
+		
+		lastMessageTime: 0, // 最后一次收到数据的时间戳
+		watchdogTimer: null, // 看门狗定时器
+		watchdogTimeout: 5000 // 判定假死的时间：5秒（可根据你们后端的推送频率调整）
         };
     },
     props: {
@@ -194,6 +206,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);
@@ -201,23 +214,70 @@ export default {
 			localStorage.setItem("price",this.newPriceObj.price)
         });
     },
+	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;
+   //          this.newPriceObj = this.tradeList[0];
+   //          this.$emit("input", this.newPriceObj);
+			// localStorage.setItem("price",this.newPriceObj.price)
+   //      });
+   //  },
+   
+   
+   // ✅ 修复：加入 .catch 捕获超时，并自动延迟重试
        getMarketInfo() {
-        let data = {
+         if (!this.symbol) return;
-            symbol: this.symbol
+         
-        };
+         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)
+           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
@@ -226,39 +286,86 @@ export default {
         let max = Math.max(...arr);
         return math.division(amount, max, 2) * 100;
     },
-    // 连接socket
+	
-    linkSocket() {
+	
-        if (this.ws.socket.readyState == 1) {
+	// 封装发送订阅方法
-            this.ws.send({
+	sendSubscribe() {
-            cmd: "sub",
+	  if (!this.ws || !this.ws.socket || this.ws.socket.readyState !== 1) return;
-            msg: this.msg.buy
+	  this.ws.send({ cmd: "sub", msg: this.msg.buy });
-            });
+	  this.ws.send({ cmd: "sub", msg: this.msg.sell });
-            this.ws.send({
+	  this.ws.send({ cmd: "sub", msg: this.msg.trade });
-            cmd: "sub",
+	},
-            msg: this.msg.sell
+	
-            });
+	// 清理事件监听器
-            this.ws.send({
+	removeSocketListeners() {
-            cmd: "sub",
+	  if (this.wsOpenHandler && this.ws) {
-            msg: this.msg.trade
+	    this.ws.off("open", this.wsOpenHandler);
-            });
+	  }
-        } else {
+	  if (this.wsMessageHandler && this.ws) {
-            this.ws.on("open", () => {
+	    this.ws.off("message", this.wsMessageHandler);
-            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 => {
+	},
+	
+	// 强化版看门狗：直接暴力强杀并重启 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) {
@@ -266,34 +373,95 @@ export default {
 	    } else if (sub == this.msg.trade) {
 	      this.tradeList.unshift(data);
 	      this.tradeList.pop();
-            // this.newPriceObj = data;
+	    } else if (type == "ping" || cmd == "ping") {
-            // this.$emit("input", this.newPriceObj);
+	      this.ws.send({ cmd: "pong" });
-            } 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({
+	  this.ws.send({ cmd: "unsub", msg: `swapBuyList_${symbol}` });
-            cmd: "unsub",
+	  this.ws.send({ cmd: "unsub", msg: `swapSellList_${symbol}` });
-            msg: `swapBuyList_${symbol}`
+	  this.ws.send({ cmd: "unsub", msg: `swapTradeList_${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) {
+    //         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}`
+    //     });
+    // }
   }
 };
 </script>

src/views/contract/index.vue

@@ -223,6 +223,259 @@
   </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: '',
+//         filterCoin: "",
+//         contractListFilter: [],
+// 		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);
+//     },
+//     // contractListFilter(){
+//     //   return this.contractList.map((item1, index1)=>{
+//     //     item1.marketInfoList.filter(item2=>{
+//     //       return item2.symbol.indexOf(this.filterCoin)!=-1
+//     //     })
+//     //     return item1;
+//     //   })
+//     // }
+//   },
+//   watch: {
+//     activeSymbol() {
+//       this.holdPosition();
+//     },
+//     // filterCoin: {
+//     //   handler(n,o){
+//     //     if(!n){
+//     //       this.contractListFilter = this.contractList;
+//     //     }else{
+//     //       this.contractListFilter = this.contractList.map((item1, index1)=>{
+//     //         let arr = item1;
+//     //         arr.marketInfoList = item1.marketInfoList.filter(item2=>{
+//     //           return item2.symbol.indexOf(n.toUpperCase())!=-1
+//     //         })
+//     //         return arr;
+//     //       })
+//     //     }
+//     //   },
+//     //   immediate: true
+//     // }
+//   },
+//   destroyed() {
+//     clearInterval(this._time);
+//   },
+//   created() {
+//     // this.openStatus();
+//     this.getMarketList();
+//     this.holdPosition();
+//     this.indexList();
+//     this._time = setInterval(() => {
+//       if (this.contractOpen) {
+//         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.$refs.popover.showPopper = false;
+//         this.getMarketList();
+//     },
+//     swapMarketList() {
+//       let msg = "swapMarketList";
+//       this.ws.send({
+//         cmd: "sub",
+//         msg: msg
+//       });
+//       this.ws.on("message", res => {
+//         let { data, sub,cmd } = res;
+
+//         if (sub == msg) {
+//             if( data.symbol=='BTC' )(data.price).toFixed(1)
+//             this.contractList = data;
+//             if(this.filterCoin==''){
+//               this.contractListFilter = data;
+//             }
+//         }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();
+//       })
+//     },
+//     wsOpen(){
+//         this.ws.on("open", () => {
+//           this.swapMarketList();
+//           this.$refs.handicap.linkSocket()
+//         });
+//     },
+//     // 获取合约市场
+//     getMarketList() {
+//       this.currentIcon = "";
+//       Contract.getMarketList().then(res => {
+//         if(this.activeSymbol==''){
+//           // 页面初始获取
+//           this.contractList = res;
+//           if(this.filterCoin==''){
+//             this.contractListFilter = 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
+//           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]
+//     },
+//     enterFilter(){
+
+//     },
+// 	// 搜索关键字
+// 	isShow(symbol) {
+// 		const reg = new RegExp(this.filterCoin, "gi");
+// 		if (!this.filterCoin) return true;
+// 		else {
+// 			// let name = symbol.coinName || symbol.pair;
+// 			// return name.search(reg) >= 0;
+// 			let name = symbol.pair_name || symbol.symbol;
+// 			return name.search(reg) >= 0;
+// 		}
+// 		// return !this.keyword || symbol.coinName.concat(symbol.pair).search(reg) >= 0;
+// 	},
+//   }
+// };
+
+
 import kline from "../option/kline";
 import handicap from "./handicap.vue";
 import account from "./account.vue";
@@ -232,6 +485,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,
@@ -250,17 +504,32 @@ export default {
         pcBannerList:[],
         accountInfo: {},
         defaultPrice: "",
+        
+        // 保证全局唯一 Socket 实例
         wsUrl: this.Globals.Server.Path.WS1,
-        ws: new Socket(this.Globals.Server.Path.WS1),
+        ws: null,
+        
         _time: null,
+        holdTimer: null, // 新增：保存挂载时的持仓定时器
         contractOpen: false,
         contractAgreement: {},
         symbolDetail:{},
         currentIcon: '',
         filterCoin: "",
         contractListFilter: [],
+        Liste:[],
         price1:0,
-		intervalId:''
+        intervalId:'',
+
+        // ✅ 防内存泄漏：保存事件函数引用
+        swapMarketHandler: null,
+        wsOpenHandler: null,
+        collapseHandler: null,
+
+        // 🔥 看门狗机制：监控左侧市场列表的数据流
+        lastMessageTime: 0,
+        watchdogTimer: null,
+        watchdogTimeout: 15000 // 15秒没收到数据判定为后端假死
     };
   },
   computed: {
@@ -277,141 +546,203 @@ export default {
     isLogin() {
         return Boolean(localStorage.token);
     },
-    // contractListFilter(){
+    set_price() {
-    //   return this.contractList.map((item1, index1)=>{
+        return this.$store.getters.set_price;
-    //     item1.marketInfoList.filter(item2=>{
+    }
-    //       return item2.symbol.indexOf(this.filterCoin)!=-1
-    //     })
-    //     return item1;
-    //   })
-    // }
   },
   watch: {
     activeSymbol() {
       this.holdPosition();
     },
-    // filterCoin: {
-    //   handler(n,o){
-    //     if(!n){
-    //       this.contractListFilter = this.contractList;
-    //     }else{
-    //       this.contractListFilter = this.contractList.map((item1, index1)=>{
-    //         let arr = item1;
-    //         arr.marketInfoList = item1.marketInfoList.filter(item2=>{
-    //           return item2.symbol.indexOf(n.toUpperCase())!=-1
-    //         })
-    //         return arr;
-    //       })
-    //     }
-    //   },
-    //   immediate: true
-    // }
-  },
-  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) {
         this.holdPosition();
       }
     }, 3000);
-    this.ws.on("open", () => {
+
-      this.swapMarketList();
+    // 绑定全局价格变动事件
-    });
+    this.collapseHandler = msg => {
-    // console.info(this.$refs)
+        this.activeContract.price = this.activeContract.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3);
-    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
         })
-    });
+    };
+    bus.$on('collapse', this.collapseHandler);
+
+    // 🔥 定义 WebSocket 的 Open 回调，让底层重连时自动恢复市场订阅
+    this.wsOpenHandler = () => {
+        console.log("PC主页面 WebSocket 连上/重连成功，请求市场列表...");
+        this.swapMarketList();
+    };
+    this.ws.on("open", this.wsOpenHandler);
+
     this.startWatchingPrice();
+    this.startWatchdog(); // 启动看门狗
   },
-  //三秒更新一次数据
+
-  mounted: function () {
+  mounted() {
-      setInterval(() => {
+      // ✅ 修复：必须把这个定时器存起来，否则组件销毁时内存会泄漏
+      this.holdTimer = setInterval(() => {
         this.holdPosition();
-      }, 2000)
+      }, 2000);
   },
+
+  // ✅ 核心重构：在组件卸载时，杀掉所有后台偷跑的定时器和事件监听！
+  beforeDestroy() {
+    clearInterval(this._time);
+    clearInterval(this.intervalId);
+    if (this.holdTimer) clearInterval(this.holdTimer);
+    
+    this.stopWatchdog();
+
+    if (this.collapseHandler) {
+        bus.$off('collapse', this.collapseHandler);
+    }
+
+    if (this.ws) {
+        if (this.wsOpenHandler) this.ws.off("open", this.wsOpenHandler);
+        if (this.swapMarketHandler) this.ws.off("message", this.swapMarketHandler);
+        
+        this.ws.send({ cmd: "unsub", msg: "swapMarketList" });
+        this.ws.destroy();
+        this.ws = null;
+    }
+  },
+
   methods: {
     startWatchingPrice(){
+        // ⚠️ 性能优化：把 10 毫秒改成了 100 毫秒。肉眼看不出延迟，但极大释放了电脑 CPU 性能！
         this.intervalId = setInterval(() => {
             let newPrice = localStorage.getItem('price');
             this.price1 = newPrice;
-		}, 10); // 每秒检查一次
+        }, 100); 
     },
+
     ispopover1(item){
         this.activeSymbol=item;
-        // this.$refs.popover.showPopper = false;
         this.getMarketList();
     },
+
+    // 🔥 暴力强杀重连看门狗
+    startWatchdog() {
+        this.stopWatchdog();
+        this.lastMessageTime = Date.now();
+        
+        this.watchdogTimer = setInterval(() => {
+            if (Date.now() - this.lastMessageTime > this.watchdogTimeout) {
+                console.error("[PC市场列表看门狗] 超过15秒未收到推送数据，判定后端假死！正在强行掐断并新建 WS...");
+                
+                // 保底拉一下 HTTP 数据
+                this.getMarketList();
+                
+                // 强行掐断并重启
+                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;
+        }
+    },
+
     swapMarketList() {
       let msg = "swapMarketList";
-      this.ws.send({
+      
-        cmd: "sub",
+      // 如果已连接，则发送订阅
-        msg: msg
+      if (this.ws && this.ws.checkOpen()) {
-      });
+          this.ws.send({ cmd: "sub", msg: msg });
-      this.ws.on("message", res => {
+      }
-        let { data, sub,cmd } = res;
+
+      // 清理旧监听器，防止多次触发重复渲染
+      if (this.swapMarketHandler) {
+          this.ws.off("message", this.swapMarketHandler);
+      }
+
+      // 声明并绑定最新的接收方法
+      this.swapMarketHandler = res => {
+        let { data, sub, cmd } = res;
+
+        // 只要收到消息就“喂狗”，刷新活跃时间
+        if (sub == msg || cmd == "ping") {
+            this.lastMessageTime = Date.now();
+        }
 
         if (sub == msg) {
             if( data.symbol=='BTC' )(data.price).toFixed(1)
             this.contractList = data;
             if(this.filterCoin==''){
               this.contractListFilter = data;
+              this.Listes();
             }
-        }else if (cmd == "ping") {
+        } else if (cmd == "ping") {
-          this.ws.send({
+          this.ws.send({ cmd: "pong" });
-            cmd: "pong"
-          });
         }
-      });
+      };
-      this.ws.on('close',()=>{
+
-          this.ws= new Socket(this.Globals.Server.Path.WS1),
+      this.ws.on("message", this.swapMarketHandler);
-          console.log('链接关闭');
-          this.wsOpen();
-      })
-    },
-    wsOpen(){
-        this.ws.on("open", () => {
-          this.swapMarketList();
-          this.$refs.handicap.linkSocket()
-        });
     },
+
     // 获取合约市场
     getMarketList() {
       this.currentIcon = "";
       Contract.getMarketList().then(res => {
         if(this.activeSymbol==''){
-          // 页面初始获取
           this.contractList = res;
           if(this.filterCoin==''){
             this.contractListFilter = res;
+            this.Listes();
           }
 
-          // 默认值
           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{
+        } else {
-          // 币种切换获取icon
+          if (res && res[0]) {
               for(let item of res[0].marketInfoList){
                 if(this.activeSymbol==item.symbol){
                   this.currentIcon = item.icon;
                 }
               }
           }
+        }
+      });
+    },
+
+    Listes(){
+        this.Liste = [];
+        if (!this.contractListFilter || !this.contractListFilter[0] || !this.contractListFilter[0].marketInfoList) return;
         
+        this.contractListFilter[0].marketInfoList.map(item => {
+            this.Liste.push({
+                pair_name: item.pair_name,
+                symbol: item.symbol,
+                icon: item.icon
+            });
         });
     },
+
     // 获取持仓
     holdPosition() {
       if (!this.isLogin) return;
@@ -419,14 +750,13 @@ export default {
         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 => {
@@ -437,7 +767,7 @@ export default {
         }
       });
     },
-    // 开通永续合约
+
     opening() {
       Contract.opening().then(res => {
         $("#openContract").modal("hide");
@@ -445,35 +775,32 @@ export default {
         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]
+        this.accountInfo = this.holdPositionList[index];
     },
-    enterFilter(){
 
-    },
-	// 搜索关键字
     isShow(symbol) {
         const reg = new RegExp(this.filterCoin, "gi");
         if (!this.filterCoin) return true;
         else {
-			// let name = symbol.coinName || symbol.pair;
-			// return name.search(reg) >= 0;
             let name = symbol.pair_name || symbol.symbol;
             return name.search(reg) >= 0;
         }
-		// return !this.keyword || symbol.coinName.concat(symbol.pair).search(reg) >= 0;
     },
+    
+    enterFilter(){
+        // 此方法原来为空，保持即可
+    }
   }
 };
+
 </script>
 <style lang="scss" scoped>
     .justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, .dark-app .theme-switch .theme-switch-button .right{

src/views/option/kline.vue

@@ -122,60 +122,155 @@ data() {
         sub: "",
         isCreateSocket: false,
         page: {},
-        tt:undefined
+        tt:undefined,
+		
+		// 保存事件回调防内存泄露
+		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() {
+    // reconnect() {
-      if(this.isCreateSocket) {
+    //   if(this.isCreateSocket) {
-        return;
+    //     return;
-      };
+    //   };
-      let msgObj = {
+    //   let msgObj = {
-          cmd: "sub",
+    //       cmd: "sub",
-          msg: this.sub,
+    //       msg: this.sub,
-      };
+    //   };
-      this.isCreateSocket = true;
+    //   this.isCreateSocket = true;
-      //没连接上会一直重连，设置延迟避免请求过多
+    //   //没连接上会一直重连，设置延迟避免请求过多
-      this.tt && clearTimeout(this.tt);
+    //   this.tt && clearTimeout(this.tt);
-      let th=this
+    //   let th=this
-      th.tt = setTimeout(function () {
+    //   th.tt = setTimeout(function () {
-            th.isCreateSocket = false;
+    //         th.isCreateSocket = false;
-            th.linkSocket(() => {
+    //         th.linkSocket(() => {
-                th.ws.send(msgObj);
+    //             th.ws.send(msgObj);
-            });
+    //         });
+
+    //   }, 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();
+    //     })
+
+    // },
 	
-      }, 4000);
+	
+	// 新增：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);
 	},
-    // 链接socket
+	
+	stopWatchdog() {
+	    if (this.watchdogTimer) {
+	        clearInterval(this.watchdogTimer);
+	        this.watchdogTimer = null;
+	    }
+	},
+	
+	// 核心重构：删除了多余的 reconnect，由底层 Socket.js 完全接管
 	linkSocket(call) {
-        const ws = new Socket(this.wsUrl);
+	    // 保证全局只有一个 WS 实例
-        ws.on("open", () => {
+	    if (!this.ws) {
-            this.ws = ws;
+	        this.ws = new Socket(this.wsUrl);
-            call && call();
+	        
+	        // 监听 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 });
+	            }
 	        });
 	
-        ws.on("message", (res) => {
+	        this.ws.on("message", (res) => {
-            let { data, msg, code, sub, type, status, req, cmd } = 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)
+	                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({
+	                this.ws.send({ cmd: "pong" });
-                cmd: "pong",
-            });
 	            }
 	        });
-        ws.on('close',()=>{
+	    } else {
-            console.log('链接关闭');
+	        // 如果实例已经存在，直接执行回调
-            this.reconnect();
+	        if (call) call();
-        })
+			if (this.ws.checkOpen() && this.sub) {
-        ws.on('error',()=>{
+			    this.ws.send({ cmd: "sub", msg: this.sub });
-            console.log('发生异常了');
+			}
-            this.reconnect();
+	    }
-        })
 		
+		this.startWatchdog(); // 确保看门狗在跑
 	},
+	
+	
     // 取消订阅
     unsub(pair_id, timer) {
         let msgObj = {