WEB CHATROOM
PROJECT REPORT
Winter Arrear
Submitted by
Neil Martins (16BCE2210)
B.Tech
Computer Science Engineering
CSE3021 – Social and Information Networks
Project Guide
Prof. Lydia Jane
SCOPE (VIT Vellore)
1. Abstract
The term chat room, or chatroom (and sometimes group chat), is primarily
used to describe any form of synchronous conferencing, occasionally
even asynchronous conferencing. The term can thus mean any technology
ranging from real-time online chat and online interaction with strangers
(e.g., online forums) to fully immersive graphical social environments.The
primary use of a chat room is to share information via text with a group of
other users. Generally speaking, the ability to converse with multiple people
in the same conversation differentiates chat rooms from instant
messaging programs, which are more typically designed for one-to-one
communication. The users in a particular chat room are generally connected
via a shared internet or other similar connection, and chat rooms exist
catering for a wide range of subjects. New technology has enabled the use
of file sharing and webcams to be included in some programs. This would
be considered a chat room.
2. Problem Statement and Objective
The main objectives include :
• To create a place where multiple people for different places can come
and chat on a single platform.
• To create a place where people can securely talk without bullying(verbal
or emotional)
• To create a secure sign in chatroom
3. Literature Survey
Communication has entered all the levels of life whether you are a lecturer
or a student. The last decade provides the world with numerous works
devoted to the analysis of speaking specificity which includes phonetics,
lexicology, pragmatics and many other aspects of language building. There
are many works which are devoted to the analysis of slang among which
are the papers of Crystal D., Stryga E.V., Zaitzeva S.V., Zavodna L. [6; 4;
2; 1]. Nowadays communication serves as a key to everything – decision
making, interior politics and various problems which are to be solved with
the help of negotiations. But modern types of communication are even
broader and for the last decade they have been binding themselves with
the Internet. Trendy social networks have already reached every home and
position; they do not simply provide people with news and details from the
personal life they can work as a source of interaction which obviously
includes communication in formal as well as informal styles.
Instant messaging (IM) and Internet chat communication have seen
enormous growth over the last several years. IM is the private
network communication between two users, whereas a chat
session is the network communication between two or more users.
Chat sessions can either be private, where each user is invited to join
the session, or public, where anyone can join the session. There are on
the order of 100 million Internet IM users, where a user is defined as a
u n i q u e n a m e o n o n e o f t h e m a j o r p u b l i c I M n e t w o r k s — AOL
Instant Messenger (AIM), Microsoft Messenger (MSN), or Yahoo!
Messenger (YMSG). To date, little has been documented about the
network protocols used by these systems. The protocols are not
standardized, many of them are proprietary, and they are even seen
as a control point in this business by the companies involved. This
is demonstrated by the r e p e a t e d at t em p ts of t h e IM s e r v ic es t o
l o c k o u t u s e rs of other systems, in an attempt to keep their
customers private.However, enough information is available to
determine the broad characteristics of these systems. We have
also used packet tracing of IM traffic in order to glean further
details into these protocols and systems
4. Implementation
I used google firebase to sync my web chatroom with google logins ans
well as javascript and to code and allow my web app to accept and print
inputs and outputs and React to create the app.
App javacript code
import React, { useRef, useState } from 'react';
import './App.css';
import
import
import
import
firebase from 'firebase/app';
'firebase/firestore';
'firebase/auth';
'firebase/analytics';
import { useAuthState } from 'react-firebase-hooks/auth';
import { useCollectionData } from 'react-firebase-hooks/firestore';
firebase.initializeApp({
apiKey: "AIzaSyAu-eJY2Al-BbNsBmwuY20SvJNVHSGrCxI",
authDomain: "fir-test-4f918.firebaseapp.com",
projectId: "fir-test-4f918",
storageBucket: "fir-test-4f918.appspot.com",
messagingSenderId: "876526086701",
appId: "1:876526086701:web:b7c84f38d9a357c086a6a4"
})
const auth = firebase.auth();
const firestore = firebase.firestore();
const analytics = firebase.analytics();
function App() {
const [user] = useAuthState(auth);
return (
<div className="App">
<header>
<h1>⚛️🔥💬</h1>
<SignOut />
</header>
<section>
{user ? <ChatRoom /> : <SignIn />}
</section>
</div>
);
}
function SignIn() {
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider);
}
return (
<>
<button className="sign-in" onClick={signInWithGoogle}>Sign in with
Google</button>
<p>Do not violate the community guidelines or you will be banned for
life!</p>
</>
)
}
function SignOut() {
return auth.currentUser && (
<button className="sign-out" onClick={() => auth.signOut()}>Sign
Out</button>
)
}
function ChatRoom() {
const dummy = useRef();
const messagesRef = firestore.collection('messages');
const query = messagesRef.orderBy('createdAt').limit(25);
const [messages] = useCollectionData(query, { idField: 'id' });
const [formValue, setFormValue] = useState('');
const sendMessage = async (e) => {
e.preventDefault();
const { uid, photoURL } = auth.currentUser;
await messagesRef.add({
text: formValue,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
uid,
photoURL
})
setFormValue('');
dummy.current.scrollIntoView({ behavior: 'smooth' });
}
return (<>
<main>
{messages && messages.map(msg => <ChatMessage key={msg.id} message={msg}
/>)}
<span ref={dummy}></span>
</main>
<form onSubmit={sendMessage}>
<input value={formValue} onChange={(e) => setFormValue(e.target.value)}
placeholder="say something nice" />
<button type="submit" disabled={!formValue}>🕊️</button>
</form>
</>)
}
function ChatMessage(props) {
const { text, uid, photoURL } = props.message;
const messageClass = uid === auth.currentUser.uid ? 'sent' : 'received';
return (<>
<div className={`message ${messageClass}`}>
<img src={photoURL ||
'https://api.adorable.io/avatars/23/abott@adorable.png'} />
<p>{text}</p>
</div>
</>)
}
export default App;
I have also used CSS to help give my project a good UI
CSS code:
body {
background-color: #282c34;
}
.App {
text-align: center;
max-width: 728px;
margin: 0 auto;
}
.App header {
background-color: #181717;
height: 10vh;
min-height: 50px;
color: white;
position: fixed;
width: 100%;
max-width: 728px;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
padding: 10px;
box-sizing: border-box;
}
.App section {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
background-color: rgb(40, 37, 53);
}
main {
padding: 10px;
height: 80vh;
margin: 10vh 0 10vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
main::-webkit-scrollbar {
width: 0.25rem;
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
background: #6649b8;
}
form {
height: 10vh;
position: fixed;
bottom: 0;
background-color: rgb(24, 23, 23);
width: 100%;
max-width: 728px;
display: flex;
font-size: 1.5rem;
}
form button {
width: 20%;
background-color: rgb(56, 56, 143);
}
input {
line-height: 1.5;
width: 100%;
font-size: 1.5rem;
background: rgb(58, 58, 58);
color: white;
outline: none;
border: none;
padding: 0 10px;
}
button {
background-color: #282c34; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
font-size: 1.25rem;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.sign-in {
color: #282c34;
background: white;
max-width: 400px;
margin: 0 auto;
}
ul, li {
text-align: left;
list-style: none;
}
p {
max-width: 500px;
margin-bottom: 12px;
line-height: 24px;
padding: 10px 20px;
border-radius: 25px;
position: relative;
color: white;
text-align: center;
}
.message {
display: flex;
align-items: center;
}
.sent {
flex-direction: row-reverse;
}
.sent p {
color: white;
background: #0b93f6;
align-self: flex-end;
}
.received p {
background: #e5e5ea;
color: black;
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 2px 5px;
}
5. Testing & Performance Evaluation
I have created a chatroom with allows users using a Gmail login and also
allowed multiple people to login and post as well as receive the data on my
firebase login so I can police and control the data
6. Conclusion & Future Enhancements
As we have seen, social media especially chatrooms play a large
part of our daily communications in the 21st century. In my project I
have kept a safe way to chat with multiple people in a single place. I
have created a secure gmail sign in and google firebase api to allow
me to constantly check and deliver warnings if required.We can add
the option of a live webcam chat in the future.We can also give
automated warnings and ban certain people with a bad pre-behaviour
in other chat rooms.We can secure our data better
7. REFRERENCES
[1] T. Dierks and C. Allen, “The TLS Protocol Version 1.0,” IETF RFC 2246, Jan.
1999.
[2] D. Kormann and A. Rubin, “Risks of the Passport Single Signon
Protocol,”Comp. Networks, vol. 33, 2000, pp. 51–58.
[3] A. Pashalidis and C. Mitchell, “A Taxonomy of Single Sign-on
Systems,” 8th Australasian Conf. Info. Sec. and Privacy, Wollongong,
Australia, July 2003.
[4] B. Campbell et al., “Session Initiation Protocol (SIP) Extension for
Instant Messaging,” IETF RFC 3428, Dec. 2002.
[5] P. Saint-Andre, Ed., “Extensible Messaging and Presence Protocol
(XMPP):
Instant Messaging and Presence,” IETF RFC 3921, Oct. 2004.
[6] J. Rosenberg et al., “SIP: Session Initiation Protocol,” IETF RFC 3261, June
2002.
[7] B. Campbell, R. Mahy, and C. Jennings, “The Message Session
Relay Protocol,” draft-ietf-simple-message-sessions-11.txt, July 2005.
[8] R. Mahy, “Benefits and Motivation for Session Mode Instant
Messaging,”draft-mahy-simple-why-session-mode-01.txt, Feb. 2005.
[9] Jabber Software Foundation, http://www.jabber.org
[10] J. Oikarinen and D. Reed, “Internet Relay Chat Protocol,” IETF
RFC 1459,May 1993