Prerequisites

To follow along, ensure that you have npm installed on your machine.

Creating the Crypto Price Consumer React Application

Open your terminal and navigate to the websocket-crypto-simulator folder, then execute the following command:

npx create-react-app react-crypto-price-consumer

This command creates a new React application titled react-crypto-price-consumer. After the setup completes, launch the application in your favorite IDE.

Installing Necessary npm Packages

Next, we need to install several npm packages: antd, sockjs-client, net, and stompjs. In the terminal, navigate to the react-crypto-price-consumer directory and run:

npm install antd sockjs-client net stompjs

Organizing the Codebase

To maintain an organized structure, create a folder named components within the src directory.

Creating the Home.js Component

Inside the components folder, create a file called Home.js with the following code:

import React, { useEffect, useState } from 'react';

import SockJS from 'sockjs-client';

import Stomp from 'stompjs';

import { Layout, Col, Row, Table } from 'antd';

const { Header, Content } = Layout;

function Home() {

const [cryptoUpdates, setCryptoUpdates] = useState([]);

const socket = new SockJS("http://localhost:8080/ws");

const stompClient = Stomp.over(socket);

useEffect(() => {

stompClient.connect({}, connectCallback, errorCallback);

}, []);

const errorCallback = (error) => {

console.error("WebSocket connection error: ", error);

};

const connectCallback = () => {

console.log("Connected");

stompClient.subscribe("/topic/prices", onMessageCallback);

};

const onMessageCallback = (message) => {

const cryptoUpdate = JSON.parse(message.body);

const data = {

key: new Date().getTime(),

datetime: cryptoUpdate.datetime,

crypto: cryptoUpdate.crypto,

price: cryptoUpdate.price,

};

setCryptoUpdates(prevUpdates => [data, ...prevUpdates]);

};

const columns = [

{ title: 'Date/Time', dataIndex: 'datetime', key: 'datetime' },

{ title: 'Crypto', dataIndex: 'crypto', key: 'crypto' },

{ title: 'Price', dataIndex: 'price', key: 'price' },

];

return (

<Layout>

<Header style={{ textAlign: 'center', color: '#fff', backgroundColor: '#333', fontSize: '2em' }}>

Cryptocurrency Prices

</Header>

<Content>

<Table dataSource={cryptoUpdates} columns={columns} rowKey="key" />

</Content>

</Layout>

);

}

export default Home;

The Home component establishes a WebSocket connection using SockJS and Stomp to display real-time cryptocurrency prices. It subscribes to the /topic/prices channel and updates the UI with the incoming data.

Editing the App.js File

Now, we will modify the App.js file with the following content:

import React from 'react';

import Home from './components/Home.js';

function App() {

return <Home />;

}

export default App;

The App component serves as the main entry point, rendering the Home component, which displays our cryptocurrency price updates.

Demonstration of the Application

To start the Crypto Price Producer app, navigate to the root folder of the crypto-price-producer and run:

./mvnw clean spring-boot:run

In a separate terminal window, navigate to the react-crypto-price-consumer root folder and execute:

npm start

To view the price updates, open your browser and navigate to http://localhost:3000.

Conclusion

In this article, we successfully built the React Crypto Price Consumer application. This consumer connects to the Spring Boot Crypto Price Producer WebSocket, allowing us to track real-time cryptocurrency price updates. We demonstrated how both the Producer and Consumer applications function together.

Additional Resources

For further reading, check out the article on running a Real-time Crypto Price Simulator in Minikube (Kubernetes).

Support and Engagement

If you found this article helpful, consider supporting me by engaging with my content:

👏 Clap, highlight, and respond to my story.

🌐 Share this story on your social media.

🔔 Follow me on Medium, LinkedIn, and Twitter.

✉️ Subscribe to my newsletter for more updates.

Continuing with the Crypto Price App

Next, we will delve into a beginner-friendly project that focuses on building a crypto price app using React.

This video serves as a beginner's project for building a crypto price app in React, perfect for those just starting with React development.