INDUSTRIAL TRAINING
REPORT/SUMMER TRAINING REPORT
OnLineChat System
Submitted in partial fulfillment of the
Requirements for the award of
Degree of Bachelor of Technology in
AIDS/AIML/IIOT
Name: ______________________
University Roll No.____________
School of Engineering and Technology Vivekananda
Institute of Professional Studies-Technical Campus
FIFTH SEMESTER
(2023-2024)
DECLARATION
I hereby declare that the Industrial/ Summer Training Report entitled ("Title of the project") is an
authentic record of my own work as requirements of Industrial Training during the period from
_______ to_______ for the award of degree of B.Tech. (AIDS/AIML/IIOT), School of
Engineering and Technology, VIPS-TC.
(Signature of student)
(Name of Student)
(University Roll No.)
Date: ____________________
2
ACKNOWLEDGEMENT
We express our gratitude to our College and Organization for their guidance during our summer
training camp project, and to every team member for their dedication. Special thanks to fellow
participants and all who supported us. Your contributions were instrumental in the success of our
Real-Time Chat System.
3
Index
Table of Context:
Topic Page No.
● Introduction to the Project 5
● Snapshots 6
● Code Explanation 4
● Technology Stack Used 9
● Results and Discussion 15
● Conclusion and Future Scope 16
List of Figures:
Figures Title Page No.
● Fig 1. Two users enters chat room 6
● Fig 2. Two users using the chat room to interact 6
● Fig 3. Code Snippet 1 7
● Fig 4. Code Snippet 2 7
● Fig 5. Code Snippet 3 8
4
Introduction to Project:
Welcome to OnLineChat, an advanced and sophisticated application designed to redefine
the landscape of contemporary digital communication. OnLineChat represents a paradigm shift
in the way individuals interact, offering a seamless and real-time experience that transcends
conventional messaging platforms. This application seamlessly integrates HTML, CSS, and
JavaScript on the client side, coupled with the robust Socket.IO library, to create a platform that
not only facilitates instant communication but also elevates the quality of interactions to new
heights.
The user interface of OnLineChat is characterized by its sleek and intuitive design,
meticulously crafted to provide users with an immersive environment. Against a backdrop of
aesthetically pleasing gradients and a thoughtfully arranged layout, OnLineChat is more than a
mere messaging tool – it is a dynamic space where conversations come alive. Whether engaging
in social conversations, professional collaborations, or forging new connections, OnLineChat
serves as a dynamic and versatile platform.
The technological underpinnings of OnLineChat are at the forefront of its capabilities.
Utilizing HTML, CSS, and JavaScript on the client side ensures a visually appealing and
responsive interface. The integration of Socket.IO introduces a real-time element to the
application, creating an environment where messages are exchanged seamlessly, fostering an
engaging and interactive user experience. The server, presumably powered by Node.js, adeptly
manages these connections, ensuring the fluidity and dynamism of OnLineChat as a hub of
communication.
This report aims to provide a comprehensive exploration of OnLineChat, delving into its
refined user interface, real-time features, and the underlying technologies that converge to make
it an exemplary platform for modern communication. Join us as we navigate through the
intricacies of OnLineChat, where formality meets functionality, and technology seamlessly
intertwines with social connectivity.
5
Snapshots:
6
7
8
Code Explanation:
● Page 1 - index.html:
INDEX.HTML (html file)
1. `<!DOCTYPE html>`: This declaration defines the document type and version of HTML. In
this case, it indicates the document is written in HTML.
2. `<html lang="en">`: The opening tag for the HTML document. The `lang` attribute is set to
"en" (English) to specify the language of the document.
3. `<head>`: This section contains meta-information about the HTML document, such as
character set, viewport settings, and links to external resources.
- `<meta charset="UTF-8">`: Specifies the character encoding for the document as UTF-8.
- `<meta http-equiv="X-UA-Compatible" content="IE=edge">`: Instructs Internet Explorer
to use the latest rendering engine.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Sets the
viewport properties for responsive design.
- `<title>SCHAT - the chat app</title>`: Sets the title of the HTML document, which appears
in the browser tab.
- `<script defer src="http://localhost:8000/socket.io/socket.io.js"></script>`: Loads the
Socket.IO JavaScript library asynchronously from the specified URL. Socket.IO is commonly
used for real-time web applications.
- `<link rel="stylesheet" href="/css/style.css">`: Links to an external CSS stylesheet named
"style.css" in the "/css" directory, presumably for styling the HTML content.
- `<script defer src="/js/client.js"></script>`: Loads an external JavaScript file named
"client.js" from the "/js" directory. This script likely contains client-side code for handling
interactions and communication.
4. `<body>`: This section contains the main content of the HTML document.
- `<nav>`: Defines a navigation bar.
- `<img class="logo" src="./SCHAT.png" alt="">`: Displays an image with the class
"logo" and a source (src) pointing to "SCHAT.png" in the current directory.
- `<h1>Welcome To <span>OnLine</span>Chat App</h1>`: Heading that welcomes users
to the chat app. The word "OnLine" is wrapped in a `<span>` tag, possibly for styling
purposes.
- `<div class="container">`: A container div, which is likely intended to hold the main
content of the chat application.
9
- `<div class="send">`: Another div for handling the sending of messages.
- `<form action="#" id="send-container">`: A form with an action set to "#" (current page)
and an ID of "send-container."
- `<input type="text" name="messageInp" id="messageInp">`: An input field for typing
messages with a name of "messageInp" and an ID of "messageInp."
- `<button class="btn" type="submit">Send</button>`: A submit button with the class
"btn" that triggers the form submission when clicked.
● Page 2 - client.js:
Certainly! The provided JavaScript code is for a client-side application that uses Socket.IO for
real-time communication in a chat application. Here's an explanation in points:
1. `const socket = io('http://localhost:8000');`: Establishes a WebSocket connection to the
specified server (http://localhost:8000) using Socket.IO. This connection will be used for real-
time communication between the client and the server.
2. `const form = document.getElementById('send-container');`: Retrieves a reference to the
HTML form element with the ID 'send-container'.
3. `const messageinput = document.getElementById('messageInp');`: Retrieves a reference to
the HTML input element with the ID 'messageInp', which is likely the input field for entering
chat messages.
4. `const messagecontainer = document.querySelector(".container");`: Retrieves a reference to
the HTML element with the class 'container'. This is likely the container where chat messages
will be displayed.
5. `var audio = new Audio('tone.mp3')`: Creates an HTML audio element with the source
'tone.mp3'. This is used to play a sound when a new message is received from the left (other
users).
6. `const append = (message, position) => { ... }`: Defines a function called 'append' that takes
a message and a position ('left' or 'right') as arguments. This function is responsible for adding
a new message to the chat container.
- Creates a new div element for the message and sets its text content to the provided
message.
- Adds the 'message' class and the specified position class to the message element.
- Appends the message element to the chat container.
- If the position is 'left', it plays the audio tone.
10
7. `const name = prompt("enter your name to join the chat");`: Prompts the user to enter their
name, which is then stored in the 'name' variable.
8. `socket.emit('new-user-joined', name);`: Emits a 'new-user-joined' event to the server,
passing the user's name as data. This event indicates that a new user has joined the chat.
9. `socket.on('user-joined', name => { ... });`: Listens for the 'user-joined' event from the server
and appends a message indicating that the specified user has joined the chat.
10. `form.addEventListener('submit', (e) => { ... });`: Listens for the form submission event
and prevents the default form submission behavior. It then retrieves the entered message,
appends it to the chat container, emits a 'send' event to the server with the message, and clears
the input field.
11. `socket.on('receive', data => { ... });`: Listens for the 'receive' event from the server, which
indicates that a message has been received. It then appends the received message to the chat
container.
12. `socket.on('left', data => { ... });`: Listens for the 'left' event from the server, which
indicates that a user has left the chat. It then appends a message indicating that the specified
user has left.
11
● Page 3 - style.css
Certainly! The provided CSS code is styling for a chat application, presumably part of the
same project as the previously provided HTML and JavaScript code. Here's an explanation in
points:
1. Body Styles:
- `background: linear-gradient(...)`: Sets a linear gradient background color for the body,
transitioning from a dark blue color to a light blue color.
- `height: 98vh;`: Sets the height of the body to 98% of the viewport height.
2. Logo Styles:
- `.logo`: Styles for an image with the class 'logo'.
- `display: block;`: Makes the logo a block-level element.
- `margin: auto;`: Centers the logo horizontally.
- `width: 150px; height: 150px;`: Sets the width and height of the logo.
3. Heading Styles:
- `h1`: Styles for the main heading.
- `margin-top: 12px;`: Adds top margin to the heading.
- `font-size: 30px;`: Sets the font size to 30 pixels.
- `font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;`: Defines a font family for
the heading.
- `text-align: center;`: Centers the text.
- `color: white;`: Sets the text color to white.
- `h1 span`: Styles for a span within the heading.
- `font-weight: bold;`: Sets the font weight to bold.
4. Container Styles:
- `.container`: Styles for a container div, likely for displaying chat messages.
- `max-width: 955px;`: Sets the maximum width of the container.
- `border: 2px solid black;`: Adds a black border with a width of 2 pixels.
- `border-radius: 13px;`: Adds border-radius for rounded corners.
- `padding: 33px;`: Adds internal padding.
- `overflow-y: auto;`: Enables vertical scrolling if the content exceeds the container height.
- `margin-bottom: 23px;`: Adds a bottom margin.
- `margin: auto;`: Centers the container horizontally.
- `height: 50vh;`: Sets the height of the container to 50% of the viewport height.
5. Message Styles:
- `.message`: Styles for individual chat messages.
- `background-color: rgba(164, 163, 163, 0.712);`: Sets a semi-transparent background
color.
- `width: 24%;`: Sets the width of the message box.
12
- `padding: 10px;`: Adds internal padding.
- `margin: 17px 2px;`: Sets the top and bottom margins and left/right margins.
- `border: 2px solid black;`: Adds a black border with a width of 2 pixels.
- `border-radius: 10px;`: Adds border-radius for rounded corners.
- `box-shadow: 5px 5px rgb(76, 73, 73);`: Adds a box shadow.
6. Message Position Styles:
- `.right` and `.left`: Styles for right and left message positions.
- `float: right;` and `float: left;`: Floats the message to the right or left.
- `clear: both;`: Clears the float property to prevent wrapping issues.
7. Send Styles:
- `.send`: Styles for the send div.
- `margin: 10px;`: Adds margin around the send div.
8. Send Container Styles:
- `#send-container`: Styles for the form container.
- `display: block;`: Makes it a block-level element.
- `margin: auto;`: Centers the container horizontally.
- `text-align: center;`: Centers the text.
- `max-width: 1031px;`: Sets the maximum width.
- `width: 100%;`: Sets the width to 100%.
9. Message Input and Button Styles:
- `#messageInp`: Styles for the message input.
- `width: 77%;`: Sets the width of the input.
- `border: 2px solid black;`: Adds a black border.
- `border-radius: 10px;`: Adds border-radius.
- `height: 34px;`: Sets the height.
- `.btn`: Styles for the button.
- `width: 15%;`: Sets the width of the button.
- `border: 2px solid black;`: Adds a black border.
- `border-radius: 6px;`: Adds border-radius.
- `height: 34px;`: Sets the height.
13
Technology Stack Used:
● HTML and CSS:
- HTML is used for structuring the content of the web pages. It defines the layout,
structure, and elements of the pages.
- CSS is used for styling the HTML elements, providing a visually appealing and
consistent appearance to the user interface.
● JavaScript:
- JavaScript is used for client-side scripting. It enables dynamic interactions and real-time
updates within the web application.
- In this case, JavaScript is used to handle user events (such as form submissions),
manipulate the DOM (Document Object Model), and communicate with the server using
Socket.IO for real-time functionality.
● Socket.IO:
- Socket.IO is a JavaScript library that enables real-time, bidirectional communication
between web clients and servers. It uses WebSockets as the underlying transport protocol.
- In the provided JavaScript code, the client establishes a connection to the server using
Socket.IO (`const socket = io('http://localhost:8000');`). It then emits and listens for events
related to user actions, such as joining the chat, sending messages, and receiving messages.
● Node.js:
- While the server-side code is not provided in the snippets, it's implied that there is a
server running on `http://localhost:8000` to handle Socket.IO connections.
- Node.js is a JavaScript runtime that can be used to run server-side code. It is commonly
used with Socket.IO for building real-time web applications.
● Tone.mp3 (Audio File):
- An audio file named `tone.mp3` is included in the JavaScript code (`var audio = new
Audio('tone.mp3')`). This audio file is played when a new message is received from the left
(other users).
14
Results and Discussion:
What Users Can Expect:
● Instantaneous Messaging: OnLineChat ensures that messages are delivered and received
in real-time, creating an immediate and responsive communication channel.
● Immersive User Interface: The application offers an aesthetically pleasing and user-
friendly interface, making the navigation and interaction experience seamless and
enjoyable.
● Dynamic Conversations: Users can anticipate lively and dynamic conversations, thanks
to the real-time communication features facilitated by Socket.IO.
● Versatility in Connections: Whether for personal or professional use, OnLineChat
provides a versatile platform for various communication needs, offering a space for both
casual and formal conversations.
● Reliability and Stability: The technological stack, including HTML, CSS, JavaScript,
Socket.IO, and Node.js, ensures the reliability and stability of OnLineChat, providing
users with a dependable platform for their communication needs.
15
Conclusion and Future Scope:
OnLineChat stands as a testament to the convergence of technology and user-centric
design, offering a communication experience that transcends traditional messaging platforms. As
users immerse themselves in the sleek and intuitive interface, they'll find more than just a
messaging app; they'll discover a dynamic space where conversations come alive.In the realm of
real-time communication, OnLineChat distinguishes itself by providing an immediate and
responsive channel for interactions. The integration of Socket.IO ensures that every message is
delivered with a sense of vibrancy and immediacy, fostering an environment where
communication feels lively and engaging.
The carefully curated technological stack, featuring HTML, CSS, JavaScript, Socket.IO,
and Node.js, underpins the reliability and stability of OnLineChat. Users can confidently expect
not only a visually appealing and versatile platform but also a dependable space for their
communication needs.As OnLineChat paves the way for dynamic and meaningful conversations
in the digital age, it transcends the conventional boundaries of messaging. It becomes a catalyst
for vibrant connections, where the intersection of technology and user experience creates an
experience that is not just functional but enriching.
In the evolving landscape of digital communication, OnLineChat is not merely a tool; it's
an enabler of connections, a curator of conversations, and a testament to the limitless possibilities
of technology harnessed with a user-centric approach. Step into OnLineChat, where every
interaction is more than just a message – it's a moment crafted in real-time, bringing people
closer in the ever-expanding digital universe.
16
