feat: 引入 tradeWebSocket，优化交易数据处理

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { App as CapacitorApp } from "@capacitor/app";
+import { tradeWebSocket } from "./tradingview/websocket";
 
 const userStore = useUserStore();
 const { isAuthenticated } = storeToRefs(userStore);

src/main.ts

@@ -72,49 +72,26 @@ if (import.meta.env.DEV) {
   console.log("VConsole is enabled in development mode.");
 }
 
-function initTradingView() {
-  const { VITE_TRADINGVIEW_LIBRARY_URL } = useEnv();
-  const promise1 = new Promise((resolve) => {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = `${VITE_TRADINGVIEW_LIBRARY_URL}/charting_library/charting_library.standalone.js`;
-    script.async = true;
-    document.body.appendChild(script);
-    script.onload = () => resolve(true);
-  });
-  const promise2 = new Promise((resolve) => {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = `${VITE_TRADINGVIEW_LIBRARY_URL}/datafeeds/udf/bundle.js`;
-    script.async = true;
-    document.body.appendChild(script);
-    script.onload = () => resolve(true);
-  });
-  return Promise.all([promise1, promise2]);
-}
+authClient.getSession().then((session) => {
+  const pinia = createPinia();
+  const userStore = useUserStore(pinia);
+  userStore.setToken(session.data?.session.token || "");
 
-initTradingView().then(() => {
-  authClient.getSession().then((session) => {
-    const pinia = createPinia();
-    const userStore = useUserStore(pinia);
-    userStore.setToken(session.data?.session.token || "");
+  const app = createApp(App)
+    .use(IonicVue, {
+      backButtonText: "返回",
+      mode: "ios",
+      statusTap: true,
+      swipeBackEnabled: true,
+      // rippleEffect: true,
+      // animated: false,
+    })
+    .use(uiComponents)
+    .use(pinia)
+    .use(router)
+    .use(i18n);
 
-    const app = createApp(App)
-      .use(IonicVue, {
-        backButtonText: "返回",
-        mode: "ios",
-        statusTap: true,
-        swipeBackEnabled: true,
-        // rippleEffect: true,
-        // animated: false,
-      })
-      .use(uiComponents)
-      .use(pinia)
-      .use(router)
-      .use(i18n);
-
-    router.isReady().then(() => {
-      app.mount("#app");
-    });
+  router.isReady().then(() => {
+    app.mount("#app");
   });
 });

src/tradingview/datafeed.ts

@@ -213,18 +213,18 @@ export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
     }]);
 
     tradeWebSocket.subscribe((message) => {
-      const data = message.data as any;
-      if (data.type !== "bar")
-        return;
-      const bar: Bar = {
-        time: data.bar.time,
-        open: data.bar.open,
-        high: data.bar.high,
-        low: data.bar.low,
-        close: data.bar.close,
-        volume: data.bar.volume,
-      };
-      onTick(bar);
+      const data = message.data;
+      if (data.channel === "bar") {
+        const bar: Bar = {
+          time: data.ts,
+          open: data.open,
+          high: data.high,
+          low: data.low,
+          close: data.close,
+          volume: data.volume,
+        };
+        onTick(bar);
+      }
     }, subscriberUID);
   }
 
@@ -234,5 +234,6 @@ export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
   unsubscribeBars(subscriberUID: string): void {
     console.log("[RWADatafeed]: unsubscribeBars", subscriberUID);
     tradeWebSocket.unsubscribe(subscriberUID);
+    this.subscribers.delete(subscriberUID);
   }
 }

src/views/trade/index.vue

@@ -3,13 +3,14 @@ import type { ChartingLibraryWidgetOptions } from "#/charting_library";
 import type { SpotOrderBody } from "@/api/types";
 import type { TradingViewInst } from "@/tradingview/index";
 import type { ModalInstance } from "@/utils";
-import { modalController } from "@ionic/vue";
+import { modalController, onIonViewDidLeave, onIonViewWillEnter } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
 import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
 import { client, safeClient } from "@/api";
 import { TradeTypeEnum } from "@/api/enum";
 import { TradingViewChart } from "@/tradingview/index";
+import { tradeWebSocket } from "@/tradingview/websocket";
 import ConfirmOrder from "./components/confirm-order.vue";
 import OrderBook from "./components/order-book.vue";
 import OrdersPanel from "./components/orders-panel.vue";
@@ -126,6 +127,16 @@ function signIn() {
     query: { redirect: router.currentRoute.value.fullPath },
   });
 }
+
+// onIonViewWillEnter(() => {
+//   console.log("进入交易页面，重新加载数据");
+//   tradingViewInst.value?.widget.value?.activeChart()?.resetData();
+// });
+
+// onIonViewDidLeave(() => {
+//   console.log("离开交易页面");
+//   tradingViewInst.value?.widget.value?.chart().restoreChart();
+// });
 </script>
 
 <template>