Текущий курс обмена BTC

В этом уроке я создам тикер обменного курса BTC, получая данные о курсе обмена валюты с Cryptonator.com, который предоставляет бесплатные API-интерфейсы обмена криптовалют.

Хотя они предоставляют курсы обмена валют для различных криптовалют, но здесь я буду иметь дело только с биткойнами.

Вы можете увидеть бегущую строку в действии здесь.

Начиная…

Сервер узла настройки

Создайте папку с именем btcticker. Перейдите к пути к папке в терминале или командной строке и дайте команду npm init, просто ответьте на запросы, и внутри папки будет создан файл package.json.

Откройте файл package.json в выбранной вами среде IDE и обновите значения следующих ключей:
main: “server.js”
start: “node server”

После этого установите необходимые модули узла, дав команду
npm i express request socket.io

Теперь создайте два файла server.js и fetchbtc.js. Мы также создадим одну папку с именем public, в которой будет храниться весь код на стороне клиента, с помощью которого мы будем отображать наш тикер валюты в браузере клиента.

Структура проекта

Теперь давайте обсудим серверный код, написанный в вышеуказанных файлах.

сервер.js

В приведенном выше коде мы создаем очень простой сервер узла, импортируя необходимые модули узла вместе с express и socket.io.

В строке номер 20 мы генерируем событие socket.io ‘subscribed-btc-prices’ с интервалом в каждые 5 секунд, на которое будет подписан клиент.

fetchbtc.js

Метод fetchAPI() в приведенном выше коде возвращает обещание, которое возвращается модулем узла request после получения предоставленного пути API. Промис либо возвращает объект разрешения с телом ответа API, либо отклоняет его с сообщением об ошибке.

Метод pushUpdates() связывает метод fetchAPI(), который вызывает четыре разных API. Ответ API помещается в массив btcArr[] и возвращается как обещание.

Мы получаем следующий ответ, возвращаемый сервером с интервалом в каждые 5 секунд.

Клиентский код

Как только код на стороне сервера будет готов, давайте рассмотрим код на стороне клиента.

index.html

В приведенном выше коде я включил две библиотеки javascript socket.io.js и sparkline.js вместе с файлом app.js. Мы будем отображать данные о валюте и тикер внутри таблицы с идентификатором btcticker и ленту тикера валюты внутри блока с идентификатором tickertape.

app.js

Мы начнем с создания экземпляра socket.io
const socket = io();
, а затем подпишемся на указанное ниже событие сокета, создаваемое сервером.

socket.on('subscribed-btc-prices', tickerdata => {
  refreshTicker(tickerdata);
});

Функция refreshTicker() вызывается через каждые 5 секунд с аргументом tickerdata.
Здесь мы перебираем массив tickerdata и затем находим строку таблицы, первый столбец которой содержит атрибут ‘data-currency’. Если атрибут данных столбца соответствует значению item.target, мы просто удаляем эту строку.
После удаления строки мы добавляем новую строку с последними данными, полученными сервером.

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

Функция printCurrency() использует простые операторы switch для отображения символа валюты.

Функция drawSparkline() принимает валюту и цену в качестве двух аргументов и использует операторы switch для построения спарклайн-графика для переданной валюты, помещая последнюю цену в массив для конкретной валюты.

Функция tapeTicker() создает тикер ленты валюты на основе переданного tickerdata.
Эта функция не вызывается до тех пор, пока массив валюты не будет содержать два или более элементов.

Функция getDirection() принимает валюту в качестве аргумента и использует операторы switch для отображения стрелок вверх (↑), вниз (↓) или без изменений (↔).

Функция formatDate() форматирует дату, используя встроенный в javascript метод Intl.DateTimeFormat().

Время увидеть наш код в действии

Дайте команду npm start в терминале, это запустит узел сервера. Затем войдите в http://localhost:1978 в своем любимом браузере.
Вы увидите что-то вроде изображения ниже на экране вашего браузера.

Вы заметите, что указанный выше тикер обновляется каждые 5 секунд.

Вывод

В приведенном выше руководстве я объяснил один из возможных способов создания простого тикера обменного курса валюты. Та же логика может быть использована для создания бегущей строки акций, где пользователи могут искать и подписываться на несколько акций по своему выбору.

Вы можете найти полный исходный код вышеуказанного проекта, размещенный в моем профиле Github здесь.

Надеюсь, вам было интересно прочитать мою статью, дайте мне знать, что вы думаете.