5 Steps to Create Real-Time Web Application with Socket.io and MERN Stack

Tasadduq Ali
3 min readOct 21, 2023

--

Before we begin, Your support by clapping and leaving comments greatly influences my work. Additionally, if you’re interested in receiving a complimentary Full Stack Career consultation session every weekend, you can extend your support through PATREON.

To get started, create a new MERN stack application or use an existing one. If you’re creating a new project, you can use tools like Create React App for the front end and Express.js for the back end.

  1. Create the React App: In your project directory, run the following command to create a new React app:
bashCopy code
npx create-react-app my-realtime-app

2. Create the Express.js Backend: Create a new directory for your Express.js backend, navigate to it, and initialize a Node.js project:

bashCopy code
mkdir backend
cd backend
npm init -y

Install necessary dependencies like Express.js, Mongoose, and Socket.io:

bashCopy code
npm install express mongoose socket.io

3. Set Up MongoDB: Make sure you have a running MongoDB instance, either locally or on a cloud service like MongoDB Atlas.

Implementing Real-Time Features with Socket.io

Now that you have the basic setup in place, let’s implement real-time features using Socket.io.

Server-Side (Express.js)

  1. Initialize Socket.io: In your Express.js app, initialize Socket.io and attach it to your HTTP server. Create a server.js file with the following content:
javascriptCopy code
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// ... (Other Express.js setup)

// Socket.io setup
io.on('connection', (socket) => {
console.log('A user connected');

// Handle real-time events here
// Example: socket.on('chat message', (message) => { ... });

socket.on('disconnect', () => {
console.log('A user disconnected');
});
});

// ... (Rest of your Express.js routes)

// Start the server
server.listen(5000, () => {
console.log('Server is running on port 5000');
});

2. Handle Real-Time Events: In the io.on(‘connection’, …) block, you can handle real-time events. For example, you can implement a chat feature, notifications, or any other real-time functionality you need.

Client-Side (React)

  1. Integrate Socket.io Client: In your React application, install the Socket.io client library:
bashCopy code
npm install socket.io-client

2. Connect to the Socket.io Server: In your React component, connect to the Socket.io server using the following code:

javascriptCopy code
import React, { useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:5000'); // Replace with your server URL

function App() {
useEffect(() => {
// Socket.io event listeners go here

// Example:
// socket.on('chat message', (message) => { ... });

return () => {
// Clean up the socket connection when the component unmounts
socket.disconnect();
};
}, []);

return (
<div className="App">
{/* Your React components */}
</div>
);
}

export default App;

3. Handle Real-Time Events: In the useEffect block, you can set up event listeners to handle real-time events from the server.

if you have any questions or suggestions just do let me know on my Instagram or at codeculturepro@gmail.com

--

--

Tasadduq Ali

I am MERN Stack developer working in UAE Govt to digitize their massive services. I will help you to become highly skilled Coder 😉