Real-Time Cryptocurrency Price Charts in React with Python Websockets
Tags: python, javascript, programming, react
Published: 2024-02-10 12:05:53

In today's fast-moving cryptocurrency markets, it's crucial to have access to real-time price data. By leveraging WebSockets in Python and creating a reactive frontend in React, we can build customizable crypto charting dashboards that update continuously with the latest pricing information.

In this comprehensive tutorial, we will:

- Gain an understanding of real-time data streaming with WebSockets
- Set up a Python server to retrieve live crypto prices from the CoinGecko API
- Transmit the real-time data to a React frontend over a WebSocket connection
- Display elegant crypto price charts that update every second as new prices come in
    

The result will be a responsive web app that provides up-to-the-second visibility into cryptocurrency valuations.


## Prerequisites

Before we get started building our real-time crypto price dashboard, let's briefly cover the core technologies we'll be working with:


- [React: Frontend JavaScript library for building user interfaces](https://blog.learnhub.africa/2023/10/24/before-you-learn-react-in-2023/)
- Python: Backend language for building the server app
- Websockets: Communication protocol for fast, real-time data streaming
    

Having a basic familiarity with React components and hooks, Python scripts, setting up a Python virtual environment, and the websocket protocol will ensure we can fully understand this tutorial.


![tiktok, network, social-3492384.jpg](https://blog.learnhub.africa/wp-content/uploads/2023/04/tiktok-network-social-3492384-1024x645.jpg)


Learn how to become [*a Blockchain Engineer*](https://blog.learnhub.africa/2023/04/23/how-to-become-a-blockchain-engineer/) with this guide.


## Project Setup

With our dependencies installed, let's set up a new React project and a basic Python server.

We'll use create-react-app to scaffold our frontend:

    npx create-react-app crypto-price-app

And then build an API server in a server.py file:

    #server.py
    import websocket 
    import json
    
    # Websocket setup...

We'll flesh out the Python later. But for now, our frontend React app will connect to the API server at 'ws://localhost:8080'.


## Getting Live Crypto Prices

Now let's work on our Python server to supply real-time crypto price data to the React frontend.

![CoinGeckoi API - Learnhub.Africa](https://paper-attachments.dropboxusercontent.com/s_8CF1C6B69E4B081187769B46003D3A06BE1C98DC5FC37F342A87DDD28C27D138_1707565574860_Screenshot+2024-02-10+at+12.46.08.png)


We'll use the [CoinGecko API](https://www.coingecko.com/en/api) - a free crypto API that's robust, consistent and offers detailed docs.

After signing up and grabbing our API key, we'll define a `fetchPrices` function to retrieve the latest BTC and ETH prices:


    # Fetches latest BTC, ETH prices from CoinGecko API
    def fetchPrices():
      cg = CoinGeckoAPI(api_key)
      btc_data = cg.get_price(ids='bitcoin', vs_currencies='usd')
      eth_data = cg.get_price(ids='ethereum', vs_currencies='usd')
    
      btc_price = btc_data\['bitcoin'\]['usd']
      eth_price = eth_data\['ethereum'\]['usd']
    
      data = {
        "btc": btc_price,
        "eth": eth_price 
      }
    
      return json.dumps(data)

We make two API calls to get the individual Bitcoin and Ethereum prices, which we consolidate into a JSON payload before returning.


## Setting Up The Websocket

Next, we must create a WebSocket endpoint emitting crypto price updates. The Python websocket-client module makes this straightforward:


    import websocket
    import json
    
    # On new websocket connection
    def on_open(ws):
      print("Websocket connection opened")
    
    # On new message received
    def on_message(ws, message):
      print("Message received:")
      print(message)
    
    def run_websocket_server():
      websocket.enableTrace(True)
    
      ws = websocket.WebSocketApp("ws://localhost:8080", 
                                  on_open=on_open,
                                  on_message=on_message)
    
      ws.run_forever()

Here we open a websocket connection, define callbacks for new events, and fall into a perpetual run loop to keep the server alive.

Now let's emit price updates every second by invoking fetchPrices and sending the JSON payload out to clients:


    import time
    
    while True:
      prices = fetchPrices()
      ws.send(prices)
    
      time.sleep(1)

Our Python backend continuously scrapes the latest crypto valuations and broadcasts them through our websocket.


## Connecting React to the Websocket 

Shifting to our React frontend, let's wire up a connection to the running Python websocket server.

We'll use the popular react-use-websocket hook to abstract away websocket complexity:


    // App.js
    
    import { useState, useEffect } from 'react';
    import { useWebSocket } from 'react-use-websocket';
    
    export default () => {
    
      // Websocket hooks
      const [socketUrl] = useState('ws://localhost:8080');
      const {lastMessage} = useWebSocket(socketUrl);
    
      useEffect(() => {
        if (lastMessage !== null) {
          console.log(lastMessage);
          // Update component state
        } 
      }, [lastMessage]);    
    
      return (
        // React component
      )

This establishes a persistent connection to our websocket endpoint, invoking the callback whenever a new message comes through.

Here, we simply log the message containing our real-time crypto prices to the console.
Next, let's properly handle these updates within React's state.

## Processing Streaming Data 

To display real-time charts, our React app needs to track the incoming price data in state.

Whenever we receive an update from our Python server, we'll decode the JSON payload and update state. 


    // Hook to store price data in state
    const [priceData, setPriceData] = useState({});
    
    useEffect(() => {
      if (lastMessage !== null) {
        const data = JSON.parse(lastMessage.data);
        setPriceData(data);
      }
    }, [lastMessage]);

Our `priceData` state will now always reflect the latest prices.


## React Crypto Charting

Finally, we can connect our state to React charting libraries to display elegant, real-time graphs.

Using `Chart.js`, for example, we pass our streaming price state into the chart data, causing a smooth animation on every update:


    // Price chart
    import { Line } from 'react-chartjs-2';
    
    const chartData = {
      datasets: [
        {
          label: 'BTC',
          data: priceData.btc // updated in real-time!
        } 
      ]
    }
    
    return (
      <div className="chart-wrapper">
        <Line data={chartData} />
      </div>
    )
## Conclusion

And there we have it - a comprehensive, real-time crypto charting dashboard in React!
By leveraging websockets, we tapped into a constant stream of up-to-date price data. 

Our Python server fetches valuations and funnels them to React via a persistent websocket connection, keeping state in sync.

There are plenty of additional features we could build, like:

- Tracking historical pricing data
- Supporting more crypto assets
- Implementing user accounts and portfolios
    

But our application already unlocks the fundamentals of combining Python and React with websockets for a dynamic, data-intensive experience.

The crypto world never sleeps, so having 24/7 visibility into price fluctuations is invaluable. Our charting dashboard provides precisely that - unlocking the real power of real-time data.

## Resource
- [Getting Started with Programming](https://www.codecademy.com/learn/learn-how-to-code?periods=year&plan_id=proGoldAnnualV2&utm_source=pepperjam&utm_medium=affiliate&utm_term=96525&clickId=4438617034&pj_creativeid=8-12462&pj_publisherid=96525)
- [Javascript Email with Nodemailer](https://blog.learnhub.africa/2023/06/08/4-javascript-email-frameworks-nodemailer-sendgrid-smtp-js-and-mailgun/)
- [How to send an email in node.js using nodemailer](https://blog.learnhub.africa/2023/01/18/how-to-send-an-email-in-node-js-using-nodemailer/)
- [Javascript Array method](https://www.w3schools.com/js/js_arrays.asp)
- [20 Best React JavaScript Frameworks For 2023](https://blog.learnhub.africa/2023/05/09/20-best-javascript-frameworks-for-2023/)