5 Steps to Create Real-Time Web Application with Socket.io and MERN Stack
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.
- 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)
- 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)
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