Building a Currency Ticker With NodeJS and Socket.io

BTC exchange rate live ticker

Photo by André François McKenzie on Unsplash

In this tutorial, I will be building a live BTC exchange rate ticker by fetching the currency exchange rate data from Cryptonator.com, which provides free cryptocurrencies exchange rate APIs.

Although they provide currency exchange rates for various cryptocurrencies, but here I will be dealing only with Bitcoin.

You can see the ticker in action here.

Getting started…

Setup node server

Create a folder named btcticker. Go to the folder path in the terminal or command prompt and give the command npm init, just respond to the prompts and it will create package.json file inside the folder.

Open package.json file in the IDE of your choice and update the values of the below keys:
main: “server.js”
start: “node server”

After this install the required node modules by giving the command
npm i express request socket.io

Now create two files server.js and fetchbtc.js. We will also create one folder named public, which will hold all client-side code by which we will display our currency ticker on the client’s browser.

Project Structure

Project Structure

Now let’s discuss the server-side code written in the above files.

server.js

server.js

In the code above we are creating a very basic node server by importing required node modules along with express and socket.io.

On line number 20 we are emitting a socket.io event ‘subscribed-btc-prices’ at the interval of every 5 seconds, which will be subscribed by the client.

fetchbtc.js

fetchbtc.js

The fetchAPI() method in the above code returns a promise, which is returned by the request node module after fetching the provided API path. The promise either returns a resolve object with the API response body or rejects it with an error message.

The pushUpdates() method chains the fetchAPI() method which calls four different APIs. The response of the API is pushed into btcArr[] array and returned as a promise.

We get the following response returned by the server at the interval of every 5 seconds.

API response object

Client-side code

Once the server-side code is done, let’s explore the client-side code.

index.html

In the above code I have included two javascript libraries socket.io.js and sparkline.js along with the app.js. We will display the currency data and ticker inside the table with the id, btcticker and the currency Ticker Tape inside the div with the id, tickertape.

app.js

We will begin by creating the instance of socket.io
const socket = io();
And then we will subscribe to the below socket event emitted by the server.

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

The refreshTicker() function is called after every 5 seconds with the argument, tickerdata.
Here we loop over the tickerdata array and then find the table row whose first column contains ‘data-currency’ attribute. If the column’s data attribute matches with the item.target value, we simply remove that row.
Once the row is removed we add the new row with the latest data received by the server.

The above logic can also handle the condition, when the server returns the currency data in random order.

The printCurrency() function uses a simple switch statements to display the currency symbol.

The drawSparkline() function accepts currency and price as two arguments and uses switch statements to draw a sparkline graph for the passed currency by pushing the latest price into the currency specific array.

The tapeTicker() function creates the currency Tape Ticker based on the passed tickerdata.
This function doesn’t gets called until the currency array contains two or more items.

The getDirection() function accepts currency as argument and uses switch statements to show the up (↑), down (↓) or no change (↔) arrows.

The formatDate() function formats the date using javascript inbuilt Intl.DateTimeFormat() method.

Time to see our code in action

Give the command npm start in the terminal, this will spin up the node server. Then access http://localhost:1978 in your favorite browser.
You will see something like the image below in your browser’s screen.

You will notice that the above ticker keeps getting updated after every 5 seconds.

Conclusion

In the above tutorial, I have explained one of the possible ways to create a simple currency exchange rate ticker. The same logic can be used to build a stock ticker where users can search and subscribe to the multiple stocks of their choice.

You can find the complete source code of the above project, hosted on my Github profile here.

I hope you might have enjoyed reading my article, do let me know your thoughts.