Professional Documents
Culture Documents
Aditya Report
Aditya Report
On
Online Public Chat Rooms
605: Major Project Work
By
Aditya Pratap Singh
(Roll No: - 180732106003)
Project report submitted in partial fulfillment of the requirements
For the award of the degree of
“Bachelor of Computer application”
Session (2018-2021)
Under the guidance of
MR. VEENESH SHROTRIYA
(Assistant Professor of Computer Science Department)
External Examiner
ACKNOWLEDGMENT
We wish to express our gratitude to our parents and our teachers and our
Head of the Department, Veenesh Shrotriya, who gave us full support to
finish the project work successfully.
We wish to express our grateful thank to our project guide Veenesh
Shrotriya , Assistant Professor of CS Department who gave us full
support and her constant encouragement, valuable suggestion and helping
tendency which has make us to carry out and finish the project work
successfully
Our thanks to all other faculty and non-teaching staff members of our
department for their support and pees for having stood by us and helped us
to complete this project
PROJECT ASSOCIATE
ADITYA PRATAP SINGH
(Roll No: - 180732106003)
INDEX
2) System Requirements.
6) Project Structure.
8) Coding.
9) Conclusion.
10) Bibliography.
Online Public Chat Rooms
3)-Games: Games are also often played in chat rooms. These are
typically implemented by an external process such as an IRC bot joining the
room to conduct the game. Trivia question & answer games are most
prevalent. A historic example is Hunt the Wumpus. Chatroom-based
implementations of the party game Mafia also exist. A similar but more
complex style of text-based gaming are MUDs, in which players interact
within a textual, interactive fiction–like environment.
4 GB Ram.
Node Js Installed.
Git Installed.
Why React?
Now, the main question arises in front of us is why one should use
React. There are so many open-source platforms for making the front-end
web application development easier, like Angular. Let us take a quick look
on the benefits of React over other competitive technologies or frameworks.
With the front-end world-changing on a daily basis, it’s hard to devote time
to learning a new framework – especially when that framework could
ultimately become a dead end. So, if you're looking for the next best thing
but you're feeling a little bit lost in the framework jungle, I suggest checking
out React.
Real-time applications:
A real-time application (RTA) is an application that functions within a period
that the user senses as immediate or current.
Some examples of real-time applications are −
Instant messengers − Chat apps like Whatsapp, Facebook Messenger,
etc. You need not refresh your app/website to receive new messages.
Push Notifications − When someone tags you in a picture on Facebook,
you receive a notification instantly.
Collaboration Applications − Apps like google docs, which allow multiple
people to update same documents simultaneously and apply changes to all
people's instances.
Online Gaming − Games like Counter Strike, Call of Duty, etc., are also
some examples of real-time applications.
Why Socket.IO?
Writing a real-time application with popular web applications stacks like
LAMP (PHP) has traditionally been very hard. It involves polling the server
for changes, keeping track of timestamps, and it is a lot slower than it
should be.
Sockets have traditionally been the solution around which most real-time
systems are architected, providing a bi-directional communication channel
between a client and a server. This means that the server can push
messages to clients. Whenever an event occurs, the idea is that the server
will get it and push it to the concerned connected clients.
Socket.IO is quite popular, it is used by Microsoft Office, Yammer,
Zendesk, Trello, and numerous other organizations to build robust real-
time systems. It one of the most powerful JavaScript
frameworks on GitHub, and most depended-upon NPM (Node Package
Manager) module. Socket.IO also has a huge community, which means
finding help is quite easy.
Dependencies used in this project
Fig 1
Fig 2
Project Structure
Data Flow Diagram
CODING ( PROGRAMMING )
App.js
import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Join from "./components/Join/Join";
import Chat from "./components/Chat/Chat";
const App=() => (
<Router>
<Route path="/" exact component={Join} />
<Route path="/chat" component={Chat} />
</Router>
);
3) Chat.js:
import React, { useState, useEffect } from "react";
import queryString from "query-string";
import io from "socket.io-client";
import InfoBar from "../InfoBar/InfoBar";
import Input from "../Input/Input";
import TextContainer from "../TextContainer/TextContainer";
import Messages from "../Messages/Messages";
import "./Chat.css";
let socket;
useEffect(() => {
const { name, room } = queryString.parse(location.search);
socket = io(ENDPOINT);
setName(name);
setRoom(room);
socket.emit("join", { name, room }, (error) => {
if (error) {
alert(error);
document.location = "/";
}
});
return () => {
socket.disconnect();
socket.off();
};
}, [ENDPOINT, location.search]);
useEffect(() => {
socket.on("message", (message) => {
setMessages([...messages, message]);
});
socket.on("roomData", ({ users }) => {
setUsers(users);
});
return () => {
socket.off();
};
}, [messages]);
console.log(message, messages);
return (
<div>
<div>
<TextContainer
users={users}
pageWrapId={"page-wrap"}
outerContainerId={"outer-container"}
/>
</div>
<div className="outerContainer" id="page-wrap">
<div className="container">
<InfoBar room={room} />
<Messages messages={messages} name={name} />
<Input
message={message}
setMessage={setMessage}
sendMessage={sendMessage}
/>
</div>
</div>
</div>
);
};
4) InfoBar.js:
import React from "react";
import "./InfoBar.css";
import closeIcon from "../../icons/closeIcon.png";
import onlineIcon from "../../icons/onlineIcon.png";
5) Input.js:
import React from 'react';
import './Input.css';
</form>
)
export default Input;
6) Join.js:
import React, {useState} from 'react';
import { Link } from 'react-router-dom';
import './Join.css';
return(
<div className="joinOuterContainer">
<div className="joinInnerContainer">
<h1 className="heading">Join</h1>
<div><input placeholder="Name" className="joinInput" type="text"
onChange={(event) => setName(event.target.value)} /></div>
<div><input placeholder="Room" className="joinInput mt-20"
type="text" onChange={(event) => setRoom(event.target.value)} /></div>
<Link onClick={event => (!name || !room) ? event.preventDefault() :
null} to={ `/chat?name=${name}&room=${room}`}>
<button className="button mt-20" type="submit">Sign
In</button>
</Link>
</div>
</div>
)
}
7) Messages.js:
import React from 'react';
import ScrollToBottom from 'react-scroll-to-bottom';
import Message from '../Message/Message';
import './Messages.css';
8) Message.js
import React from 'react';
import ReactEmoji from 'react-emoji';
import './Message.css';
const Message = ({ message: {user, text}, name }) => {
let isSentByCurrentUser = false;
const trimmedName = name.trim().toLowerCase();
if(user === trimmedName){
isSentByCurrentUser = true;
}
return (
isSentByCurrentUser
?(
<div className="messageContainer justifyEnd">
<p className="sentText pr-10">{trimmedName}</p>
<div className="messageBox backgroundBlue">
<p className="messageText
colorWhite">{ReactEmoji.emojify(text)}</p>
</div>
</div>
)
:(
<div className="messageContainer justifyStart">
9) TextContainer.js:
import React from 'react';
import { bubble as Menu } from 'react-burger-menu';
import onlineIcon from '../../icons/onlineIcon.png';
import './TextContainer.css';
socket.emit("message", {
user: "admin",
text: `${user.name}, welcome to the room ${user.room}`,
});
socket.broadcast
.to(user.room)
.emit("message", { user: "admin", text: `${user.name}, has joined` });
socket.join(user.room);
io.to(user.room).emit("roomData", {
room: user.room,
users: getUsersInRoom(user.room),
});
callback();
});
callback();
});
socket.on("disconnect", () => {
const user = removeUser(socket.id);
if (user) {
io.to(user.room).emit("message", {
user: "admin",
text: `${user.name} has left.`,
});
io.to(user.room).emit("roomData", {
room: user.room,
users: getUsersInRoom(user.room),
});
}
});
});
11) router.js:
const express = require('express');
const router = express.Router();
module.exports = router;
12) users.js:
const users = [];
if (existingUser) {
return { error: "Username is taken, please take another one!" };
}
users.push(user);
return { user };
};
13) style.css:
#page-wrap {
padding-bottom: 10px;
padding-top: 10px;
}
.outerContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)),
url(../../icons/background2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0)
);
border-radius: 8px;
height: 95%;
}
.container {
width: 95%;
height: 95vh;
background-size: 95vw 95vh;
}
}
.leftInnerContainer {
flex: 0.5;
display: flex;
align-items: center;
margin-left: 40%;
color: white;
}
.rightInnerContainer {
display: flex;
flex: 0.5;
justify-content: flex-end;
margin-right: 5%;
}
.onlineIcon {
margin-right: 5%;
}
.form {
display: flex;
}
.input {
border: 2px solid #05d0eb;
width: 80%;
border-right: none;
background: #e5e4e2;
font-size: 1.2em;
height: 50px;
padding-left: 5%;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
}
.sendButton {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #ff3131;
border: 2px solid #d2042d;
border-left: none;
height: 50px;
display: inline-block;
width: 20%;
cursor: pointer;
outline: none;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
html,
body {
padding: 0;
margin: 0;
font-family: sans-serif;
background: #34495e;
}
#root {
height: 100vh;
}
*{
box-sizing: border-box;
}
.joinOuterContainer {
display: flex;
justify-content: center;
text-align: center;
background: url(../../icons/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
align-items: center;
}
.joinInnerContainer {
width: 96%;
max-width: 350px;
background: none;
text-align: center;
border-radius: 10px;
padding-bottom: 40px;
}
.joinInput {
background: none;
display: block;
margin: 5px auto;
text-align: center;
border: 2px solid #05d0eb;
padding: 14px 10px;
width: 80%;
outline: none;
color: white;
border-radius: 30px;
transition: 0.25s;
}
.joinInput:focus {
width: 85%;
border-color: #2ecc71;
}
.heading {
color: white;
font-size: 2.5em;
padding-bottom: 10px;
border-bottom: 2px solid white;
text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #fff,
0 0 82px #fff, 0 0 92px #fff, 0 0 102px #fff, 0 0 151px #fff;
}
.button {
border: 0;
background: none;
display: block;
margin: 60px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.button:hover {
background: #2ecc71;
}
.mt-20 {
margin-top: 20px;
}
.messageBox {
background: #f3f3f3;
border-radius: 20px;
padding: 0px 10px;
color: white;
display: inline-block;
max-width: 80%;
}
.messageText {
width: 100%;
letter-spacing: 0;
float: left;
font-size: 1.1em;
word-wrap: break-word;
}
.messageText img {
vertical-align: middle;
}
.messageContainer {
display: flex;
justify-content: flex-end;
padding: 0 5%;
margin-top: 3px;
}
.sentText {
display: flex;
align-items: center;
font-family: Helvetica;
color: #fff;
letter-spacing: 0.3px;
}
.pl-10 {
padding-left: 10px;
}
.pr-10 {
padding-right: 10px;
}
.justifyStart {
justify-content: flex-start;
}
.justifyEnd {
justify-content: flex-end;
}
.colorWhite {
color: white;
}
.colorDark {
color: #353535;
}
.backgroundBlue {
background: #ff4500;
}
.backgroundLight {
background: #f3f3f3;
}
.messages {
padding: 5% 0;
overflow: auto;
flex: auto;
}
*{
box-sizing: border-box;
}
#page-wrap {
padding-bottom: 10px;
padding-top: 10px;
}
.textContainer {
display: flex;
flex-direction: column;
color: white;
height: 60%;
justify-content: space-between;
outline: none;
}
.activeContainer {
display: flex;
align-items: center;
}
.activeItem {
display: flex;
align-items: center;
}
.activeContainer img {
padding-right: 10px;
}
.textContainer h1 {
margin-bottom: 30px;
}
.bm-burger-button {
position: fixed;
width: 20px;
height: 15px;
left: 36px;
top: 36px;
}
/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations -
you should not need to touch it in most cases
*/
.bm-menu-wrap {
position: fixed;
height: 100%;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
.bm-item {
display: inline-block;
color: #fff;
margin-bottom: 10px;
text-align: left;
text-decoration: none;
transition: color 0.2s;
}
.bm-item:hover {
color: #ffffff;
}
Conclusion
2) Css-tricks.com.
3) Github.com.
4) Stack Overflow.
5) Socket IO Documentation.