Скрипт Курсы криптовалют онлайн в реальном времени

See the Pen Online Stream CryptoCurrency by shmidtelson (@shmidtelson) on CodePen.dark

Обзор подключения скрипта, который работает через socket и обновляет данные о курсах различных криптовалют (Bitcoin, Ethereum, Litecoin, Dash и т.д.) в режиме реального времени, также отображает иконки роста или падения курса.

Криптовалюты, хайповая тема, поэтому подобного рода виджеты весьма актуальные на данный момент, большое количество веб-мастеров ищут рецепт виджета, модуля или скрипта по данной теме и в этом посте действительно масса ответов на многие вопросы.

Прежде всего нужно получить информацию о том, как устроен и работает socket. В кратце — socket это современный протокол, который может обмениваться данными в обе стороны, в режиме реального времени.

к содержанию ↑

Базовая настройка

В моем примере работы, мы будем работать с API проекта https://www.cryptocompare.com/api/

В документации есть разного рода методы работы с API сервиса. Можно выводить информацию в обычный PHP код или парсить ее и складывать в базу. Также можно выстраивать графики.

Для работы нашего скрипта не нужен jQuery.

Подключаем socket.io

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>

Далее подключаем js код, доступен в файлах скачивания

<script src="/assets/js/ccc-streamer-utilities.js?v=1.0.2"></script>
<script src="/assets/js/crypto-socket-streamer.js?v=1.0.2"></script>

И задаем настройки для вывода криптовалют

<script type="text/javascript">new SocketStreamer({coins:"BTC,ETH,LTC,DASH"});</script>

параметр coins содержит короткие имена криптовалют, которые доступны к выводу.

к содержанию ↑

HTML

<div class="container">
   <div class="cc-bar">
      <ul>
         <li>
            <a href="#"><img class="ticker_pic_10" src="/wp-content/uploads/2018/02/1511948560_s.png" /></a>
            <div style="display: inline-block; text-align: left;">
               <a class="ticker_name side-link dark" href="#">Bitcoin</a>
               <div class="grey_font"><span data-coin="CHANGE24HOURPCT_BTC">-3.85 %</span></div>
               <span class="ticker_usd" data-coin="PRICE_BTC">9 852.76
               </span> 
               <div class="grey_font"><span data-coin="CHANGE24HOUR_BTC">-379.33
                  </span>
               </div>
            </div>
         </li>
         <li>
            <a href="#"><img class="ticker_pic_20" src="/wp-content/uploads/2018/02/1512134715_s.png" /></a> 
            <div style="display: inline-block; text-align: left;">
               <a class="ticker_name side-link dark" href="#">Dash</a> 
               <div class="grey_font"><span data-coin="CHANGE24HOURPCT_DASH">-7.81 %</span></div>
               <span class="ticker_usd" data-coin="PRICE_DASH">587.85
               </span> 
               <div class="grey_font"><span data-coin="CHANGE24HOUR_DASH">-45.91
                  </span>
               </div>
            </div>
         </li>
         <li>
            <a href="#"><img class="ticker_pic_10" src="/wp-content/uploads/2018/02/1511949556_s.png" /></a> 
            <div style="display: inline-block; text-align: left;">
               <a class="ticker_name side-link dark" href="#">Ethereum</a> 
               <div class="grey_font"><span data-coin="CHANGE24HOURPCT_ETH">-4.61 %</span></div>
               <span class="ticker_usd" data-coin="PRICE_ETH">828.86
               </span> 
               <div class="grey_font"><span data-coin="CHANGE24HOUR_ETH">-38.21
                  </span>
               </div>
            </div>
         </li>
         <li>
            <a href="#"><img class="ticker_pic_20" src="/wp-content/uploads/2018/02/1511949509_s.png" /></a> 
            <div style="display: inline-block; text-align: left;">
               <a class="ticker_name side-link dark href=">Litecoin</a> 
               <div class="grey_font"><span data-coin="CHANGE24HOURPCT_LTC">-3.80 %</span></div>
               <span class="ticker_usd" data-coin="PRICE_LTC">200.93
               <div class="grey_font"><span data-coin="CHANGE24HOUR_LTC">-7.64
                  </span>
               </div>
            </div>
         </li>
      </ul>
   </div>
</div>

к содержанию ↑

CSS3

<style>
.cc-bar {
    margin-top: 12px;
    margin-bottom: 30px;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eae9ee;
}
.cc-bar ul {
    list-style: none outside none;
    width: 100%;
    margin: 0;
    display: flex;
    padding: 0;
    justify-content: space-between;
}
.cc-bar ul li {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border-right: 1px solid #eae9ee;
    line-height: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    line-height: 30px;
}
.cc-bar ul li a {
    font-size: 20px;
}
.cc-bar ul li:last-child {
    border-right: none;
}
.cc-bar ul li p {
    margin: 0px;
}
.triangle {
    opacity: 0;
    margin-right: 2px;
    border-style: solid;
    display: inline-block;
    border-width: 5px;
}
.triangle_up,
.triangle_down,
.triangle_up_big,
.triangle_down_big {
    opacity: 1;
    border-style: solid;
    display: inline-block;
}
.triangle_up {
    border-width: 0 5px 6px 5px;
    border-color: transparent transparent #4ac069 transparent;
}
.triangle_down {
    border-width: 6px 5px 0 5px;
    border-color: #f48073 transparent transparent transparent;
}
.triangle_big {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}
.ticker_usd {
    font-weight: 700;
    font-size: 14px;
}
.ticker_name {
    font-weight: 600;
    font-size: 14px;
    max-width: 75px;
}
.ticker_pic_10,
.ticker_pic_20 {
    width: 38px;
    margin-right: 10px;
}
.ticker_pic_10 {
    margin-left: 10px;
}
.ticker_pic_20 {
    margin-left: 20px;
}
.ticker_v_line {
    padding-right: 20px;
    border-right: 1px solid #eae9ee;
}
.up {
    color: #4ac06a;
}
.down {
    color: #f48073;
}
</style>

к содержанию ↑

Скачать

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)