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,28 +72,6 @@ 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]);
-}
-
-initTradingView().then(() => {
 authClient.getSession().then((session) => {
   const pinia = createPinia();
   const userStore = useUserStore(pinia);
@@ -117,4 +95,3 @@ initTradingView().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;
+      const data = message.data;
-      if (data.type !== "bar")
+      if (data.channel === "bar") {
-        return;
         const bar: Bar = {
-        time: data.bar.time,
+          time: data.ts,
-        open: data.bar.open,
+          open: data.open,
-        high: data.bar.high,
+          high: data.high,
-        low: data.bar.low,
+          low: data.low,
-        close: data.bar.close,
+          close: data.close,
-        volume: data.bar.volume,
+          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>