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

Скрипт криптовалют онлайн

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

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

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

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

Скрипт криптовалют онлайн
Интерфейс API cryptocompare

В документации есть разного рода методы работы с 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?x21993"></script>
<script src="/assets/js/crypto-socket-streamer.js?x21993"></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?x21993" /></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?x21993" /></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?x21993" /></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?x21993" /></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>
к содержанию ↑

Скачать

[sociallocker id=1274]

JS crypto

Значок
Размер: 6.54 KB
Скачано (раз): 458
Версия: 1.0.1
ФайлДействие
js-files_crypto.zipСкачать 
[/sociallocker]
Голосов  (4)
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)
Об авторе

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Смотреть посты