Блог

Главная - Вопросы по программированию - Цена биткойна, которая обновляется в определенные секунды

Цена биткойна, которая обновляется в определенные секунды

#javascript #html #bitcoin #price #ticker

#javascript #HTML #биткоин #Цена #бегущая строка

Вопрос:

Я некоторое время занимался поиском, но безуспешно, у меня есть код html / javascript, который извлекает и отображает цену биткойна в долларах США из bitcoininfo, однако я хочу, чтобы он самостоятельно обновлялся каждые 5 секунд с помощью Javascript. Таким образом, не нужно обновлять страницу, чтобы получить текущую цену. Мой код

 <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Bitcoin Current price</title>
  <style>#wrapper {
  font-size: 1em;
  font-family: arial;
  margin: 20px auto;
  width:450px;
  color: green;
  text-align: center;
}

#btc {font-size:6em;}

</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper">
  <h1>Bitcoin Current Price</h1>
  <div id="btc"></div>
</div>
<!-- partial -->
  <script> var currentPrice = new XMLHttpRequest();

currentPrice.open('GET', 'https://api.gdax.com/products/BTC-USD/book', true);
currentPrice.onreadystatechange = function(){
  if(currentPrice.readyState == 4){
    var ticker = JSON.parse(currentPrice.responseText);
    var price = ticker.bids[0][0];
    document.getElementById('btc').innerHTML = "$"   price;
  };
};
currentPrice.send();</script>

</body>
</html>

Если есть лучший способ сделать это, указатель в правильном направлении будет оценен.

Комментарии:

1. Вы можете использовать функцию window.setInterval и вызывать API каждые 5 секунд

2. Не очень хорошо с Javascript, не могли бы вы, пожалуйста, упростить его, возможно, опубликовав код, который я должен использовать в качестве ответа?

3. setInterval(myFunction, myNumberOfSeconds * 1000);

Ответ №1:

Преобразуйте свой вызов API в функцию, затем повторно вызывайте ее каждые 5 секунд, используя setInterval.

Если есть лучший способ сделать это, fetch API широко поддерживается и имеет гораздо более приятный API

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bitcoin Current price</title>
  <style>
    #wrapper {
      font-size: 1em;
      font-family: arial;
      margin: 20px auto;
      width: 450px;
      color: green;
      text-align: center;
    }
    
    #btc {
      font-size: 6em;
    }
  </style>
</head>

<body>
  <!-- partial:index.partial.html -->
  <div id="wrapper">
    <h1>Bitcoin Current Price</h1>
    <div id="btc"></div>
  </div>
  <!-- partial -->
  <script>
    function get_price() {
      var el = document.getElementById('btc')
      fetch("https://api.gdax.com/products/BTC-USD/book")
        .then(res => res.json())
        .then(res => {
          var price = res.bids[0][0];
          el.innerHTML = "$"   price;
        }).catch(err => {
          el.innerHTML = "$0.00 - Error";
        });
    }

    get_price()

    setInterval(get_price, 5000)
  </script>

</body>

</html>

Или с помощью websocket, например:

 function initWebSocket(products) {

  const ws = new WebSocket("wss://ws-feed.gdax.com");

  ws.onopen = function() {
    ws.send(JSON.stringify({
      "type": "subscribe",
      "channels": [{
        "name": "ticker",
        product_ids: Object.keys(products)
      }]
    }));
  };

  ws.onmessage = function(evt) {
    let data = JSON.parse(evt.data);
    if (typeof products[data.product_id] !== 'undefined') {
      products[data.product_id][data.side] = data
    }
  };

  ws.onclose = function() {
    console.log("Connection is closed...");
  };
}

function update() {
  for (let product_id in products) {
    let el = document.querySelector('[data-product="'   product_id   '"]')
    // buy
    el.getElementsByClassName('buy price')[0].innerHTML = products[product_id].buy.price
    el.getElementsByClassName('buy open_24h')[0].innerHTML = products[product_id].buy.open_24h
    el.getElementsByClassName('buy low_24h')[0].innerHTML = products[product_id].buy.low_24h
    el.getElementsByClassName('buy high_24h')[0].innerHTML = products[product_id].buy.high_24h
    el.getElementsByClassName('buy time')[0].innerHTML = products[product_id].buy.time
    // sell
    el.getElementsByClassName('sell price')[0].innerHTML = products[product_id].sell.price
    el.getElementsByClassName('sell open_24h')[0].innerHTML = products[product_id].sell.open_24h
    el.getElementsByClassName('sell low_24h')[0].innerHTML = products[product_id].sell.low_24h
    el.getElementsByClassName('sell high_24h')[0].innerHTML = products[product_id].sell.high_24h
    el.getElementsByClassName('sell time')[0].innerHTML = products[product_id].sell.time
  }
}

const products = {};
[...document.querySelectorAll('[data-product]')].forEach(
  el => products[el.getAttribute('data-product')] = {
    buy: {},
    sell: {}
  }
)

initWebSocket(products);

setInterval(update, 1000)  
 h1 {
  font-size: 24px;;
  text-align: center;
  font-weight: bold;
}

.text-center {
  text-align: center;
}

li {
  list-style: none;
}  
 <h1>ws-feed.gdax.com</h1>

<div data-product="BTC-USD" class="text-center">
  <strong>BTC-USD:</strong>
  <ul>
    <li>
      <strong>Buy:</strong> Price: <span class="buy price">0.00</span> Open 24h: <span class="buy open_24h">0.00</span> Low 24h: <span class="buy low_24h">0.00</span> High 24h: <span class="buy high_24h">0.00</span> Last: <span class="buy time"></span>
    </li>
    <li>
      <strong>Sell:</strong> Price: <span class="sell price">0.00</span> Open 24h: <span class="sell open_24h">0.00</span> Low 24h: <span class="sell low_24h">0.00</span> High 24h: <span class="sell high_24h">0.00</span> Last: <span class="sell time"></span>
    </li>
  </ul>
</div>

<div data-product="ETH-USD" class="text-center">
  <strong>ETH-USD:</strong>
  <ul>
    <li>
      <strong>Buy:</strong> Price: <span class="buy price">0.00</span> Open 24h: <span class="buy open_24h">0.00</span> Low 24h: <span class="buy low_24h">0.00</span> High 24h: <span class="buy high_24h">0.00</span> Last: <span class="buy time"></span>
    </li>
    <li>
      <strong>Sell:</strong> Price: <span class="sell price">0.00</span> Open 24h: <span class="sell open_24h">0.00</span> Low 24h: <span class="sell low_24h">0.00</span> High 24h: <span class="sell high_24h">0.00</span> Last: <span class="sell time"></span>
    </li>
  </ul>
</div>

Ответ №2:

Вот пример

 var interval = 3000; // Interval
var currentPrice = new XMLHttpRequest(); 
currentPrice.onreadystatechange = function() { 
  if(currentPrice.status == 200) {
    if ( currentPrice.responseText != '' ) {
      var ticker = JSON.parse(currentPrice.responseText);
      var price = ticker.bids[0][0];
      document.getElementById('btc').innerHTML = "$"   price;
      } 
    
  } 
  if ( currentPrice.readyState == 2 ) {  // check previous API call executed before call API again
      setTimeout(function() {
        getStockPrice();
    }, interval);
  } 
};
function getStockPrice() {
  currentPrice.open('GET', 'https://api.gdax.com/products/BTC-USD/book', true);
  currentPrice.send();
} 
getStockPrice();  
 #wrapper {
  font-size: 1em;
  font-family: arial;
  margin: 20px auto;
  width:450px;
  color: green;
  text-align: center;
}

#btc {font-size:6em;}  
 <div id="wrapper">
  <h1>Bitcoin Current Price</h1>
  <div id="btc"></div>
</div>

Ответ №3:

Для этого вам нужно использовать setInterval(function, milliseconds) функцию. Он будет вызывать функцию или вычислять выражение с заданными интервалами (в миллисекундах).

Ваш код javascript изменится примерно на это:

 function getPrice() {
  var currentPrice = new XMLHttpRequest();
  currentPrice.open('GET', 'https://api.gdax.com/products/BTC-USD/book', true);
  currentPrice.onreadystatechange = function() {
    if(currentPrice.readyState == 4){
      var ticker = JSON.parse(currentPrice.responseText);
      var price = ticker.bids[0][0];
      document.getElementById('btc').innerHTML = "$"   price;
    };
  };
  currentPrice.send();
}
// To send a request for the first time the page loads
getPrice()
setInterval(getPrice, 5000);

Для получения дополнительной информации об этой функции обратитесь к:
https://www.w3schools.com/jsref/met_win_setinterval.asp