first

zzzz

2024-04-21 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0

 src/components/trade-deep-data/index.vue

@@ -118,7 +118,13 @@
    this.getHomeList();
  },
  watch: {
    symbol(val) {
    symbol() {
      const init = [];
      for (let i = 0; i < DEEP_LENGTH; i++) {
        init.push({ amount: "", price: "" });
      }
      this.greenData = init;
      this.redData = init;
      this.startDeepSocket();
      this.getHomeList();
    },
@@ -185,11 +191,17 @@
        this.$emit("getList", dataObj);
      });
    },

    startDeepSocket() {
      // 开启socket链接
      this.closeSocket();
      console.log("start deep");

      this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);

      this.socket.onopen = () => {
        console.log("WebSocket connection established");
      };

      this.socket.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
@@ -197,9 +209,23 @@
          this.handleDeep(_data);
        }
      };

      this.socket.onerror = (error) => {
        console.error("WebSocket error:", error);
        setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
      };

      this.socket.onclose = (event) => {
        console.log("WebSocket connection closed:", event);
        // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
      };
    },
    handleDeep(data) {
      // 格式化数据
      // console.log(this.symbol, data.symbol);
      if (this.symbol !== data.symbol) {
        return;
      }
      this.deepData = data;
      if (this.selectValue >= 1) {
        this.deepData.asks.map((item) => {