A Computer Networks Project

Introduction

The world has changed quite a bit after the Covid 19 pandemic hit the world. The world had to follow this new rule known as social distancing. A huge number of things which were conventionally conducted offline, such as businesses, education etc are now being conducted online.

Another such thing is Interviews.

Conventionally hiring as well as interviews were conducted offline, in a face to face manner wherein the interviewer would physically be present with the interviewee. However, in this covid pandemic as the physical interviews became infeasible, companies adopted to online methods of interviews and hiring. Remote hiring and work from home has become a mundane thing these days.

Our project DrawChat works on this problem of online interviews and online hiring.

DrawChat is a web application which allows multiple users to work together and collaborate on a digital whiteboard, as well as chat together. Any and all changes made on the digital whiteboard will be visible to all the users. Users can also use the chat window to send a message to all the other users.

All this happens in real time by the use of web sockets.

This application can be used by companies for whiteboard hiring, as well as by a multitude of people such as workers who want to discuss an idea, students and teachers, artists to collaborate and so on.

Objectives of the Project

The aim of this project is to build a web application which can be used on any device such as a laptop, a tablet or a computer.

This web application will allow the user to draw on the screen as well as to send text messages to all the users connected.

The chat messages as well as any updates to the whiteboard will be sent to all the clients connected in real time to facilitate a collaborative platform which can be used for a multitude of applications such as:

1. Whiteboard interviews
2. Education
3. Collaborative discussions
4. Development of games like Pictionary, guess the drawing, complete the drawing etc.

Feasibility Study

Practical Feasibility

We all are well aware of the pandemic and how it has affected our lives. More and more things are happening online, including work, education, entertainment and so on.

More and more businesses are running online.

Enterprises and companies are also hiring as well as working online

Thus, the project can be used to solve problems, such as conducting whiteboard interviews, as well as for the purposes of education, such as doubt solving, collaboration amongst employees, students etc.

Thus, the software product is definitely practical and will be of use to the end users

Technical Feasibility

Drawchat will be a web based application. The internet, and websites can be accessed by a plethora of devices such as personal computers, mobile phones, tablets and so on.

Moreover, web applications are not dependent on the operating system of the devices and hence the application will be accessible to anyone and everyone connected to the internet.

The web technologies used to build the project are:

1. NodeJS
2. HTML, CSS, JS

All of the above are open sourced and can be used by anyone to build and create anything of their liking.

The project will be hosted on the internet using the free hosting services, such as the free tier of Amazon Web Services and Heroku hosting services.

Methodology

Transmission Connection Protocol (TCP)

TCP is a communication protocol that facilitates the exchange of messages between computing devices in a network. TCP takes messages from an application/server and divides them into packets, which can then be forwarded by the devices in the network that can be switches, routers, security gateways to the destination. TCP numbers each packet and reassembles them prior to handing them off to the application/server recipient. Because it is connection-oriented, it ensures a connection is established and maintained until the exchange between the application/servers sending and receiving the message is complete. TCP guarantees receiving of the message by the application/server recipient.

What are websockets?

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. It allows a persistent connection between the client and the server. Low-latency and real-time communication is possible, unlike the long polling method of HTTP which was used earlier.

About Socket.io

Writing a chat application with popular web applications stacks like LAMP (PHP) has normally been very hard. It involves polling the server for changes, keeping track of timestamps, and it’s a lot slower than it should be. Sockets have traditionally been the solution around which most real-time chat 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 you write a chat message, the idea is that the server will get it and push it to all other connected clients.

Tools and Technologies used

Frontend:

HTML

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. All of the internet that we use on browsers is made by HTML. HTML is what gives structure to the websites, ie, the layout of the user interface is determined by the HTML Code.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. In layman terms, it is CSS which makes the web look good and colorful, without which the websites will only be a boring layout.

Javascript

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior and all major web browsers have a dedicated JavaScript engine to execute it.

As the name suggests, ReactJS uses JS as the programming language and all the logic of the code was written in Javascript. In fact, the backend of our project is also written in Javascript.

Backend:

Node.JS

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. To explain it in easy terms, it was found that JS was gaining popularity as a programming language and was recognised as being fast and one which can be used outside of the browser. Node.js was the runtime which allowed JS to be run outside of browsers which allowed JS to be used in other applications, such as the backend servers of applications. Our project’s backend also runs on Node.js.

Express

Express.js is a back end web application framework for Node.js. It is designed for building web applications and APIs. We used this framework to write the REST APIs for our backend server.

Facilities Required

Requirement Elicitation

Functional Requirements:

Frontend:

1. The frontend of the project will be what the user interacts with. The most basic and important requirement for the project is a website which allows users to come and use the product.
2. The user can visit the website and connect with the users.
3. Connected users will be able to see all the updates made to the whiteboard
4. The connected users will also be able to communicate with each other using the text messages.

Backend:

1. The backend will handle all the requests of the clients
2. It will keep track of all the changes that are made to the whiteboard as well as to make sure that all the changes are communicated to the connected clients.
3. The backend also needs to listen to, as well as broadcast the chat messages to all the users.

Non functional Requirements

1. The frontend design should be intuitive and easy to use.
2. All the updates and messages should be in sync with the other clients in the least time possible
3. The updates should be in real time.

Important Code Snippets

The Final Web App

Link to the live project