Skip to content

Commit

Permalink
error fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@O-h-y-o
O-h-y-o committed Jun 27, 2023
1 parent 0ea5a46 commit 2691192
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 52 deletions.
92 changes: 66 additions & 26 deletions src/ko/posts/upbit/upbit-trade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,20 @@ UpbitTrade.vue 파일을 새로 만들어줍니다.
::: info Codes

```ts
//global.d.ts
// socket-upbit.ts
state: () ISocketState => ({
...
reloadTrade: async () => {},
})
```

```ts
// global.d.ts
interface ISocketState {
...
reloadTrade: Function;
}

interface ITradeResponse {
change_price: number;
sequential_id: number;
Expand Down Expand Up @@ -48,6 +61,7 @@ const getTradeAPI = async () => {
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
```
Expand All @@ -69,23 +83,23 @@ onMounted(() => {
import axios from "axios";
import { ref, onMounted } from "vue";
import { useUpbitSocketStore } from "src/stores/socket-upbit";
import { convertTradeKeys } from "src/utils/rule";
const upbit = useUpbitSocketStore();
const tradeList = ref<ISocketTradeResponse[]>();
const getTradeAPI = async () => {
const res = await axios.get(
`https://api.upbit.com/v1/trades/ticks?market=${upbit.selectCoin}&count=20`
);
const data = res.data as ITradeResponse[];
tradeList.value = convertTradeKeys(data);
const convertedData = convertTradeKeys(data);
upbit.tradeList.push(...convertedData);
};
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
```
Expand Down Expand Up @@ -173,7 +187,7 @@ convertTradeKeys라는 재귀함수를 이용하여 데이터 키 값들을 소
<div class="trade-area">
<ul class="trade-info-wrap">
<li v-for="(data, i) in tradeList" :key="i" class="trade-info">
<li v-for="(data, i) in upbit.tradeList" :key="i" class="trade-info">
<div class="time-zone">
<span>{{ dayjs(data.tms).format("MM.DD") }}</span>
<span>{{ dayjs(data.tms).format("HH:mm") }}</span>
Expand All @@ -200,7 +214,6 @@ import { useUpbitSocketStore } from "src/stores/socket-upbit";
import { convertTradeKeys } from "src/utils/rule";
const upbit = useUpbitSocketStore();
const tradeList = ref<ISocketTradeResponse[]>([]);
const getTradeAPI = async () => {
const res = await axios.get(
Expand All @@ -209,11 +222,12 @@ const getTradeAPI = async () => {
const data = res.data as ITradeResponse[];
const convertedData = convertTradeKeys(data);
tradeList.value.push(...convertedData);
upbit.tradeList.push(...convertedData);
};
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
Expand Down Expand Up @@ -319,6 +333,45 @@ html[data-theme="dark"] {

::: details Code

```ts
// socket-upbit.ts
state: () ISocketState => ({
...
tradeList: ISocketTradeResponse[];
})

actions:{
connectTradeSocket() {
tradeSocket = new WebSocket("wss://api.upbit.com/websocket/v1");

tradeSocket.onopen = (e: any) => {
tradeSocket.send(
`${JSON.stringify([
{ ticket: "trade" },
{ type: "trade", codes: ["KRW-BTC"] },
{ format: "SIMPLE" },
])}`
);
};

tradeSocket.onmessage = async (payload: any) => {
const r = (await new Response(
payload.data
).json()) as ISocketTradeResponse;

this.tradeData = r;

this.tradeList.unshift(r);

if (this.tradeList.length > 50) {
this.tradeList.pop();
}
};
},
}

```

```ts
// utils/rule.ts
export const debounce = (callback: Function, limit = 100) => {
Expand Down Expand Up @@ -352,7 +405,7 @@ export const debounce = (callback: Function, limit = 100) => {
<div class="trade-area" @scroll="scrolling">
<ul class="trade-info-wrap">
<li v-for="(data, i) in tradeList" :key="i" class="trade-info">
<li v-for="(data, i) in upbit.tradeList" :key="i" class="trade-info">
<div class="time-zone">
<span>{{ dayjs(data.tms).format("MM.DD") }}</span>
<span>{{ dayjs(data.tms).format("HH:mm") }}</span>
Expand All @@ -372,29 +425,27 @@ export const debounce = (callback: Function, limit = 100) => {
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { ref, onMounted } from "vue";
import axios from "axios";
import dayjs from "dayjs";
import { useUpbitSocketStore } from "src/stores/socket-upbit";
import { convertTradeKeys, debounce } from "src/utils/rule";
const upbit = useUpbitSocketStore();
const btnSelect = ref(0);
const tradeList = ref<ISocketTradeResponse[]>([]);
const tradeData = computed(() => upbit.tradeData);
const getTradeAPI = async () => {
const res = await axios.get(
`https://api.upbit.com/v1/trades/ticks?market=${
upbit.selectCoin
}&count=20&${
tradeList.value.at(-1) ? `${"cursor=" + tradeList.value.at(-1).sid}` : ""
upbit.tradeList.at(-1) ? `${"cursor=" + upbit.tradeList.at(-1).sid}` : ""
}`
);
const data = res.data as ITradeResponse[];
const convertedData = convertTradeKeys(data);
tradeList.value.push(...convertedData);
upbit.tradeList.push(...convertedData);
};
const scrolling = debounce((a: any) => {
Expand All @@ -407,20 +458,9 @@ const scrolling = debounce((a: any) => {
}
});
watch(
tradeData,
() => {
tradeList.value.unshift(tradeData.value);
if (tradeList.value.length > 50) {
tradeList.value.pop();
}
},
{ deep: true }
);
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
Expand Down
92 changes: 66 additions & 26 deletions src/posts/upbit/upbit-trade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,20 @@ Let's import 20 pieces of data.
::: info Codes

```ts
//global.d.ts
// socket-upbit.ts
state: () ISocketState => ({
...
reloadTrade: async () => {},
})
```

```ts
// global.d.ts
interface ISocketState {
...
reloadTrade: Function;
}

interface ITradeResponse {
change_price: number;
sequential_id: number;
Expand Down Expand Up @@ -48,6 +61,7 @@ const getTradeAPI = async () => {
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
```
Expand All @@ -69,23 +83,23 @@ This time, we will change the key value of the received data to a simple one.
import axios from "axios";
import { ref, onMounted } from "vue";
import { useUpbitSocketStore } from "src/stores/socket-upbit";
import { convertTradeKeys } from "src/utils/rule";
const upbit = useUpbitSocketStore();
const tradeList = ref<ISocketTradeResponse[]>();
const getTradeAPI = async () => {
const res = await axios.get(
`https://api.upbit.com/v1/trades/ticks?market=${upbit.selectCoin}&count=20`
);
const data = res.data as ITradeResponse[];
tradeList.value = convertTradeKeys(data);
const convertedData = convertTradeKeys(data);
upbit.tradeList.push(...convertedData);
};
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
```
Expand Down Expand Up @@ -173,7 +187,7 @@ Now that we have organized the data, let's create a UI and apply it right away.
<div class="trade-area">
<ul class="trade-info-wrap">
<li v-for="(data, i) in tradeList" :key="i" class="trade-info">
<li v-for="(data, i) in upbit.tradeList" :key="i" class="trade-info">
<div class="time-zone">
<span>{{ dayjs(data.tms).format("MM.DD") }}</span>
<span>{{ dayjs(data.tms).format("HH:mm") }}</span>
Expand All @@ -200,7 +214,6 @@ import { useUpbitSocketStore } from "src/stores/socket-upbit";
import { convertTradeKeys } from "src/utils/rule";
const upbit = useUpbitSocketStore();
const tradeList = ref<ISocketTradeResponse[]>([]);
const getTradeAPI = async () => {
const res = await axios.get(
Expand All @@ -209,11 +222,12 @@ const getTradeAPI = async () => {
const data = res.data as ITradeResponse[];
const convertedData = convertTradeKeys(data);
tradeList.value.push(...convertedData);
upbit.tradeList.push(...convertedData);
};
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
Expand Down Expand Up @@ -319,6 +333,45 @@ Now, let's get the Trade Socket data that was connected when creating the chart

::: details Code

```ts
// socket-upbit.ts
state: () ISocketState => ({
...
tradeList: ISocketTradeResponse[];
})

actions:{
connectTradeSocket() {
tradeSocket = new WebSocket("wss://api.upbit.com/websocket/v1");

tradeSocket.onopen = (e: any) => {
tradeSocket.send(
`${JSON.stringify([
{ ticket: "trade" },
{ type: "trade", codes: ["KRW-BTC"] },
{ format: "SIMPLE" },
])}`
);
};

tradeSocket.onmessage = async (payload: any) => {
const r = (await new Response(
payload.data
).json()) as ISocketTradeResponse;

this.tradeData = r;

this.tradeList.unshift(r);

if (this.tradeList.length > 50) {
this.tradeList.pop();
}
};
},
}

```

```ts
// utils/rule.ts
export const debounce = (callback: Function, limit = 100) => {
Expand Down Expand Up @@ -352,7 +405,7 @@ export const debounce = (callback: Function, limit = 100) => {
<div class="trade-area" @scroll="scrolling">
<ul class="trade-info-wrap">
<li v-for="(data, i) in tradeList" :key="i" class="trade-info">
<li v-for="(data, i) in upbit.tradeList" :key="i" class="trade-info">
<div class="time-zone">
<span>{{ dayjs(data.tms).format("MM.DD") }}</span>
<span>{{ dayjs(data.tms).format("HH:mm") }}</span>
Expand All @@ -372,29 +425,27 @@ export const debounce = (callback: Function, limit = 100) => {
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { ref, onMounted } from "vue";
import axios from "axios";
import dayjs from "dayjs";
import { useUpbitSocketStore } from "src/stores/socket-upbit";
import { convertTradeKeys, debounce } from "src/utils/rule";
const upbit = useUpbitSocketStore();
const btnSelect = ref(0);
const tradeList = ref<ISocketTradeResponse[]>([]);
const tradeData = computed(() => upbit.tradeData);
const getTradeAPI = async () => {
const res = await axios.get(
`https://api.upbit.com/v1/trades/ticks?market=${
upbit.selectCoin
}&count=20&${
tradeList.value.at(-1) ? `${"cursor=" + tradeList.value.at(-1).sid}` : ""
upbit.tradeList.at(-1) ? `${"cursor=" + upbit.tradeList.at(-1).sid}` : ""
}`
);
const data = res.data as ITradeResponse[];
const convertedData = convertTradeKeys(data);
tradeList.value.push(...convertedData);
upbit.tradeList.push(...convertedData);
};
const scrolling = debounce((a: any) => {
Expand All @@ -407,20 +458,9 @@ const scrolling = debounce((a: any) => {
}
});
watch(
tradeData,
() => {
tradeList.value.unshift(tradeData.value);
if (tradeList.value.length > 50) {
tradeList.value.pop();
}
},
{ deep: true }
);
onMounted(() => {
getTradeAPI();
upbit.reloadTrade = getTradeAPI;
});
</script>
Expand Down

0 comments on commit 2691192

Please sign in to comment.