Chat Application

A SUMMER INTERN PROJECT REPORT

Submitted By
Piyush Kakkar
Enrolment No: 02996403114

Under the supervision of

Mr. Sanjeev Bhat
(Manager, Information Services)
Hindustan Petroleum Corporation Ltd.
North Zone Office, Laxmi Nagar, Delhi - 110092

In partial fulfilment of Summer Internship for award of the degree

Of

BACHELORS OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY

Maharaja Agrasen Institute of Technology,

PSP area, Sector – 22, Rohini, New Delhi – 110085
(Affiliated to Guru Gobind Singh Indraprastha University, New Delhi)

[i]
 ACKNOWLEDGEMENT

The internship opportunity I had with [Name of the Company] was a great chance for
learning and professional development. Therefore, I consider myself as a very lucky
individual as I was provided with an opportunity to be a part of it. I am also grateful for
having a chance to meet so many wonderful people and professionals who led me though this
internship period.

Bearing in mind previous I am using this opportunity to express my deepest gratitude and
special thanks to Dr Mamta Khaneja who in spite of being extraordinarily busy with her
duties, took time out to hear, guide and keep me on the correct path and allowing me to carry
out my project at their esteemed organization and extending during the training.

I would like to express my gratitude towards the members of Solid State Physics Laboratory
for their kind cooperation and encouragement which helped me in the completion of the
project.

I would like to thank my HOD Mr. ML Sharma for his guidance and support. I express my
sincere thanks and gratitude to my project guide Mr. Sanjeev Bhat, Manager, Information
Services, Hindustan Petroleum Corp. Ltd. for providing me the opportunity to pursue my
training at the office.
Finally, I would like to express my deep appreciation to my family and friends who have
been a constant source of inspiration. I am extremely grateful to them for always encouraging
me wherever and whenever I needed them.

Kartik Wadehra
Enrolment No: 02996403114
Information Technology Engineering
7 IT 3

[ ii ]
 Maharaja Agrasen Institute of Technology

To Whom It May Concern

I Piyush Kakkar, Enrolment No. 02996403114, a student of

Bachelors of Technology (IT), a batch of 2014 - 2018, Maharaja
Agrasen Institute of Technology, Delhi hereby declare that the
Summer Internship project report entitled “Chat Application” is an
original work and the same has not been submitted to any other
Institute for the award of any other degree.

Date: 31 July, 2017

Place: Delhi

Piyush Kakkar
Enrolment No: 02996403114
Information Technology Engineering
7 IT 3

[ iii ]
 ABSTRACT

This project is a web based chat application for the employees of an

office. The objective of the project is to provide an easy way of
communication between the users of the application.
Teleconferencing or Chatting, is a method of using technology to
bring people and ideas “together” despite of the geographical barriers.
The technology has been available for years but the acceptance of it
was quite recent. This project is a web application which is hosted on
the server computer of a network. The users are required to visit the
website link on which the application is hosted in order to chat.
Users can practice two kinds of chatting, public one (message is
broadcasted to multiple connected users) and private one (between
any 2 users only). There is also a facility to share images, videos and
different types of files like docs, pdfs, ppts, excel sheets and text files.

[ iv ]
 Hindustan Petroleum Corporation Limited

Future full of Energy - Where there’s Energy, there’s HP

Hindustan Petroleum Corporation Limited (HPCL) is an Indian state-
owned oil and natural gas company with its headquarters at Mumbai,
Maharashtra. It has about 25% market-share in India among public-sector
companies (PSUs) and a strong marketing infrastructure.
HPCL is a Government of India Enterprise with a Navratna Status, and
a Forbes 2000 and Global Fortune 500 company. It had originally been
incorporated as a company under the Indian Companies Act 1913. It is listed on
the Bombay Stock exchange (BSE) and National Stock Exchange (NSE), India.

Propelling airplanes, mechanizing agriculture, energizing industries, igniting

stoves, lighting lanterns... HP is synonymous with energy in India.
For the last 40 years and more, Hindustan Petroleum has meant different
things to different people. For some it represents an abundant supply of Petrol
and Diesel. For others, it stands for the easy availability of LPG and lubricants.
Thousands of others see in it an inexhaustible reservoir of Kerosene and other
petroleum products for meeting their energy needs. For all of them HP signifies
an ever- radiant source of energy. Energy that is making a big difference to
millions of lives. HP is all set to unveil an exciting new phase in its growth.
Diversifying into oil Exploration and Production, Power Generation, Renewable
Energy ventures and much more. Confident of creating a Future full of
Energy.

HPCL owns & operates 2 major refineries producing a wide variety of

petroleum fuels & specialties, one in Mumbai (West Coast) of 7.5 Million
Metric Tonnes Per Annum (MMTPA) capacity and the other
in Visakhapatnam, (East Coast) with a capacity of 8.3 MMTPA. HPCL also
owns and operates the largest Lube Refinery in the country producing Lube
Base Oils of international standards, with a capacity of 428 TMT. This Lube
Refinery accounts for over 40% of the India's total Lube Base Oil production.
Presently HPCL produces over 300+ grades of Lubes, Specialities and Greases.

[v]
[ vi ]
 TABLE OF CONTENTS

Topic Page No.

Acknowledgement ii
Certificate iii
To Whom It May Concern iv
Abstract v
About Company(HPCL) vi
Introduction 1
System Requirements 3
Languages and frameworks used 4
AngularJS 4
Bootstrap 5
jQuery 6
Socket.IO 7
NodeJS 8
MySQL 9
Project Analysis 10
Database Tables 19
Future Enhancements 21
Bibliography 22

[ vii ]
[ viii ]
 INTRODUCTION

1. Introduction

Teleconferencing or Chatting, is a method of using technology to

bring people and ideas “together” despite of the geographical barriers.
The technology has been available for years but the acceptance of it
was quite recent. This project is a web application which is hosted on
the server computer of a network. The users are required to visit the
website link on which the application is hosted in order to chat.
Users can practice two kinds of chatting, public one (message is
broadcasted to multiple connected users) and private one (between
any 2 users only). There is also a facility to share images, videos and
different types of files like docs, pdfs, ppts, excel sheets and text files.
Typically, the user will first login or signup to the chat application.
On successful login, the user reaches the main page. At this page, the
user can select another user from recent chats list or from new users
list for chatting. After selecting user, he will be displayed with their
older conversation, the user can now type message in the input box or
can attach files and send them.
2. System Objective

Communication over a network is one field where this tool finds wide
ranging application. Chat application establishes a connection
between 2 or more systems connected over an intra-net or ad-hoc.
This tool can be used for large scale communication and conferencing
in an organization or campus of vast size, thus increasing the standard
of co-operation. In addition, it converts the complex concept of
sockets to a user-friendly environment. This application also provides
facility to share files. This application can have further potentials,
such as voice chatting and call facility options that can be worked
upon later.

[1]
3. Sockets Overview

A socket is an object that represents a low-level access point to the IP

stack. This socket can be opened or closed or one of a set number of
intermediate states. A socket can send and receive data down
disconnection. Data is generally sent in blocks of few kilobytes at a
time for efficiency; each of these blocks are called a packet.
All packets that travel on the internet must use the Internet Protocol.
This means that the source IP address, destination address must be
included in the packet. Most packets also contain a port number. A
port is simply a number between 1 and 65,535 that is used to
differentiate higher protocols. Ports are important when it comes to
programming your own network applications because no two
applications can use the same port.
Packets that contain port numbers come in two flavours: UDP and
TCP/IP. UDP has lower latency than TCP/IP, especially on startup.
Where data integrity is not of the utmost concerned, UDP can prove
easier to use than TCP, but it should never be used where data
integrity is more important than performance; however, data sent by
UDP can sometimes arrive in the wrong order and be effectively
useless to the receiver. TCP/IP is more complex than UDP and has
generally longer latencies, but it does guarantee that data does not
become corrupted when travelling over the internet. TCP is ideal for
file transfer, where a corrupt file is more unacceptable than a slow
download; however, it is unsuited to internet radio, where the odd
sound out of place is more acceptable than long gaps of silence.

4. Design Approach

The application has been designed using AngularJS and Bootstrap for
frontend and Express framework of NodeJS and MySQL for backend.
This application uses Socket.IO which enables real-time bidirectional
event-based communication. Socket.IO is built on top of the Web
Sockets API (Client side) and Node.js. It is one of the most depended-
upon library on npm.

[2]
 SYSTEM REQUIREMENTS

1. For Development
 NodeJS and NPM
 MySQL
 WebStorm
 Any one of internet browser of or above following versions with
enabled JavaScript:
 Internet Explorer 5.5+
 Safari 3+
 Google Chrome 4+
 Firefox 3+
 Opera 10.61+

2. For Hosting on IIS

 Windows Server 2012 or Windows 8 (IIS8 not supported on
earlier versions)
 Internet Information Server(IIS) version 8 or above
(WebSockets not supported on earlier versions)
 NodeJS and NPM
 MySQL
 IISNode
 URL rewrite module for IIS

[3]
 LANGUAGES AND FRAMEWORKS USED

AngularJS

AngularJS (commonly referred to as "Angular.js" or "AngularJS

1.X") is a JavaScript-based open-source front-end web application
framework mainly maintained by Google and by a community of
individuals and corporations to address many of the challenges
encountered in developing single-page applications. The JavaScript
components complement Apache Cordova, the framework used for
developing cross-platform mobile apps. It aims to simplify both the
development and the testing of such applications by providing a
framework for client-side model–view–controller (MVC) and model–
view–view-model (MVVM) architectures, along with components
commonly used in rich Internet applications
The AngularJS framework works by first reading the HTML page,
which has embedded into it additional custom tag attributes. Angular
interprets those attributes as directives to bind input or output parts of
the page to a model that is represented by
standard JavaScript variables. The values of those JavaScript
variables can be manually set within the code, or retrieved from static
or dynamic JSON resources.
AngularJS is the frontend part of the MEAN stack, consisting
of MongoDB database, Express.js web application server framework
Angular.js itself, and Node.js server runtime environment.
AngularJS (commonly referred to as "Angular.js" or "AngularJS
1.X") is a JavaScript-based open-source front-end web application
framework mainly maintained by Google and by a community of
individuals and corporations to address many of the challenges

[4]
encountered in developing single-page applications. The JavaScript
components complement Apache Cordova, the framework used for
developing cross-platform mobile apps. It aims to simplify both the
development and the testing of such applications by providing a
framework for client-side model–view–controller (MVC) and model–
view–view-model (MVVM) architectures, along with components
commonly used in rich Internet applications
The AngularJS framework works by first reading the HTML page,
which has embedded into it additional custom tag attributes. Angular
interprets those attributes as directives to bind input or output parts of
the page to a model that is represented by
standard JavaScript variables. The values of those JavaScript
variables can be manually set within the code, or retrieved from static
or dynamic JSON resources.
AngularJS is the frontend part of the MEAN stack, consisting
of MongoDB database, Express.js web application server framework
Angular.js itself, and Node.js server runtime environment.

[5]
 Bootstrap

Bootstrap is a free and open-source front-end web framework for

designing websites and web applications. It contains HTML-
and CSS-based design templates for typography, forms, buttons,
navigation and other interface components, as well as
optional JavaScript extensions. Unlike many web frameworks, it
concerns itself with front-end development only.
Bootstrap is the second most-starred project on GitHub, with more
than 111,600 stars and 51,500 forks.
Bootstrap, originally named Twitter Blueprint, was developed by
Mark Otto and Jacob Thornton at Twitter as a framework to
encourage consistency across internal tools. Before Bootstrap, various
libraries were used for interface development, which led to
inconsistencies and a high maintenance burden. 
Bootstrap is modular and consists of a series of less stylesheets that
implement the various components of the toolkit. These stylesheets
are generally compiled into a bundle and included in web pages, but
individual components can be included or removed. Bootstrap
provides a number of configuration variables that control things such
as color and padding of various components.

[6]
 JQuery

jQuery is a cross-platform JavaScript library designed to simplify

the client-side scripting of HTML. It is free, open-source
software using the permissive MIT license. Web analysis indicates
that it is the most widely deployed JavaScript library by a large
margin.
jQuery's syntax is designed to make it easier to navigate a document,
select DOM elements, create animations, handle events, and
develop Ajax applications. jQuery also provides capabilities for
developers to create plug-ins on top of the JavaScript library. This
enables developers to create abstractions for low-level interaction and
animation, advanced effects and high-level, theme able widgets. The
modular approach to the jQuery library allows the creation of
powerful dynamic web pages and Web applications.
The set of jQuery core features—DOM element selections, traversal
and manipulation—enabled by its selector engine (named "Sizzle"
from v1.3), created a new "programming style", fusing algorithms and
DOM data structures. This style influenced the architecture of
other JavaScript frameworks like YUI v3 and Dojo, later stimulating
the creation of the standard Selectors API.

[7]
 Socket.IO

Socket.IO is a JavaScript library for real-time web applications. It

enables real-time, bi-directional communication between web clients
and servers. It has two parts: a client-side library that runs in
the browser, and a server-side library for Node.js. Both components
have a nearly identical API. Like Node.js, it is event-driven.
Socket.IO primarily uses the WebSocket protocol with polling as a
fall back option, while providing the same interface. Although it can
be used as simply a wrapper for WebSocket, it provides many more
features, including broadcasting to multiple sockets, storing data
associated with each client, and asynchronous I/O.
It can be installed with the npm tool.
Socket.IO provides the ability to implement real-time analytics,
binary streaming, instant messaging, and document
collaboration. Notable users include Microsoft Office, Yammer,
and Zendesk.
Socket.IO handles the connection transparently. It will automatically
upgrade to WebSocket if possible. This requires the programmer to
only have Socket.IO knowledge.

[8]
 Node.js

Node.js is an open-source, cross-platform JavaScript runtime
environment for developing a diverse variety of tools and
applications. Although Node.js is not a JavaScript framework, many
of its basic modules are written in JavaScript, and developers can
write new modules in JavaScript. The runtime environment interprets
JavaScript using Google's V8JavaScript engine.
Node.js has an event-driven architecture capable of asynchronous I/O.
These design choices aim to optimize throughput
and scalability in Web applications with many input/output
operations, as well as for real-time Web applications (e.g., real-time
communication programs and browser games).
The Node.js distributed development project, governed by the Node.js
Foundation, is facilitated by the Linux Foundation's Collaborative
Projects program. Corporate users of Node.js software
include GoDaddy, Groupon, IBM, LinkedIn, Microsoft, Netflix,
PayPal, Rakuten, SAP, Voxer, Walmart, Yahoo!, and Cisco Systems.

[9]
 MySQL

MySQL is the world's most popular open source database. With its
proven performance, reliability and ease-of-use, MySQL has become
the leading database choice for web-based applications, used by high
profile web properties including Facebook, Twitter, YouTube,
Yahoo! and many more.
Oracle drives MySQL innovation, delivering new capabilities to
power next generation web, cloud, mobile and embedded
applications.
MySQL is written in C and C++. Its SQL parser is written in yacc, but
it uses a home-brewed lexical analyser. MySQL works on many
system platforms, including AIX, BSDi, FreeBSD, HP-UX,
eComStation, i5/OS, IRIX, Linux, OS X, Microsoft Windows,
NetBSD, Novell NetWare, OpenBSD, OpenSolaris, OS/2 Warp,
QNX, Oracle Solaris, Symbian, SunOS, SCO OpenServer, SCO
UnixWare, Sanos and Tru64. A port of MySQL to OpenVMS also
exists.

[ 10 ]
 PROJECT ANALYSIS

1. Login Page
On this page, registered employees has the facility to login with an
existing account of the website. User need to enter their employee id
and password.

2. Sign Up Page
Here employees can create a new account for the chat application.
Employees need to provide various details like employee id, name,
designation, email id, password and a profile picture(optional) to
signup

[ 11 ]
3. Homepage
On successful login user will be landed on this page. On left side,
there will be a list of employees with whom the current employee has
already talked earlier.

[ 12 ]
4. Online Status
Online status of employees is shown by an circular indicator near
there profile picture. Green indicates that employee is online and red
indicator indicates employee is offline.

5. Unread Messages Indicator

It is circular indicator with a number inside it which indicates the
number of unread messages from a particular employee.

[ 13 ]
6. New Chat List
New Chat list provides the list of all the employees who are registered
in the chat application. The current logged in user can select any one
of these employees to start a new chat with them.

7. Message Pane
Message Pane displays the messages between the current logged in
employee and selected employee. Below message pane there is a
input where user can type a message and can send it.

[ 14 ]
8. Message Status
Each sent message has an indicator which indicates the status of the
sent message. There are 3 possible indicators:
 Spinner : This indicates that the message has been sent but not
received by the other employee because he/she is offline.
 Grey Tick : This indicates that the message has been received
by the other employee.
 Blue Tick : This indicates that the message has been read the
other employee.

[ 15 ]
9. Attach Media
Media can be attached by clicking on pin icon on the task bar. User
can attach images, videos, docs, pdfs, ppts, excel sheets and text files.

10. Media Preview

On attaching a media, a preview pane will open which displays the
selected media. User can add caption to a particular media. User can
also add more media by clicking on “ADD MEDIA” button.

[ 16 ]
11. Taskbar Menu
Taskbar menu can be open by clicking three ellipsis icon on the task
bar. The menu has two items: Broadcast message and logout.

12. Broadcast Message

[ 17 ]
 On clicking broadcast from taskbar menu a “Select Broadcast List”
pane will open. User can select employees to whom the messages
needs to be broadcasted and then click OK.

13. Search Box

Search box is provided on the top of various lists. User can type the
name or the designation of the employee to search in the list. The
matched characters will be displayed in blue.

14. Forgot Password

[ 18 ]
 Employees has an option to recover their password if they have forgot
it. The employee needs to enter their employee id on login page and
then click “Forgot Password?” option. After clicking this an email
with instructions will be sent to their registered email id.

15. Password Recovery Mail

User will receive an email if he/she selects password recovery option.
The email contains a link clicking on which a new tab will open
where user can enter their new password and submit it.

[ 19 ]
16. Reset Password Page
On clicking the link in the email the user will land on this page. User
can enter a new password and submit it.

DATABASE TABLES

1. employees
This table stores the details of all the employees which are registered
on the chat application website. The structure of table is as follows:

[ 20 ]
2. chats
This table stores the chat messages, their status and the employee id
of sender and receiver. The structure of table is as follows:

3. media
This table stores the actual name of the media file which is displayed
to the user and the name of file on the disk along with the message id
which corresponds to a message in chats table. The structure of table
is as follows:

[ 21 ]
4. passwordrecovery
This table stores the employee id and a unique token generated for the
employees who have requested for password recovery. The structure
of table is as follows:

[ 22 ]
 FUTURE ENHANCEMENTS

There is always a room for improvements in any software package,

however good and efficient it may be done. But the most important
thing should be flexible to accept further modification. Right now, we
are just dealing with text communication and file sharing. In future,
this application may be extended to include features such as:

 Voice chat : this will enhance the application to a higher level

where communication will be possible via voice calling as in
telephone.
 Video chat : this will further enhance the feature of calling into
video communication.
 Zip File sharing : this will enhance the application with ability
to share zip or rar files.
 Screen share and remote access : this will enhance the
application user can share screens and queries can be resolved
from remote computers.

[ 23 ]
 BIBLIOGRAPHY

 www.google.com
 www.developer.mozilla.org
 www.w3schools
 expressjs.com
 www.nodejs.org
 www.mysql.com
 stackoverflow.com
 fontawesome.io
 angularjs.org
 getbootstrap.com
 socket.io
 www.npmjs.com
 www.iis.net
 github.com
 en.wikipedia.org

[ 24 ]