Текущий курс обмена 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.ioconst 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 здесь.
Надеюсь, вам было интересно прочитать мою статью, дайте мне знать, что вы думаете.