xd

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 = () => {
 </script>
 
 <template>
-  <div class="chart-container">
-    <LWChart
-        :type="chartType"
-        :data="data"
-        :autosize="true"
-        :chart-options="chartOptions"
-        :series-options="seriesOptions"
-        ref="lwChart"
-    />
+  <div>
+    <div class="chart-container">
+      <LWChart
+          :type="chartType"
+          :data="candleTick"
+          :autosize="true"
+          :chart-options="chartOptions"
+          :series-options="seriesOptions"
+          ref="lwChart"
+      />
+    </div>
+    <button type="button" @click="changeColors">Set Random Colors</button>
+    <button type="button" @click="changeType">Change Chart Type</button>
+    <button type="button" @click="changeData">Change Data</button>
   </div>
-  <button type="button" @click="changeColors">Set Random Colors</button>
-  <button type="button" @click="changeType">Change Chart Type</button>
-  <button type="button" @click="changeData">Change Data</button>
 </template>
 <style scoped>
 .chart-container {