Scribd
Upload
2 views5 pages

Real Time Chat Application Use Case

The document outlines the development of a real-time chat application using the MERN stack and Socket.IO, enabling users to join chat rooms and send messages. It details the setup of the project, backend and frontend development, and includes simplified code examples for both. The application supports instant messaging, chat history storage in MongoDB, and responsive UI design.

Uploaded by

mythu1040
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

Real Time Chat Application Use Case

The document outlines the development of a real-time chat application using the MERN stack and Socket.IO, enabling users to join chat rooms and send messages. It details the setup of the project, backend and frontend development, and includes simplified code examples for both. The application supports instant messaging, chat history storage in MongoDB, and responsive UI design.

Uploaded by

mythu1040
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Use Case 3: Real-Time Chat Application

AIM

To develop a real-time chat application using the MERN stack and Socket.IO that allows users to

join chat rooms, send and receive instant messages, and store chat history in MongoDB.

PROCEDURE

1. Project Setup

- Create separate folders for frontend (React) and backend (Node.js + Express).

- Install required packages: express, mongoose, socket.io, cors, axios, react, etc.

2. Backend Development

- Set up Express server and Socket.IO.

- Connect to MongoDB for storing user and message data.

- Create APIs for user registration, login, and fetching chat history.

3. Frontend Development

- Create pages/components for login, chat rooms, and the chat window.

- Use Socket.IO-client to establish a WebSocket connection.

- Display incoming messages in real time.

4. Styling

- Use Bootstrap or CSS Flexbox/Grid for responsive UI.

5. Testing

- Run the application and test real-time message sending, user join/leave behavior, and data
storage.

MAIN CODE (Simplified)

Backend (Node.js + Express + Socket.IO)

---------------------------------------

const express = require('express');

const http = require('http');

const { Server } = require('socket.io');

const mongoose = require('mongoose');

const cors = require('cors');

const app = express();

app.use(cors());

app.use(express.json());

const server = http.createServer(app);

const io = new Server(server, { cors: { origin: '*' } });

mongoose.connect('mongodb://localhost/chatDB');

const messageSchema = new mongoose.Schema({

username: String,

text: String,

room: String,

timestamp: Date,

});

const Message = mongoose.model('Message', messageSchema);


io.on('connection', (socket) => {

socket.on('joinRoom', ({ username, room }) => {

socket.join(room);

socket.on('chatMessage', async (msg) => {

const message = new Message({ username, text: msg, room, timestamp: new Date() });

await message.save();

io.to(room).emit('message', { username, text: msg });

});

});

});

server.listen(5000, () => console.log('Server running on port 5000'));

Frontend (React + Socket.IO-client)

-----------------------------------

import React, { useState, useEffect } from 'react';

import { io } from 'socket.io-client';

const socket = io('http://localhost:5000');

function ChatRoom({ username, room }) {

const [message, setMessage] = useState('');

const [messages, setMessages] = useState([]);

useEffect(() => {

socket.emit('joinRoom', { username, room });

socket.on('message', (msg) => setMessages((prev) => [...prev, msg]));


}, [room]);

const sendMessage = () => {

socket.emit('chatMessage', message);

setMessage('');

};

return (

<div>

<h3>Chat Room: {room}</h3>

<div>

{messages.map((msg, i) => (

<p key={i}><strong>{msg.username}:</strong> {msg.text}</p>

))}

</div>

<input value={message} onChange={(e) => setMessage(e.target.value)} />

<button onClick={sendMessage}>Send</button>

</div>

);

export default ChatRoom;

OUTPUT

- Users can enter a username and room name.

- Messages sent appear instantly for all participants in the room.

- Chat history is saved in MongoDB.


- Notifications appear for new incoming messages.

RESULT

A real-time chat application was successfully built using the MERN stack and Socket.IO. It supports

multiple users, instant communication, chat room features, and persistent message storage.

You might also like