Implementation of Web Application with Real-Time Communication Based on WebSockets

Implementation of Web Application with Real-Time Communication Based on WebSockets

Yurii Buhryn, Nataliya Levandovych

Automated Control Systems Department, Lviv Polytechnic National University, S. Bandery Str., 12, Lviv, 79013, UKRAINE,
E-mail: yurii. buhryn@, levandovych. *****@***com

Abstract – Nowadays work in real-time is one of the most important requirements for web applications. Now we have different solutions for implementation of real-time communication. Considering the constraint of classical approaches for this feature such as streaming, hidden iframe, XMLHttpRequest, Ajax with long-polling, recommend using new perspective WebSocket technology for implementing real-time solutions in web communication. Considering the research of using WebSocket in different real - time solutions, prove that WebSocket optimize internet traffic. This technology made the perspective of future applying of WebSocket for real-time communications in web apps.

Кеу words – web application, web socket, long-polling.

II.Introduction

Nowadays the Internet is an irreplaceable thing in people’s life in the constantly developing communication age. Requirements of people for the web apps have changed from the beginning of first web solutions to our days. Now people requests interactive, responsive web application which are working in real-time.

Currently, server side uses Hypertext Transfer Protocol (HTTP) for the communication with client side (browser), which is stateless and request-response based application layer protocol. Client makes a HTTP request. It sets a Transmission Control Protocol (TCP) connection. After receiving request message from the client, the server sends back a response and then terminated the connection. Using this model, real-time data cannot be sent from servers to clients. Accordingly, technology like a Comet is used for implementing interaction in real-time interaction between client and server. Nonetheless, different implementations of real-time solutions have some restriction which makes problematic use this technology for real-time communications. Some of them require more resources on server, some of them require install plug-ins on browsers. By means of WebSocket protocol and HTML5 real-time data interaction could be realized without any installation of plug-ins or using more resources of server. So, WebSocket treated as the best way to resolve this issue.

III. Traditional Real-Time Solutions

Initial real-time communication solutions were based on technologies like polling and long-polling.

Polling implementation consists ordered list of request-response messages. These messages are sent by the client to server. After receiving request from client, if the server has messages to return, it sent back response to client with a new message, otherwise it send empty response. Upon a short interval which called as polling interval for server is polled again by client to check whether some new messages are available.

Easy implementation on client and server sides are the main advantage of this approach. However, there are some disadvantages in this solution. By using this approach it is hard to find out the updating frequency of data, so client can’t get the latest data in time. Besides, client’s frequent request will generate needless internet traffic and cause additional loading for server.

For making communicate between server and client at any time and without unnecessary requests, new solution called Comet (long-polling) was designed. Long-polling efficiently handles the data pushed from server to client. With long-polling new request which comes from client will save on server side on a some period of time instead of sending response immediately. If data updating appear on server side in this period of time, browser will receive a new data from server and will make new request after receiving the response [1]. Using this solution, client can get the latest data from server in time. Nonetheless, a lot of concurrency will consume more server resources for manage those live HTTP connections.

IV.The foundations of WebSocket

The HTML5 WebSocket specification provides an API that allows clients to use the WebSocket protocol for duplex communication with a server. WebSocket is a technology that provides bidirectional full-duplex communication channel over a single socket TCP. IETF and W3C have standardized the WebSocket API and protocol accordingly. Most popular browser such as Google Chrome, Safari, Opera and Firefox supports WebSocket [2].

The WebSocket protocol consist of two parts. The first part is handshake request and response which has request message from client and response from server respectively. The second part of WebSocket protocol is data transfer. WebSockets provides a standard which allow build real-time, scalable web applications. Moreover, as it provides native socket to the browser, it resolves many of the problems with implantation. To set up a WebSocket connection, the client sends a WebSocket handshake request with particular data message, for which the server returns a WebSocket handshake response respectively. Since connection established, WebSocket data frames can be sent forth and back between the server and client in full-duplex mode. Simulated bidirectional browser communication over HTTP is complex and error-prone. WebSockets also have unique features, it provide ability to pass through proxies and firewalls which is issue area for many web applications. A WebSocket automatically detects the presence of a proxy and establishes a tunnel to pass through the proxy. The following Figure 1 shows a basic WebSocket based architecture in which clients use a WebSocket connection for direct, full-duplex communication with remote hosts.

Fig.1 General WebSocket-based Architecture.

Using of WebSockets simplifies much of the complexity around implementations of connection management and bidirectional web communication.

V.COMPARATIVE ANALYSIS OF POLLING AND WEB SOCKET METHODS

Lets try to compare the WebSocket protocol with the standard solutions like polling and long-polling and try to find the benefits of using this technology.

Let’s consider following example where HTTP header contains 871 bytes. Header size in some cases may increase up to 2000 bytes. An application based on polling which is deployed for huge number of users have been investigated. In this case network throughput for just header data and HTTP request for different amount of users polling requests like in Table 1.

TABLE 1

Polling results

	Clients polling per second	Network throughput, (bits)
Case A	1000	6,968,000
Case B	10000	69,680,000
Case C	100000	696,800,000

Previous example shows us the colossal amount of unnecessary requests. Now lets try to rebuild this application with WebSocket. That leads to huge contraction in using the network throughput. All of these WebSocket frames messages has only 2 bytes of overhead instead of 871. Now we will investigate previous example with the WebSocket based application in this case the size of message header is only 2 bytes. Results are given in Table 2.

TABLE 2

WebSocket results

	Clients polling per second	Network throughput, (bits)
Case A	1000	16000
Case B	10000	160000
Case C	100000	1600000

As we can see from the comparison results of using WebSockets and polling solutions which are submitted on Fig. 2, using of WebSockets provide a huge reduction of unnecessary internet traffic.

Fig.2 Comparison of polling with WebSocket
with respect to above example.

Conclusion

So, this paper provides a detailed description and comparison of various solutions that are used for real time communication in web applications. Here we have considered different issues involved in designing the real-time application using classic methods like long-polling and polling. Also this paper provides the comparative analysis of polling with WebSocket. The comparative analysis and investigation shows that WebSocket gives the better solution. WebSocket protocol offers huge reduction in delays and network overhead during real-time communication. By analyzing the results of experiments we found that WebSocket technology is the best solution for implementing real-time communication in web applications.

References

[1] D. G. Synodinos, “HTML 5 Web Sockets et and Ajax,” 2008.

http://www. /news/2008/12/websockets-vs-comet-ajax

[2] Bo Mao, Zhiang Wu, Jie Cao, A framework for online spatio-temporal data visualization based on HTML5, International Archieves of the Photography, remote Sensing and spatial information Science, vol. XXXIX-B2, pp. 123-127, 2012.