What is this article about?
Goin’ Once, Goin’ Twice, Sold to the lady with the red dress 💃🏻
You have probably heard that many times in movies or public auctions. We can also find some online platforms, such as eBay, where you can bid on a product and get counterbids from other bidders.
Today we are going to build a mobile app with React Native and Socket.io - eBay style!
To use online bidding, We must stick to the same principles. We must give our bidder information as soon as a new bid comes.
In this article, you'll learn how to build a bidding application that allows users to add auction items and update the bid prices in real time using React Native and Socket.io.
Novu - the first open-source notification architecture
Just a quick background about us. Novu is the first open-source notification infrastructure. We basically help to manage all the product notifications. It can be In-App (the bell icon like you have in Facebook - Websockets), Emails, SMSs and so on.
I would be super happy if you could give us a star! And let me also know in the comments ❤️
https://github.com/novuhq/novu
*React Native is an open-source React framework that enables us to create native applications for both IOS and Android with JavaScript code.
Basic knowledge of React Native is required to understand this tutorial.*
What is Socket.io?
Socket.io is a popular JavaScript library that allows us to create real-time, bi-directional communication between web browsers and a Node.js server. It is a highly performant and reliable library designed to process a large volume of data with minimal delay. It follows the WebSocket protocol and provides better functionalities, such as fallback to HTTP long-polling or automatic reconnection, which enables us to build efficient real-time applications.
How to connect React Native to a Socket.io server
Here, you'll learn how to connect the bidding application to a Socket.io server. In this guide, I'll use Expo - the tool that provides an easier way of building React Native applications.
Installing Expo
Expo saves us from the complex configurations required to create a native application with the React Native CLI, making it the easiest and fastest way to build and publish React Native apps.
Ensure you have the Expo CLI, Node.js, and Git installed on your computer. Then, create the project folder and an Expo React Native app by running the code below.
mkdir bidding-app
cd bidding-app
expo init app
Expo allows us to create native applications using the Managed or Bare Workflow. We'll use the blank Managed Workflow in this tutorial.
? Choose a template: › - Use arrow-keys. Return to submit.
----- Managed workflow -----
❯ blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
Install Socket.io Client API to the React Native app.
cd app
expo install socket.io-client
Create a socket.js within a utils folder.
mkdir utils
touch socket.js
Then copy the code below into the socket.js file.
import { io } from "socket.io-client";
const socket = io.connect("http://localhost:4000");
export default socket;
The code snippet above creates a real-time connection to the server hosted at that URL. (We'll create the server in the upcoming section).
Create a styles.js file within the utils folder and copy the code below into the file. It contains all the styling for the chat application.
import { StyleSheet } from "react-native";
export const styles = StyleSheet.create({
addProductContainer: {
flex: 1,
},
productForm: {
width: "100%",
padding: 10,
},
formInput: {
borderWidth: 1,
padding: 15,
marginTop: 5,
marginBottom: 10,
},
addProductBtn: {
backgroundColor: "green",
padding: 15,
},
headerContainer: {
padding: 15,
flexDirection: "row",
justifyContent: "space-between",
},
mainContainer: {
flex: 1,
padding: 20,
},
loginContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
heading: {
fontSize: 25,
fontWeight: "bold",
marginBottom: 20,
},
formContainer: {
width: "100%",
padding: 15,
},
input: {
borderWidth: 1,
paddingHorizontal: 10,
paddingVertical: 15,
marginBottom: 15,
borderRadius: 3,
},
formLabel: {
marginBottom: 3,
},
loginbutton: {
backgroundColor: "green",
width: 150,
padding: 15,
alignItems: "center",
borderRadius: 5,
},
loginbuttonText: {
color: "#fff",
},
modalContainer: {
width: "100%",
backgroundColor: "#FAF7F0",
position: "fixed",
bottom: 0,
height: 400,
padding: 20,
flex: 1,
},
modalHeader: {
fontSize: 24,
fontWeight: "bold",
textAlign: "center",
marginBottom: 20,
},
modalPrice: {
width: "100%",
borderWidth: 1,
padding: 12,
},
updateBidBtn: {
width: 200,
padding: 15,
backgroundColor: "green",
marginTop: 15,
borderRadius: 3,
},
bidContainer: {
flex: 1,
backgroundColor: "#fff",
},
header: {
fontSize: 24,
fontWeight: "bold",
},
mainContainer: {
flex: 1,
padding: 20,
},
productContainer: {
borderWidth: 1,
borderColor: "#B2B2B2",
padding: 20,
height: 280,
backgroundColor: "#fff",
marginBottom: 10,
},
image: {
width: "100%",
height: "70%",
},
productDetails: {
width: "100%",
height: "30%",
padding: 10,
alignItems: "center",
},
productName: {
fontSize: 16,
fontWeight: "bold",
},
});
Install React Navigation and its dependencies. React Navigation allows us to navigate from one screen to another within a React Native application.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
Setting up the Node.js server
Here, I will guide you through creating the Socket.io Node.js server for real-time communication with the React Native application.
Create a server folder within the project folder.
cd bidding-app
mkdir server
Navigate into the server folder and create a package.json file.
cd server & npm init -y
Install Express.js, CORS, Nodemon, and Socket.io Server API.
npm install express cors nodemon socket.io
Express.js is a fast, minimalist framework that provides several features for building web applications in Node.js. CORS is a Node.js package that allows communication between different domains.
Nodemon is a Node.js tool that automatically restarts the server after detecting file changes, and Socket.io allows us to configure a real-time connection on the server.
Create an index.js file - the entry point to the Node.js server.
touch index.js
Set up a simple Node.js server using Express.js. The code snippet below returns a JSON object when you visit the http://localhost:4000/api in your browser.
//👇🏻 index.js
const express = require("express");
const app = express();
const PORT = 4000;
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.get("/api", (req, res) => {
res.json({
message: "Hello world",
});
});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
Next, add Socket.io to the project to create a real-time connection. Before the app.get() block, copy the code below.
//👇🏻 New imports
.....
const socketIO = require('socket.io')(http, {
cors: {
origin: "http://localhost:3000"
}
});
//👇🏻 Add this before the app.get() block
socketIO.on('connection', (socket) => {
console.log(`⚡: ${socket.id} user just connected!`);
socket.on('disconnect', () => {
socket.disconnect()
console.log('🔥: A user disconnected');
});
});
From the code snippet above, the socket.io("connection") function establishes a connection with the React app, creates a unique ID for each socket, and logs the ID to the console whenever you refresh the app.
When you refresh or close the app, the socket fires the disconnect event showing that a user has disconnected from the socket.
Configure Nodemon by adding the start command to the list of scripts in the package.json file. The code snippet below starts the server using Nodemon.