Building a Real-time Chat App with React, Node.js, Socket.io, MongoDB, and Group Chats

In this tutorial, we will learn how to create a realtime responsive chat app using React for the frontend, Node.js for the backend, Socket.io for real-time communication, and MongoDB for storing our chat data. Additionally, we will implement group chats functionality within our chat app.

Prerequisites:
Before starting this tutorial, you should have a basic understanding of React, Node.js, Socket.io, MongoDB, and JavaScript. You should also have Node.js and MongoDB installed on your machine.

Step 1: Setting up the Node.js backend
Firstly, let’s create a new Node.js project. Open your terminal and run the following commands:

mkdir chat-app
cd chat-app
npm init -y

Next, let’s install the necessary dependencies for our backend server:

npm install express socket.io mongoose body-parser

Once the dependencies are installed, create a new file named server.js in the root directory of your project and add the following code:

const express = require("express");
const socketio = require("socket.io");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");

const app = express();
const server = require("http").createServer(app);
const io = socketio(server);

mongoose.connect("mongodb://localhost/chatApp", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

app.use(bodyParser.json());

// Define your routes here

const PORT = 5000;
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

In the above code snippet, we have set up an Express server, connected to a MongoDB database, and initialized Socket.io for real-time communication. Don’t forget to add your own routes for handling chat functionality.

Step 2: Creating the React frontend
To create the React frontend, open a new terminal window and run the following commands:

npx create-react-app chat-frontend
cd chat-frontend

Next, install the socket.io client library by running:

npm install socket.io-client

Now, open the src directory in your React project and create a new file named Chat.js. Add the following code to create a basic chat component:

import React, { useState, useEffect } from "react";
import io from "socket.io-client";

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState("");
  const socket = io("http://localhost:5000");

  useEffect(() => {
    socket.on("message", (message) => {
      setMessages([...messages, message]);
    });

    return () => {
      socket.disconnect();
    };
  }, [messages]);

  const sendMessage = () => {
    socket.emit("message", message);
    setMessage("");
  };

  return (
    <div>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>{msg}</li>
        ))}
      </ul>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default Chat;

This code snippet sets up a basic chat component that sends and receives messages via Socket.io.

Step 3: Implementing group chat functionality
To implement group chats in our chat app, we need to modify our backend server to handle multiple chat rooms.

Add the following code to your server.js to create a chat room for group chats:

const chatRooms = {};

io.on("connection", (socket) => {
  socket.on("joinRoom", (room) => {
    if (!chatRooms[room]) {
      chatRooms[room] = [];
    }
    chatRooms[room].push(socket);

    socket.on("message", (message) => {
      chatRooms[room].forEach((s) => {
        if (s !== socket) {
          s.emit("message", message);
        }
      });
    });

    socket.on("disconnect", () => {
      const index = chatRooms[room].indexOf(socket);
      if (index !== -1) {
        chatRooms[room].splice(index, 1);
      }
    });
  });
});

In the above code, we maintain a list of chat rooms where each room is an array of sockets that have joined the room. We broadcast messages to all sockets in a particular room except for the sender.

To use the group chat functionality in our React frontend, we need to update the Chat.js component as follows:

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState("");
  const [room, setRoom] = useState("general");
  const socket = io("http://localhost:5000");

  useEffect(() => {
    socket.emit("joinRoom", room);

    socket.on("message", (msg) => {
      setMessages([...messages, msg]);
    });

    return () => {
      socket.disconnect();
    };
  }, [messages, room]);

  const sendMessage = () => {
    socket.emit("message", message);
    setMessage("");
  };

  return (
    <div>
      <select onChange={(e) => setRoom(e.target.value)}>
        <option value="general">General</option>
        <option value="tech">Tech</option>
      </select>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>{msg}</li>
        ))}
      </ul>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

Now, you have successfully implemented group chat functionality in your chat app. You can create multiple chat rooms and switch between them using the dropdown menu.

Conclusion:
In this tutorial, we have created a realtime responsive chat app with React, Node.js, Socket.io, and MongoDB. We have also implemented group chat functionality within our chat app. Now you can further enhance your chat app by adding features like user authentication, file uploads, and message encryption. Happy coding!