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.

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