The Design of Instant Messaging System Based on

Web


Jingyang Wang, Baoshuai Zhang and Jiangbo Guo Haiyao Wang*

School of Information Science and Engineering, Hebei Fujian Jiangxia University, Fuzhou, 350000, China
University of Science and Technology, Shijiazhuang, China
[email protected], [email protected] *[email protected] (corresponding author)

Abstract—With the rapid development of Internet, the use of instant chat, but also using the Web IM technology as a
network is becoming more and more widespread, and the foundation to achieve a lot of specific application model.
distance is no longer a communication barrier between people. Tencent will build the Web QQ as the core platform of a new
In order to solve the problem that the user needs to install B/S generation[3]. So, IMSW is very import to domestic
program to the client and considers the differences of enterprises.
equipments & operating systems, this paper proposes a solution
of IMSW (Instant Messaging System based on Web). It II. SYSTEM ARCHITECTURE
introduces the system architecture of IMSW, illustrates the
function of the system, and describes the realization of three key The architecture of IMSW is shown in figure 1.
technologies (such as Bootstrap responsive design, MD5 +salt The Third Instant
User Layer
encryption algorithm and video call) in detail. The system runs Audio and
Video Service
Messaging Database Layer

well, and it has a certain guiding significance for the project Layer
Service Layer

development of Instant Messaging. User A

WebService JDBC

Keywords- Bootstrap responsive design; MD5+salt encryption

algorithm; video call; Instant Messaging; Web MySQL

Local
I. INTRODUCTION User B Third
Party Server
Server
In recent years, the communication demand and
dependence of people are becoming more and more intense, Figure 1. The architecture of IMSW
all trades and professions on the requirements of exchange
information are also getting higher and higher. With the rise of The system is composed of user layer, the third audio and
HTML5 and the strong demand of users, the research on IM video service layer, Instant Messaging service layer and
(Instant Messaging) based on Web is becoming more and database layer. Among them, the user layer includes the user
more important. The method is not only low cost, high A and the user B; the third audio and video service layer
utilization rate of networkresource, without considering the achieves the function of audio call and video call through the
installation of client and the differences of equipments & audio and video service interface which is provided by the
operating systems, but also multimedia information (including third party; the Instant Messaging service layer mainly
text, picture, audio and video) real-time communication[1]. realizes the data processing of the user's friends, groups and
So this system can adopt the way of Web to complete IM, and some instant messages.
whether it is a computer, mobile phone or tablet can
communicate well. III. SYSTEM FUNCTIONS
The application of Web IM has a very significant The system includes login module, text chat module, point
significance to enhance the user activity and the interactivity to point audio and video communication module, group
of the website. A considerable number of IM based on Web module and so on. The system use case diagram is shown in
applications are developed and deployed in domestic. It Figure 2.
mainly includes Tencent, Taobao and Renren. The Web IM is A. Login Module
used in Taobao in a relatively early time. IM is mainly applied
to the buyer and the seller to communicate in the Taobao page, The module mainly realizes the functions of user register,
Taobao uses a long polling based on AJAX to achieve the user login, user exit and editing personal information. Users
Comet[2]. The web chat of Renren is mainly used in instant can log in, create, fill and modify the personal information
communication between users. Renren uses the Iframe and including their nickname, gender, date of birth and personality
htmlfile stream mode to achieve Comet. For Tencent and Web signatures after registration, so that making other users
QQ use Comet technology to achieve instant chat at first, but understand their own.
the goal of Tencent is not only applying Comet technology to

978-1-5-97-7/1$31.00 ©201 IEEE


 (Viewport) size changing, the system will be automatically
Login Module
Modu
d le divided into 12 columns, which contains predefined classes
which is easy to use and a powerful mixin to generate more
Text Chat Module
Modu
d le
semantic layout. Bootstrap defines four kinds for different
screen sizes, respectively is: the small screen mobile phone
Point to Point Audio and Video
Communication Module
Modu
d le
equipment (<768px), a small screen tablet computer screen
User A User B
(>=768px), medium computer screen (>=992px), large screen
desktop (>=1200px). In its style, the prefixes are xs, sm, md,
Group
u Module
Modu
d le
lg. Users can easily use these prefixes in different plug-ins or
custom style settings, and can flexibly combine the right
Figure 2. The system use case diagram page[5].

B. Text Chat Module For the response type design concept, page can be adapted
and adjusted automatically according to the different
This module mainly achieves text messaging chat, such as environment, in the overall layout, font size and pictures,
sending expression messages, files and photos. Friends can be which can make the page more flexible and can adapt to
displayed online and "inputting…", when you receive the different environment compatible mobile devices. Flow layout
message, the system will have a friendly message prompt is the use of floating all elements in the web page, when the
function. page width cannot accommodate an element, the element will
C. Point to Point Audio and Video Communication Module be automatically displayed floating to below, according to the
rules of the page elements, and all elements obtain the
This module mainly realizes the user's audio and video call reasonable location and layout. The flow grid system based on
between two friends. After the invitation is sent to a friend, one Bootstrap framework can be a good response to design flow
can cancel the audio and video call, the other can accept or layout.
reject. When a friend accepts the invitation, the two sides can
take audio and video communication clearly. The system is designed using Bootstrap framework, the
computer view is shown in Figure 3 and the mobile phone
D. Group Module view is shown in Figure 4.
The module mainly realizes the groups of creating,
modifying and disbanding. At the same time, you can set the LOGO
way that strangers join the group, set the group message as
undisturbed message, remove the group members and launch Navigation User

the group announcement, etc.

IV. KEY TECHNOLOGIES Chat View

A. Bootstrap Responsive Design

Friend List
1) The Bootstrap framework introduction Function Selection
Bootstrap, which is developed by Mark Otto and Jacob
Thornton of Twitter designer, is currently a popular front-end Chat Input Box
framework. Bootstrap is developed based on HTML, CSS,
and JAVASCRIPT, builds many beautiful styles, and offers
elegant HTML and CSS specifications. The font and font size Figure 3. The computer view
of website are unified by the predefined style sheet, which
make whole site more unified and more comfortable to read. LOGO
Of course, these predefined style can be changed, it makes the
Web development more quickly. Navigation User

Bootstrap framework comes with a set of JQuery Friend List

interactive plug-ins, including the mode dialog box, tab, scroll
bar, pop-up box, etc. It is not only functional, but also very
refined. Bootstrap framework is becoming as the default Chat View
design standard of many JQuery project. And these modular
components are also easy to modify, we can own our unique Function Selection
style through modifying the variables. With the development
and progress of Bootstrap, the flexible structure response grid Chat Input Box
system whose content is rich and varied has been applied, and
makes Web front-end development mode which is based on
the Bootstrap response come true[4]. Figure 4. The Mobile phone view

2) The Responsive Grid System 3) The Practical Application of Bootstrap

Bootstrap provides a set of streaming, mobile first First, you should download the latest version of
response type grid system for users. With a screen or window Bootstrap3 in the Bootstrap Chinese website and only


download the Bootstrap version for the production some "seasoning" to the password and rehashes it, and when
environment; Second, in order to use Bootstrap, you must the user logs in, the system sprinkles the same "seasoning" on
have jQuery which you can save from CDN of the Bootstrap the code that user provides with and rehashes it, and then the
Chinese website or download from JQuery website; Finally, system compares the hash value to ensure whether the
you should configure the environment, load the downloaded password is correct.
Bootstrap CSS file, the code is shown as follows:
The "seasoning" is called "Salt", which is generated
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> randomly and only known by the system. In this way, even if
</script> two users use the same password, the hash value of the system
<script src="js/Bootstrap.min.js"></script> is different, because the salt value generated by the system is
Before using the Bootstrap plug-in, jQuery must be different.
included, because Bootstrap is based on jQuery, the code is The activity diagram of the MD5+salt encryption algorithm
shown as follows: certification is shown in Figure5, the main steps are as follows:
<link href="assets/css/Bootstrap.css" rel="stylesheet">
In the framework of Bootstrap, response Web front-end
has more efficient and convenient features, and it can provide
users with more convenient experience. With the development
and progress of the information technology, the code amount
of the front-end equipment is also increasing, and the
responsive layout can be compatible with a variety of
front-end devices, which is beneficial to shorten the loading
time and improve the efficiency of the Internet[6]. Therefore,
the designers put the Bootstrap frame as the foundation, in
order to improve operational efficiency and design
effectiveness of the site, the responsive Web front-end design
is improved and the structure function is optimize, so that
users get the best user experience[7].
B. MD5+Salt Encryption Algorithm
Traditional authentication mode has some hidden troubles.
Firstly, the user account and password are transmitted in
plaintext in the network, it is not safe enough, if the hacker
steals and analyzes the data packets between the client and
server, it is possible that the hacker obtains the user’s account, Figure 5. The activity diagram of the MD5+salt encryption algorithm
password and other confidential information; Secondly, the certification
server stores user accounts, passwords and other information
through the database, as long as someone trespasses into the 1) The storage mode of username and password in the
database system, the user information will be leaked. server is that the username is stored directly in clear text and
Therefore, In order to make up the defects of traditional the password will need to be encrypted before it is saved in the
authentication mode, the MD5 encryption algorithm was used password file. The encryption method of system is that
in user authentication of IMSW. password is directly connected to Salt, and then uses MD5
MD5 is the abbreviation for message-digest Algorithm 5, +Salt algorithm to take hash calculation, then database stores
which is passed through MD2, MD3 and MD4. It transforms a the generation encryption result in the password file. User
random length string into a string of large integers. MD5 applies for appId and appToken using the third party service,
algorithm increases the concept of the safety-belts on the MD4. appId and appToken are Salt;
MD5 encryption algorithm is not reversible, that is, it can’t be
obtained by decoding the original string. If you need to verify 2) User inputs the user name and password in the form of
whether the password is correct, it will be needed that the the login view and submits the form;
password is encrypted by the same MD5, and then the
3) Encrypt user's password and Salt using MD5+Salt
password is compared with encryption results which is stored
in the database. But the professor XiaoyunWang of Shandong encryption algorithm;
University has successfully cracked the MD5 and found MD5 4) Compare the MD5+Salt encryption result with the
"collision" to broke the reliability and security of MD5 database password file using login() function;
encryption in 2004, that is the two file can produce the same
"fingerprint", so the use of MD5+salt algorithm ensures the 5) If both are same, users will log in successfully, otherwise
safety and reliability of user identity authentication[8]. it will return to the login screen to log in again.
To some extent, plus salt can solve this problem. The plus C. The Video Call
salt method is adding a little "seasoning". The basic idea is this,
when the user is registered, the system automatically sprinkles


 The system mainly realizes video call function through the 14) User A or user B click "end" and then the video call is
third audio and video cloud services. The Activity diagram of hung up using DO_refuseVoipCall function.
video call is shown in Figure 6 and the main steps are as
follows: V. CONCLUSIONS
This paper proposes a solution of IMSW, because the
method adopts loading the third party SDK and achieves high
quality communication between users using the third party
audio and video service remote interface. We don’t need to
deal with the tedious bottom business, the solution shortens the
development cycle of the system, reduces the difficulty of
system development and saves the development cost.
After the system running, it has basically achieved the
above functions, and the effect is good. It provides reference
for the development of other Instant Messaging systems. The
shortcoming of the system is that requiring the browser version,
the audio and video call only support Google browser (38, 44,
45, 46 stable version) in the HTTP environment, and supports
all versions of above Chrome38 (recommended to use more
than Chrome47 version) and the latest version of Firefox in the
HTTPS environment. This is what the system needs to be
improved.
ACKNOWLEDGMENT
The authors would like to thank the editor and referees for
their careful review and valuable critical comments. This work
was supported by the fund of Hebei University of Science and
Technology No. 2014PT21.

Figure 6. The activity diagram of video call REFERENCES

[1] Xin Yang, “Research on real time communication system and key
1) User A select a contact, and then start to call using technology based on Web,” Beijing University of Posts and
DO_inviteCall function; Telecommunications, 2013.
2) Determine whether the contact receiver state is selected; [2] Wenting Yang. “Research and implementation of message push
platform based on HTTP long connection,” Huazhong University of
3) If you do not select a contact, you are prompted to Science and Technology, 2012.
"reselect a contact", and turn to step 1, otherwise you will turn [3] Li Zhang, “Design and implementation of network examination system
to step 4; based on B/S architecture,” Jilin University, 2014.
4) Create makeCallBuilder object, set user B’s number, [4] Hou Shu, Yifan Xiong, Xuejiao Ge, “The design and implementation of
nickname and CallType; responsive web page based on Bootstrap framework,” Journal of Beijing
Institute of Graphic Communication , Vol. 02, pp. 47-52, 2016.
5) Determine the value of the CallType;
[5] Bin Yang, “Talk about responsive web design,” Journal of Liaoning
6) If CallType is zero, then will take audio call; if CallType Administration College, Vol. 05, pp. 161-167, 2014.
is one, take video call, then turn to step 7; [6] Yuanyi Chen, Yizhi Li, “Research response Web front-end based on
7) Display the video interface using HTML_videoView Bootstrap,” Fujian computer, Vol. 12, pp. 72-73, 2015.
function; [7] Rongling High, “The advantage of Bootstrap in the development of the
front-end,” Computer CD Software and Application, Vol. 01, pp. 74-76,
8) Control the call using DO_cancelVoipCall function; 2015.
9) If user A cancels the call, and then video call is ended, [8] Xiaohong Zhou, Jianhuo Zhou, “Application of MD5 encryption
otherwise turns to step 10; algorithm in registration and login verification module,” Industrial
10) If the user B accepts the video call, then turns to step 11, Control Computer, Vol. 11, pp. 118-119, 2015.
otherwise turns to step 12; [9] Yingxia Jia, “Talk about making responsive website layout on
Bootstrap,” Fujian Computer. Vol. 08, pp. 122-123, 2015.
11) Reject the video call using DO_refuseVoipCall function,
[10] Dan Pan, “Analysis of web based on Bootstrap response,” Digital
then it is ended; Technology and Applications. Vol. 10, pp. 179, 2016.
12) Receive the video call using DO_answerVoipCall [11] Zengming Wang, “Research on audio and video synchronization of
function; video chat system,” South China University of Technology, 2012.
13) User A and user B both display images using
setCallView function and take video call;