HANU communication using JavaScript, MongoDB, SocketIO
HANU COMMUNICATION USING JAVASCRIPT, MONGODB,
SOCKETIO
SVTH: Bùi Thị Á nh Nguyệt
GVHD:ThS Nguyễn Huy Anh
Tó m tắt - Trong môi trường đại học, sự giao tiếp và tương tác giữa sinh viên và giá o viên là rất
cần thiết. Tuy nhiên, sinh viên trường Đại học Hà Nội gặp rất nhiều khó khăn trong việc tì m kiếm
thô ng tin liên lạc với cá c thầy cô giáo cũng như các khoa khác trong trường. Với sự phá t triển của thời
đại cô ng nghệ 4.0 cùng với những vấn đề tồn tại của trường đại học, trang web HANUCommunication
ra đời nhằm kết nối sinh viên và giảng viên HANU với nhau bằng cá ch sử dụng cô ng nghệ Javascript,
Mongodb và Socketio.
Abstract - In the university environment, communication and interaction between students and
teachers are essential. However, students of Hanoi University face many difficulties in finding contact
information with their teachers as well as other departments in the university. With the development of
the technology age 4.0 along with the existing problems of the university, the HANUCommunication
website was created to connect HANU students and faculty together using Javascript, Mongodb and
Socketio technologies.
Keywords: JavaScript, jQuery, Nodejs, MongoDB, SocketIO, TurnServer.
I. INTRODUCTION
The interaction between students and faculty should always be strengthened, especially
in a dynamic environment like HANU. There are a number of reasons for this. First, one of
the factors that contribute to success in education is the interaction between the teacher and
the student. The contact between students and faculty is vital to student success. Students can
communicate directly with their teachers to answer questions, but face-to-face time is a
problem. Second, students also contribute greatly to improving the quality and teaching
method of teachers. Sometimes students want to give their opinion on the teacher's way of
teaching, but not all students can speak directly to their teacher, so a communication
application is always needed so that the student can contribute their own ideas and teachers
also feel more comfortable in accepting students' opinions. In fact, HANU students complain
a lot about this problem. I have seen a lot of posts asking for teacher contact information on
facebook, and other students would respond to the post. However, the question here are: Does
the student always have contact information for all teachers? And does the time spent waiting
for answers affect the problem of students? Realizing many outstanding problems, I decided
to build a website called HANUCommunication that aims to connect students and teachers
together quickly and effectively. With HANUCommunication, students can see a list of
available departments’s univeristy. In each department, there will be contact information for
256
teachers as well as students of the faculty. So students can call their teacher or chat to their
teacher directly on my website.
II. BACKGROUND KNOWLEDGE
In this research, I used Javascript (jQuery for client side, Nodejs for backend) ,
MongoDB, SocketIO and more than 20 libraries supporting for building
HANUCommunication website.
A. Javascript
JavaScript is a scripting language that enables you to create dynamically updating
content, control multimedia, animate images, and pretty much everything else [1]. JavaScript
has been the most popular programming language in the world for the past 20 years. It is also
one of the 3 main languages of web programming which are HTML, CSS, Javascript.
Compared with a static website made up of HTML and CSS, you can easily make the website
more vivid and smooth with just Javascript. This means, Javacript allows interaction between
the user with the website to retrieve requests from the user and process related tasks in order
to return the response to the user.
B. jQuery
jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery
is to make it much easier to use JavaScript on your website [2]. There are many benefits of
jQuery that make it easier to use javascript on a website. First, jQuery is a JS library that
supports DOM HTML tags that are stronger, faster, and extremely concise. Imagine that, you
are writing an h1 tag with class 'heading' and want to add an event to it, then instead of using
document.querySelector ('. heading').eventName () of pure javascript, you just need to write
line $ ('. heading'). eventName () in jquery. Second, jquery uses AJAX to send requests to the
server instead of the default HTML form. If you are using pure javascript, you can only send
requests to the server with GET and POST methods, but if you want to send requests like
PUT or DELETE, then you need to use a module called 'method-override' to assist that work.
As for jquery, you simply call ajax and you can use any type of request that complies with the
REST API standard.
C. Nodejs
The Node.js run-time environment includes everything you need to execute a program
written in JavaScript [3]. Nodejs is a platform, not a Web Framework, nor a programming
language. Nodejs runs cross-platform on the Server side, using Event-driven architecture,
non-blocking I/O mechanism to make it lightweight and efficient. Using Nodejs for server
side processing is a great practice when combined with jQuery. You only need to select a
framework (typically expressjs), understand core javascript, and combine the proficient use of
257
the "npm install package_name" command to begin handling the backend of a website. One
more reason to use Nodejs is that you can run Nodejs applications anywhere on a Mac -
Window - Linux, and the Nodejs community is huge and completely free.
D. MongoDB
MongoDB is a document database with the scalability and flexibility that you want with
the querying and indexing that you need [4]. MongoDB is an open source database
management system, a database belonging to NoSql (None-Relational SQL) and used by
millions of people. MongoDB is a document oriented database, the data is stored in JSON
documents instead of a tabular form like a relational database, so queries will be very fast.
With relational database we have the concept of tables, relational databases (like MySQL or
SQL Server ...) use tables to store data, with MongoDB we will use the concept of collection
instead of tables. Compared with RDBMS, the MongoDB collection corresponds to the table,
and the document will correspond to row, MongoDB will use the documents instead of row in
the RDBMS. In simpler terms, mongodb stores data in JSON format, and you can easily
retrieve data as quickly and efficiently as you would with an API.
E. SocketIO
Socket.IO is a Javascript library that enables real-time, bidirectional and event-based
communication between the browser and the server [5]. Socketio will help parties in different
locations connect with each other, transferring data instantly through an intermediary server.
Socketio can be used in many applications such as chat, online games, updating the results of
an ongoing match, ... Socketio is not a language, but just a supportive tool for making
realtime application. Therefore, socketio cannot be used as a complete replacement for one
language, but must be used in conjunction with another language. In this research, I used
SocketIO in conjunction with javascript to create a HANUCommunication website where
people can chat in real time with each other.
III. HANU COMMUNICATION WEBSITE
HANU Communication is a website project that aims to connect students and teachers
in Hanoi University. In this website, the available functions include: account registration and
account activation with HANU email, login with local and google accounts, update user
information, view the list of faculties in HANU and lists teachers and students of each faculty,
calls between users, real-time chat, video chat, search friends, creates group chat, chat in
group, and others.
258
F. Result
After successfully logging in to the application, users will see a list of HANU faculties
as shown in Figure 01 below. Each faculty will have a brief introduction about the department
and a list of teachers and students currently working and studying in the department.
Figure 01: Main interface of HANUCommunication
When you click the button "Giảng viên" and "Sinh viên", you will see a list of lecturers
and students corresponding to basic information such as username, phone number, and there
are 2 buttons for you to choose: "Gọi điện" for direct cell phone calls, "Trò chuyện" for going
to a chat popup between the two of you and then you can chat (text, emoji, image, file) or call
video chat with that teacher or student. In addition, you can also search for teachers and
students easily. You just need to type the keywords you want to find, and then you can see a
list of teachers or students who have common characteristics with the keywords you type
displayed right below the search bar.
259
Figure 02: List of teachers and students in each department
Figure 03: List of recent contacts and create group chat in HANUCommunication
260
Figure 03 shows a list of conversations you recently contacted by time from newest to
oldest, and next to them is a picture that creates a chat group on the HANUCommunication
website . Back in the list of recently contacted friends, you can see that the last message
between the two is displayed just below the username and avatar, and the time to receive or
send the message is also displayed right below those information. You can choose to view all
conversations, or view pesonal conversations, as well as group conversations in which you are
present. An symbol right next to the chat type option helps you find friends and create a chat
group. Looking at the image on the right, when you search for a username, the system will
return a list of people with common characteristics with the person you are looking for with
information such as username, their role like "Giảng viên" or "Sinh viên", as well as the
faculty they belong to. If you want to add them to your chat group, you just click on "Thêm
vào nhóm" button and you can input the chat group name and click "Tạo" to complete
creating a chat group. Naturally you can cancel creating group chat by clicking the "Hủy"
button, and you can search for other friends to create other chat groups. All actions are in
realtime, so when you create a chat group successfully, the website will send information
about the chat group to other members present in the group right at that moment and you can
send realtime messages to each other.
Figure 04: Personal conversation and group conversation
Figure 04 is a comparison picture of personal and group chat in HANUCommunication.
Actually there isn't too much difference between individual chats and group chats, you can
send text messages, emojis, pictures and attachments for both types of chat. However, with
private chat (left image), you have an additional function that is video chat realtime. As for
261
group chat (right image), you can see the number of group members as well as the members
information, and you can also chat privately with each member if you want.
G. Implementation
Because there are so many functions in HANUCommunication, I will just describe how
some important functions implement.
1. Register and active account
Figure 05 depicts the workflow of the account registration function: user inputs the
necessary information to register an account, and the registration email must meet the
following requirements: is HANU email, and non-existing in HANUCommunication. I use a
built-in javascript library called "express-validator" to validate user inputs, and block all non-
HANU emails with the feature "[email protected]" for the teacher account and
"[email protected]" for student account. If the validation step detects any error, it will
send the error to the controller and the controller will return error to the Register View to
display the error to the user. If not, registration information will be sent to Register Service -
which communicates between controller and model to perform functions such as checking
existing email, password encryption with library "bcrypt", and error will be sent to the
controller if detected. If there is no error, the registration information will be sent to the User
model to save in the database and return the new user to the Register Service. When the user
registers an account successfully, Register Service will send an email to the user's account
registration email to activate the account using the module named "nodemailer". At the same
time, the user's account will be added to the department corresponding to the information they
registered earlier. After registing and active account successfully, user can login and use
HANUCommunication website.
Figure 05: Sequence diagram of register function
262
2. Login with Google account
In addition to logging in with email and password, users can also log in with a Google
account provided that it belongs to the HANU email. First, I need to create an application
with Google API to be able to use the login function with google, then the module "passport-
google-oauth" is used to perform this function. When users log in with Google account, the
system will check 2 main parts: first, is this HANU email or not? If not, a login error will be
displayed to the user. If it is HANU email, the system will continue to check if this email
already exists in the application or not? If it existed, the system would redirect users to the
main homepage of HANUCommunication. If not, the system will proceed to register a new
user with Google account and redirect to a verification page where the user will have to input
some information such as faculty, phone number. After completing the verification, the
system will redirect to the homepage and the user will be able to use the application.
3. Chat realtime
With HANUCommunication, users can send message to each other in several types:
text , emoji, picture, and attachment messages. This is considered the main part of the
website, where students and teachers communicate with each other. The messaging functions
all happen in real time, so I use a powerful realtime application support library of Javacript
called "Socketio" to accomplish these functions. The following image is the activity diagram
depicting the Socket server's running flow for direct messaging and the Backend server's
running flow for storing messages in the database. This activity diagram only describes how
the user sends and receives messages, while displaying the message to the UI is jQuery's job-
an old but extremely efficient Javascript library. Basically, jQuery will DOM HTML tags and
insert the sent and received message into the chat popup, so that the sender and the receiver
can see the new message immediately.
Figure 07: Activity diagram for chat function with socket server and backend
server procesing
263
4. Call video chat
Figure 10: Video chat processing
The picture above describes video chat function's processing with Socket server. Video
chat function is the hardest part with a total of 14 steps to do with Socket server, handle peer-
to-peer tasks and use WebRTC technology to accomplish this function. I use a Javascript
library called "Peerjs" to get the receiver's peerId and conduct communication between the
caller and the listener. The red arrow represents the caller's running thread, light green
represents the socket server's running thread, and blue color represents the listener's running
thread. Looking at the Figure 10 above, we can see two clients communicate with each other
through a socket server, this is the intermediate place receives the caller's request and sends
that request to listener and otherwise. The process continues until both clients accept the call,
then it will be Peerjs' job to handle video chat communication between the two parties.
IV. EVALUATION
HANUCommunication is a website that brings convenience, speed and efficiency in
communication with teachers at Hanoi University. However, HANUCommunication still had
shortcomings and functions that I couldn't develop yet. First, the website currently only
supports private video chat between two users, but cannot call video for a group chat. Second,
the video chat function is only experimental, but can not be used correctly and permanently
because of a Peerjs library’s problem. Peerjs uses a default Google host called Stun server -
only for communication in local network. For example, if two people are using LAN, they
can call video chat to each other, but if they are not using the same network in the NAT
Router, the call will not be possible.
264
To resolve that problem, I switch to use Turn Server, which can assist users with multi-
network communication. This means, even if the 2 users are in 2 different countries, they can
still call video chat for each other. To be able to use the turn server, I used a paid global Turn
Server cloud called "xirsys". Basically, xirsys will help you to get iceServerList, and once you
configure iceServerList into Peerjs, you can use Turn Server instead of Google's default Stun
Server.
V. CONCLUSION AND FUTURE WORK
The problem of multi-network video chat has been resolved by using Turn Server cloud,
but another problem arises, which is that xirsys is a paid cloud. In fact, free Turn Server is
considered impossible, because when you do one-network or multi-network communication,
a huge amount of capacity is consumed. The xirsys cloud will give you 500MB per month for
free, and for now let's try a little bit of calculation before we go to a conclusion. To make a
video call, you will spend 500 Kbps per second, imagine calling a video within 15 minutes, so
the total capacity will be 450 Mbs. Thus, with 500Mb free per month, you can only call for
more than 15 minutes, so the question is: where will you get the capacity to make video chat
function? The answer is only one, you have to put more money into it to buy more storage.
That's why I put this function into Future work so that if there are future sponsorships, I will
develop the perfect video chat function for both private chat and group chat.
In general, building a website using Javascrip, MongoDB and Socketio is no longer
unfamiliar to website programming field. With the above 3 things, you can create a lot of web
applications that operate efficiently, stably and with strong realtime support.
HANUCommuncation is designed to solve the problem of communication between students
and teachers in the Hanoi University, so realtime communication is the main function of the
website. Therefore, Javascript-MongoDB-Socketio is the perfect combination to make
HANUCommunication website, which connects HANU students and teachers together.
REFERENCE
[1] MDN
contributors
(2020,
Aug
21).
What
is
JavaScript?:
[2] W3schools.com.
jQuery
Introduction:
is Node.js?:
[3] Priyesh, P. (2018, April 18).
What
exactly
265
10 trang
21540
Free
Bạn đang xem tài liệu "HANU communication using JavaScript, MongoDB, SocketIO", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- hanu_communication_using_javascript_mongodb_socketio.pdf
