개발

[javascript] 빗썸 비트코인 가격 웹소켓으로 실시간 가져오기

단마 2023. 3. 17. 16:23

빗썸 비트코인 가격 웹소켓으로 실시간 가져오기

 

브라우저에서 직접 웹소켓 API를 직접호출하면 CORS(Cross-Orgin Resource Sharing) 크로스 도메인 정책 으로 오류가 발생할 수 있습니다.

 

 

그래서 public websocket API를 이용한 비트코인 실시간 가격 가져오는 예제 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>빗썸 비트코인 실시간 가격 정보</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        h1 { font-size: 2rem; }
    </style>
</head>
<body>
    <h1>빗썸 비트코인 실시간 가격 정보</h1>
    <p>현재 비트코인 가격: <span id="btc-price">가져오는 중...</span></p>
    <script>
        const websocket = new WebSocket('wss://pubwss.bithumb.com/pub/ws');

        websocket.onopen = () => {
            console.log('WebSocket connected');
            websocket.send(JSON.stringify({
                type: 'ticker',
                symbols: ['BTC_KRW'],
                tickTypes: ['1H']
            }));
        };

        websocket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            if (data.hasOwnProperty('content') && data.content.tickType === '1H') {
                const btcPrice = data.content.closePrice;
                document.getElementById('btc-price').textContent = btcPrice.toLocaleString() + ' KRW';
            }
        };

        websocket.onclose = () => {
            console.log('WebSocket disconnected');
        };

        websocket.onerror = (error) => {
            console.error('WebSocket error:', error);
        };
    </script>
</body>
</html>

 

이 소스를 블로그나 게시글에 직접 게시하시면 가격 정보를 별다른 설정없이 실시간으로 표시하여 가져올 수 있습니다.

 

아래 실제 동작 화면 입니다. 조금만 응용 하시면 관심 종목의 코인 가격 정보를 실시간으로 보는 방법으로 쓸 수 있을것 같습니다. 

 

빗썸 비트코인 실시간 가격 정보

빗썸 비트코인 실시간 가격 정보

현재 비트코인 가격: 가져오는 중...

 

감사합니다.

반응형