Real-time Communication

This section details the real-time messaging capabilities of the Chat App MERN, focusing on how messages are sent, received, and displayed instantly between users.

Backend Socket.IO Setup

The backend utilizes Socket.IO to manage real-time connections and message broadcasting. The socket.js file sets up the Socket.IO server and handles user connections and disconnections. It maintains a map (userSocketMap) to store the mapping between user IDs and their corresponding socket IDs, enabling direct communication with specific users.

// backend/src/lib/socket.js
import { Server }

State Management

Deployment and Dependencies

// backend/src/controllers/message.controller.js
import Message from "../models/message.model.js";
import cloudinary from "../lib/cloudinary.js";
import { getReceiverSocketId, io } from "../lib/socket.js";

export const sendMessage = async (req, res) => {
    try {
        const { text, image } = req.body;
        const { id: receiverId } = req.params;
        const senderId = req.user._id;

        let imageUrl;
        if (image) {
            const uploadResponse = await cloudinary.uploader.upload(image);
            imageUrl = uploadResponse.secure_url;
        }
        const newMessage = new Message({
            senderId,
            receiverId,
            text,
            image: imageUrl,
        });

        await newMessage.save();

        const receiverSocketId = getReceiverSocketId(receiverId);

        if(receiverSocketId) {
            io.to(receiverSocketId).emit("newMessage", newMessage);
        }

        res.status(201).json(newMessage);

    } catch (error) {
        console.log("Error in sendMessage controller:  ", error);
        res.status(500).json({ error: "Internal Server Error" });
    }
};

// frontend/src/components/ChatContainer.jsx
useEffect(() => {
    getMessages(selectedUser._id);
    subscribeToMessages();

    return () => unsubscribeFromMessages();
}, [selectedUser._id, getMessages, subscribeToMessages, unsubscribeFromMessages]);

// ... inside the return statement
{messages.map((message) => (
    <div
        key={message._id}
        className={`chat ${message.senderId == authUser._id ? "chat-end": "chat-start"} `}
        ref={messageEndRef}
    >
        {/* ... message content ... */}
    </div>
))}

// frontend/src/lib/axios.js
import axios from "axios";

export const axiosInstance = axios.create({
    baseURL: import.meta.env.MODE == "development" ? "http://localhost:5001/api": "/api",
    withCredentials: true,
});

Real-time Communication

Backend Socket.IO Setup

On this page

Real-time Communication

Backend Socket.IO Setup

On this page

Sending and Receiving Messages

Frontend API Interaction

Architecture Overview

Key Takeaways