From 44f70df8c2e8279af706682bb38365f57e5d6b37 Mon Sep 17 00:00:00 2001 From: bangae1 Date: Sat, 23 Aug 2025 13:09:30 +0900 Subject: [PATCH] xd --- package.json | 3 +- src/App.vue | 121 ++++++- src/utils/api.ts | 10 + src/utils/data.ts | 712 ------------------------------------------ types/components.d.ts | 3 - types/imports.d.ts | 2 + vite.config.ts | 3 +- yarn.lock | 96 +++++- 8 files changed, 208 insertions(+), 742 deletions(-) create mode 100644 src/utils/api.ts delete mode 100644 src/utils/data.ts diff --git a/package.json b/package.json index 0ed4a2c..eb88b03 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@unhead/vue": "^2.0.14", "@vueuse/core": "10.9.0", "@vueuse/router": "10.9.0", + "axios": "^1.11.0", "bulma": "npm:@cssninja/bulma@0.9.4", "lightweight-charts": "^5.0.8", "node-path": "^0.0.3", @@ -33,7 +34,7 @@ "devDependencies": { "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.7.0", - "@vueuse/integrations": "10.9.0", + "@vueuse/integrations": "^13.7.0", "eslint": "8.57.0", "eslint-plugin-frontmatter": "0.0.8", "eslint-plugin-md": "1.0.19", diff --git a/src/App.vue b/src/App.vue index e1dcef1..91d860b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,22 +9,32 @@ import { ref } from 'vue'; * Select your preferred style from the imports below: */ import LWChart from './components/LWChart.vue'; -// import LWChart from './components/options-api/LWChart.vue'; -import candleData from '/@src/utils/data' +import {getCandleList} from '/@src/utils/api' /** * Generates sample data for the lightweight chart * @param {Boolean} ohlc Whether generated dat should include open, high, low, and close values * @returns {Array} sample data */ +const socket = new WebSocket("ws://127.0.0.1:8765"); +const sk = new WebSocket("wss://fx-ws.gateio.ws/v4/ws/usdt") +let oldLow = 9999999999; +let oldHigh = 0; +let lock = false + +const contract = ref('BTC_USDT') const chartOptions = ref({ layout: { textColor: 'black', background: { type: 'solid', color: 'white' }, }, - height: 500 + height: 800, + timeScale: { + timeVisible: true, // 분/초까지 표시 + secondsVisible: false // 초 숨기고 싶으면 false + }, }); -const data = ref(candleData); +const candleTick = ref([]); const seriesOptions = ref({ upColor: '#26a69a', downColor: '#ef5350', @@ -35,6 +45,81 @@ const seriesOptions = ref({ const chartType = ref('candlestick'); const lwChart = ref(); + +onMounted(() => { + getCandleList('BTC_USDT', '1m').then(data => { + candleTick.value = data + }) + + + tradeSocket() + candleSocket('1m') + +}) + +const tradeSocket = () => { + sk.addEventListener('open', (event) => { + sk.send(JSON.stringify({"time" : curToUnix(), "channel" : "futures.trades", + "event": "subscribe", "payload" : [contract.value]})) + }) + + sk.addEventListener('message', (message) => { + const getDa = JSON.parse(message.data) + if (getDa.event === 'update') { + // console.log(getDa.result[0].price) + + if(candleTick.value.length === 0) return + + const lastCandle = candleTick.value[candleTick.value.length - 1] + + const price = parseFloat(getDa.result[0].price); + lastCandle.close = price + if(oldLow > candleTick.value[candleTick.value.length - 1].close) { + lastCandle.low = price + oldLow = price; + } + if(oldHigh < candleTick.value[candleTick.value.length - 1].open) { + lastCandle.high = price + oldHigh = price; + } + + candleTick.value[candleTick.value.length - 1] = lastCandle + candleTick.value = [...candleTick.value] + } + }) +} + +const candleSocket = (time) => { + socket.addEventListener('open', (event) => { + socket.send(JSON.stringify({"type":"subscribe", "channel": contract.value, "time": time})) + }) + + socket.addEventListener('message', (message) => { + lock = true + const getDa = JSON.parse(message.data) + const msg = JSON.parse(getDa.msg) + const tick = msg.data[0] + const ticks = candleTick.value + if(tick.time !== ticks[ticks.length - 1].time) { + // ticks[ticks.length - 1] = tick + // candleTick.value = [...ticks] + // } else { + const ticks = candleTick.value + ticks.push(tick) + candleTick.value = [...ticks] + } + }) +} + +const timeToUnix = (time) => { + return Math.floor(new Date(time).getTime() / 1000); +} + +const curToUnix = (() => { + return Math.floor(new Date().getTime() / 1000); +}) + + function randomShade() { return Math.round(Math.random() * 255); } @@ -94,7 +179,7 @@ const changeData = () => { newData.reduce((s, c) => { return s + c.value; }, 0) / newData.length; - seriesOptions.value = { baseValue: { type: 'price', price: average } }; + seriesOptions.value = { baseValue: { type: 'price', price: average, format: 'yyyy-MM-dd HH:mm' } }; } }; @@ -117,19 +202,21 @@ const changeType = () => {