root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修改tradingview的websocket请求方式

Browse Source
This commit is contained in:
Seven
2026-01-04 21:01:29 +07:00
parent 03c9ddac66
commit fd5f835e5c
9 changed files with 1531 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/types.ts
View File

@@ -66,6 +66,8 @@ export type UserWithdrawOrderData = Treaty.Data<typeof client.api.withdraw.get>[
export type UserWithdrawOrderBody = TreatyQuery<typeof client.api.withdraw.get>;
export type MarketDataStreaming = ReturnType<typeof client.api.market_data.streaming.subscribe>;
/**
* 应用版本信息
*/

418
src/tradingview/datafeed.ts
View File

@@ -12,189 +12,186 @@ import type {
SearchSymbolsCallback,
SubscribeBarsCallback,
} from "#/datafeed-api";
const { VITE_TRADINGVIEW_DATA_API_URL } = useEnv();
import type { MarketDataStreaming } from "@/api/types";
import { client } from "@/api";
/**
* 自定义 TradingView Datafeed 实现
* 用于从后端 API 获取 K 线数据
*/
export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
private apiUrl: string = VITE_TRADINGVIEW_DATA_API_URL;
private updateInterval: number;
private subscribers: Map<string, { callback: SubscribeBarsCallback; resolution: ResolutionString }> = new Map();
private wsConnections: Map<string, MarketDataStreaming> = new Map();
constructor(apiUrl: string, updateInterval = 1000) {
constructor(apiUrl: string) {
super(apiUrl);
this.apiUrl = apiUrl;
this.updateInterval = updateInterval;
}
/**
* 初始化配置
*/
onReady(callback: OnReadyCallback): void {
console.log("[RWADatafeed]: onReady called");
// /**
// * 初始化配置
// */
// onReady(callback: OnReadyCallback): void {
// console.log("[RWADatafeed]: onReady called");
const config: DatafeedConfiguration = {
// 支持的交易所
exchanges: [
{ value: "", name: "All Exchanges", desc: "" },
],
// 支持的品种类型
symbols_types: [
{ name: "All types", value: "" },
{ name: "Stock", value: "stock" },
{ name: "Crypto", value: "crypto" },
],
// 支持的时间周期
supported_resolutions: [
"1" as ResolutionString,
"5" as ResolutionString,
"15" as ResolutionString,
"30" as ResolutionString,
"60" as ResolutionString,
"240" as ResolutionString,
"1D" as ResolutionString,
"1W" as ResolutionString,
"1M" as ResolutionString,
],
supports_marks: false,
supports_timescale_marks: false,
supports_time: true,
};
// const config: DatafeedConfiguration = {
// // 支持的交易所
// exchanges: [
// { value: "", name: "All Exchanges", desc: "" },
// ],
// // 支持的品种类型
// symbols_types: [
// { name: "All types", value: "" },
// { name: "Stock", value: "stock" },
// { name: "Crypto", value: "crypto" },
// ],
// // 支持的时间周期
// supported_resolutions: [
// "1" as ResolutionString,
// "5" as ResolutionString,
// "15" as ResolutionString,
// "30" as ResolutionString,
// "60" as ResolutionString,
// "240" as ResolutionString,
// "1D" as ResolutionString,
// "1W" as ResolutionString,
// "1M" as ResolutionString,
// ],
// supports_marks: false,
// supports_timescale_marks: false,
// supports_time: true,
// };
setTimeout(() => callback(config), 0);
}
// setTimeout(() => callback(config), 0);
// }
/**
* 搜索品种
*/
searchSymbols(
userInput: string,
exchange: string,
symbolType: string,
onResult: SearchSymbolsCallback,
): void {
console.log("[RWADatafeed]: searchSymbols", userInput, exchange, symbolType);
// /**
// * 搜索品种
// */
// searchSymbols(
// userInput: string,
// exchange: string,
// symbolType: string,
// onResult: SearchSymbolsCallback,
// ): void {
// console.log("[RWADatafeed]: searchSymbols", userInput, exchange, symbolType);
// TODO: 调用后端 API 搜索品种
// const results = await client.api.market.search.get({ query: { keyword: userInput, exchange, type: symbolType } })
// // TODO: 调用后端 API 搜索品种
// // const results = await client.api.market.search.get({ query: { keyword: userInput, exchange, type: symbolType } })
// 模拟搜索结果
const results = [
{
symbol: "AAPL",
full_name: "NASDAQ:AAPL",
description: "Apple Inc.",
exchange: "NASDAQ",
ticker: "AAPL",
type: "stock",
},
];
// // 模拟搜索结果
// const results = [
// {
// symbol: "AAPL",
// full_name: "NASDAQ:AAPL",
// description: "Apple Inc.",
// exchange: "NASDAQ",
// ticker: "AAPL",
// type: "stock",
// },
// ];
onResult(results);
}
// onResult(results);
// }
/**
* 解析品种信息
*/
resolveSymbol(
symbolName: string,
onResolve: ResolveCallback,
onError: (reason: string) => void,
): void {
console.log("[RWADatafeed]: resolveSymbol", symbolName);
// /**
// * 解析品种信息
// */
// resolveSymbol(
// symbolName: string,
// onResolve: ResolveCallback,
// onError: (reason: string) => void,
// ): void {
// console.log("[RWADatafeed]: resolveSymbol", symbolName);
// TODO: 调用后端 API 获取品种信息
// const symbolInfo = await client.api.market.symbol[symbolName].get()
// // TODO: 调用后端 API 获取品种信息
// // const symbolInfo = await client.api.market.symbol[symbolName].get()
// 模拟品种信息
const symbolInfo: LibrarySymbolInfo = {
name: symbolName,
ticker: symbolName,
description: symbolName,
type: "crypto",
session: "24x7",
exchange: "Binance",
listed_exchange: "Binance",
timezone: "Etc/UTC",
format: "price",
pricescale: 100,
minmov: 1,
has_intraday: true,
has_daily: true,
has_weekly_and_monthly: true,
supported_resolutions: [
"1" as ResolutionString,
"5" as ResolutionString,
"15" as ResolutionString,
"30" as ResolutionString,
"60" as ResolutionString,
"240" as ResolutionString,
"1D" as ResolutionString,
"1W" as ResolutionString,
"1M" as ResolutionString,
],
intraday_multipliers: ["1", "5", "15", "30", "60", "240"],
volume_precision: 2,
data_status: "streaming",
};
// // 模拟品种信息
// const symbolInfo: LibrarySymbolInfo = {
// name: symbolName,
// ticker: symbolName,
// description: symbolName,
// type: "crypto",
// session: "24x7",
// exchange: "Binance",
// listed_exchange: "Binance",
// timezone: "Etc/UTC",
// format: "price",
// pricescale: 100,
// minmov: 1,
// has_intraday: true,
// has_daily: true,
// has_weekly_and_monthly: true,
// supported_resolutions: [
// "1" as ResolutionString,
// "5" as ResolutionString,
// "15" as ResolutionString,
// "30" as ResolutionString,
// "60" as ResolutionString,
// "240" as ResolutionString,
// "1D" as ResolutionString,
// "1W" as ResolutionString,
// "1M" as ResolutionString,
// ],
// intraday_multipliers: ["1", "5", "15", "30", "60", "240"],
// volume_precision: 2,
// data_status: "streaming",
// };
setTimeout(() => onResolve(symbolInfo), 0);
}
// setTimeout(() => onResolve(symbolInfo), 0);
// }
/**
* 获取历史 K 线数据
*/
getBars(
symbolInfo: LibrarySymbolInfo,
resolution: ResolutionString,
periodParams: PeriodParams,
onResult: HistoryCallback,
onError: (reason: string) => void,
): void {
const { from, to, firstDataRequest } = periodParams;
console.log("[RWADatafeed]: getBars", {
symbol: symbolInfo.name,
resolution,
from: new Date(from * 1000).toISOString(),
to: new Date(to * 1000).toISOString(),
firstDataRequest,
});
// /**
// * 获取历史 K 线数据
// */
// getBars(
// symbolInfo: LibrarySymbolInfo,
// resolution: ResolutionString,
// periodParams: PeriodParams,
// onResult: HistoryCallback,
// onError: (reason: string) => void,
// ): void {
// const { from, to, firstDataRequest } = periodParams;
// console.log("[RWADatafeed]: getBars", {
// symbol: symbolInfo.name,
// resolution,
// from: new Date(from * 1000).toISOString(),
// to: new Date(to * 1000).toISOString(),
// firstDataRequest,
// });
// TODO: 调用后端 API 获取 K 线数据
// client.api.market.kline.get({
// query: {
// symbol: symbolInfo.name,
// resolution,
// from,
// to,
// }
// }).then(response => {
// const bars = response.data.map(item => ({
// time: item.time * 1000,
// open: item.open,
// high: item.high,
// low: item.low,
// close: item.close,
// volume: item.volume,
// }))
// onResult(bars, { noData: bars.length === 0 })
// }).catch(error => {
// onError(error.message)
// })
// // TODO: 调用后端 API 获取 K 线数据
// // client.api.market.kline.get({
// // query: {
// // symbol: symbolInfo.name,
// // resolution,
// // from,
// // to,
// // }
// // }).then(response => {
// // const bars = response.data.map(item => ({
// // time: item.time * 1000,
// // open: item.open,
// // high: item.high,
// // low: item.low,
// // close: item.close,
// // volume: item.volume,
// // }))
// // onResult(bars, { noData: bars.length === 0 })
// // }).catch(error => {
// // onError(error.message)
// // })
// 模拟 K 线数据
const bars: Bar[] = this.generateMockBars(from, to, resolution);
// // 模拟 K 线数据
// const bars: Bar[] = this.generateMockBars(from, to, resolution);
if (bars.length === 0) {
onResult([], { noData: true });
}
else {
onResult(bars, { noData: false });
}
}
// if (bars.length === 0) {
// onResult([], { noData: true });
// }
// else {
// onResult(bars, { noData: false });
// }
// }
/**
* 订阅实时数据
@@ -203,96 +200,45 @@ export class RWADatafeed extends Datafeeds.UDFCompatibleDatafeed {
symbolInfo: LibrarySymbolInfo,
resolution: ResolutionString,
onTick: SubscribeBarsCallback,
listenerGuid: string,
subscriberUID: string,
onResetCacheNeededCallback: () => void,
): void {
console.log("[RWADatafeed]: subscribeBars", {
symbol: symbolInfo.name,
resolution,
listenerGuid,
subscriberUID,
});
this.subscribers.set(subscriberUID, { callback: onTick, resolution });
const ws = client.api.market_data.streaming.subscribe();
this.wsConnections.set(subscriberUID, ws);
ws.on("open", () => {
ws.send({ type: "subscribe", subscriberUID, symbol: symbolInfo.name, resolution });
});
this.subscribers.set(listenerGuid, { callback: onTick, resolution });
// TODO: 建立 WebSocket 连接获取实时数据
// const ws = new WebSocket(`${this.apiUrl}/ws/kline?symbol=${symbolInfo.name}&resolution=${resolution}`)
// ws.onmessage = (event) => {
// const data = JSON.parse(event.data)
// const bar: Bar = {
// time: data.time * 1000,
// open: data.open,
// high: data.high,
// low: data.low,
// close: data.close,
// volume: data.volume,
// }
// onTick(bar)
// }
ws.subscribe((message) => {
if (message.data.type !== "bar")
return;
const bar: Bar = {
time: message.data.bar.time,
open: message.data.bar.open,
high: message.data.bar.high,
low: message.data.bar.low,
close: message.data.bar.close,
volume: message.data.bar.volume,
};
onTick(bar);
});
}
/**
* 取消订阅实时数据
*/
unsubscribeBars(listenerGuid: string): void {
console.log("[RWADatafeed]: unsubscribeBars", listenerGuid);
this.subscribers.delete(listenerGuid);
// TODO: 关闭 WebSocket 连接
// ws.close()
}
/**
* 生成模拟 K 线数据（用于测试）
*/
private generateMockBars(from: number, to: number, resolution: ResolutionString): Bar[] {
const bars: Bar[] = [];
const interval = this.getIntervalInSeconds(resolution);
let currentTime = from * 1000;
let lastClose = 100 + Math.random() * 10;
while (currentTime <= to * 1000) {
const open = lastClose;
const change = (Math.random() - 0.5) * 5;
const close = open + change;
const high = Math.max(open, close) + Math.random() * 2;
const low = Math.min(open, close) - Math.random() * 2;
bars.push({
time: currentTime,
open,
high,
low,
close,
volume: Math.random() * 1000000,
});
lastClose = close;
currentTime += interval * 1000;
}
return bars;
}
/**
* 获取时间周期对应的秒数
*/
private getIntervalInSeconds(resolution: ResolutionString): number {
const match = resolution.match(/^(\d+)([DWMH]?)$/);
if (!match)
return 60;
const value = Number.parseInt(match[1]);
const unit = match[2];
switch (unit) {
case "D":
return value * 86400;
case "W":
return value * 604800;
case "M":
return value * 2592000;
default:
return value * 60;
unsubscribeBars(subscriberUID: string): void {
console.log("[RWADatafeed]: unsubscribeBars", subscriberUID);
const ws = this.wsConnections.get(subscriberUID);
if (ws) {
ws.close();
this.wsConnections.delete(subscriberUID);
}
}
}

11
src/tradingview/index.ts
View File

@@ -5,9 +5,9 @@ import type { CSSProperties } from "vue";
import { mergeWith } from "lodash-es";
import { RWADatafeed } from "./datafeed";
const { VITE_TRADINGVIEW_LIBRARY_URL, VITE_TRADINGVIEW_DATA_API_URL } = useEnv();
const { VITE_TRADINGVIEW_LIBRARY_URL, VITE_API_URL } = useEnv();
const datafeed = new RWADatafeed(VITE_TRADINGVIEW_DATA_API_URL, 60000);
const datafeed = new RWADatafeed(`${VITE_API_URL}/api/udf`);
const defaultOptions = {
container: "tradingview_chart_container",
@@ -15,7 +15,7 @@ const defaultOptions = {
library_path: `${VITE_TRADINGVIEW_LIBRARY_URL}/charting_library/`,
datafeed,
interval: "1D" as ResolutionString,
symbol: "AAPL",
symbol: "",
debug: true,
autosize: true,
// 禁用移动端不友好的功能
@@ -71,6 +71,10 @@ const defaultOptions = {
export const TradingViewChart = defineComponent({
name: "TradingViewChart",
props: {
symbol: {
type: String,
required: true,
},
width: {
type: [String, Number] as PropType<string | number>,
required: false,
@@ -102,6 +106,7 @@ export const TradingViewChart = defineComponent({
}
const opts = mergeWith({}, defaultOptions, props.options);
opts.symbol = props.symbol;
const styles = computed(() => {
const style: CSSProperties = {};

3
src/views/trade/index.vue
View File

@@ -9,7 +9,6 @@ import TradeWay from "./components/trade-way.vue";
const mode = ref<"buy" | "sell">("buy");
const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
symbol: "BTC/USDT",
disabled_features: [
"create_volume_indicator_by_default",
],
@@ -40,7 +39,7 @@ const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<TradingViewChart class="mb-5" height="300px" :options="tradingviewOptions" />
<TradingViewChart class="mb-5" height="300px" symbol="BTCUSD" :options="tradingviewOptions" />
<div class="grid grid-cols-5 px-4">
<div class="col-span-3 space-y-2">