Int. J.

Communications, Network and System Sciences, 2012, 5, 797-801

http://dx.doi.org/10.4236/ijcns.2012.512083 Published Online December 2012 (http://www.SciRP.org/journal/ijcns)

Research of Web Real-Time Communication

Based on Web Socket
Qigang Liu, Xiangyang Sun
Sydney Institute of Language & Commerce, Shanghai University, Shanghai, China
Email: [email protected]

Received September 4, 2012; revised October 15, 2012; accepted October 26, 2012

ABSTRACT
Regarding the limitations of traditional web real-time communication solutions such as polling, long-polling, flash
plug-in, propose that using new coming Web Socket technology in the web real-time communication field, introduce
the features of Web Socket technology, analysis the difference between Web Socket protocol and HTTP protocol, offer
an approach to implement the Web Socket both in client and server side, prove Web Socket can decrease network traf-
fic and latency greatly by an experiment, made the prospect of future application of Web Socket in web real-time com-
munication.

Keywords: Web Socket; Full-Duplex; HTTP Streaming; Long-Polling; Latency

1. Introduction mary solutions used by Web developers to accomplish

the real-time communication between browser and server
The Internet has been an indispensable part of people’s
in the past.
life in the fast growing information age. People’s re-
Polling an approach manually refreshing page is re-
quirements for the Internet have changed from informa-
placed by auto running program is the earliest solution
tion accessibility in the Web 1.0 era to information in-
for real-time communication applied in browser. Easy
teraction in the Web 2.0 era, and to current instant inter-
implementation and no additional requirement for client
action observed in an increasing number of pricing sys-
and server are the big advantage of this solution. How-
tems, e-commerce systems, and news announce systems.
ever, there are some obvious shortcomings in this solu-
Currently, the communication between client browser
tion, it is very hard to figure out the frequency of data
and server is based on Hypertext Transfer Protocol (HTTP),
updating, so browser can’t get the latest data in time.
an Application Layer protocol which is request-response
Additionally, in the case of no data updating occurring
based and stateless. An HTTP client initiates a request. It
during a period of time, browser’s frequent request will
establishes a Transmission Control Protocol (TCP) con-
generate unnecessary network traffic and cause unneces-
nection. After receiving the client’s request message, a
sary burden for server.
server sends back a message as a response and terminates
For making server communicate with browser at any
the connection. Under this model, servers can not send
time, Web developers design a new visit mechanism
real-time data to clients. Therefore, technologies, such as
called long-polling or Comet, through which server will
Flash, Comet, and Ajax long polling, have been applied
save the new request from browser for a period instead of
to implement real-time communication between client
sending respond right away. If data updating occurs in
and server. However, these technologies cannot accom-
this period, server will response to browser with the new
plish real-time communications, because some of them
coming data, and browser will make another request
need install plug-ins on browsers, some of them cause
when receives the response [1]. By this mechanism,
heavy load for server. The emergence of HTML5 and the
browser can get the latest data of server side in time.
Web Socket protocol realize the real-time data transmis-
However, if a large number of concurrency happens,
sion in web-based system, so far, they are considered as
server memory and computing capacity will be con-
the best solution to resolve this issue.
sumed greatly by maintaining those live HTTP connec-
tions.
2. Traditional Web Real-Time
Developers have also attempt “HTTP Streaming” visit
Communication Solutions
mechanism. Its main difference is server will never close
Polling, long polling and HTTP streaming were the pri- a connection sponsored by browser, sever will used this

Copyright © 2012 SciRes. IJCNS

798 Q. G. LIU, X. Y. SUN

connection for sending message at any time. In this case, From client (browser) to server:
since server won’t signal the completion of the connec- GET /long-polling HTTP/1.1
tion, response from server will be probably buffered by Host: www.kaazing.com
firewalls and proxy servers in the network, cause some User-Agent: Mozilla/5.0 (X11; U; Linux x86_64;
errors happened during browser receiving data. en-US; rv:1.9) Gecko/2008061017 Firefox/3.0
Accept:
3. The Introduction of Web Socket text/html,application/xhtml+xml,application/xml;q = 0.9,
*/*; q = 0.8
Web Socket, as a new feature of HTML5, is defined as a
Accept-Language: en-us,en;q = 0.5
technology that enables web pages to use the Web Socket
Accept-Encoding: gzip,deflate
protocol for full-duplex communication with a remote
Accept-Charset: ISO-8859-1,utf-8;q = 0.7,*;q = 0.7
host. It introduces the Web Socket interface and defines a
Keep-Alive: 300
full-duplex communication channel that operates through
Connection: keep-alive
a single socket over the Web [2]. HTML5 Web Socket
Cache-Control: max-age = 0
efficiently provides a socket connection to internet with
Referer: http://www.example.com/
minimal overhead. It delivers an enormous reduction in
network traffic and latency compared to Ajax polling and
From server to client (browser):
Comet solutions that are often used to transmit real-time
Date: Tue, 16 Aug 2008 00:00:00 GMT
date to simulate full-duplex communication by main-
Server: Apache/2.2.9 (Unix)
taining two HTTP connections. Therefore, it is the ideal
Content-Type: text/plain
technology for building scalable, real-time web commu-
Content-Length: 12
nication system.
To use HTML5 Web Socket to connect one web client
Hello world
with another remote end-point, a new Web Socket in-
Shown by the above two headers, apart from the data
stance should be initialized with a valid URL that repre-
“Hello World”, most of the data in these headers are
sents the remote end-point to be connected. Web Socket
useless for end user during this interaction between client
defines ws:// and wss:// scheme as Web Socket and se-
and server, let along the Cookie and Session (information
cure Web Socket connection separately. A Web Socket
contained in these two items is usually more than control
connection is established when updating a HTTP proto-
information in headers in most websites). Furthermore,
col to Web Socket protocol during the initial handshake
these types of headers will be included in each interac-
between client and server.
tion. So, it must wastes lots of bandwidth, produces a
Web Socket connections use standard HTTP ports (80
great number of network traffic if resort to polling and
and 443), therefore, it is called “proxy server and fire-
Comet solutions. Additionally, constructing and analyz-
wall-friendly protocol” [3]. So, HTML5 Web Socket
ing the headers will take up some of the time that used to
does not require any new hard-ware to be installed. With-
process request and response, and lead to some degree of
out any intermediate server (proxy or reverse proxy
latency. These shortcomings of polling and Comet have
server, firewall, load-balance router and so on), a new
indicated that these two techniques must be replaced by
Web Socket connection can be established successfully,
other real-time communication technologies in the future.
as long as both client and server support Web Socket
Let’s turn to the Web Socket connections.
protocol.
Web Socket use the HTTP Upgrade mechanism up-
grade to Web Socket protocol [4]. Web Socket’s hand-
4. Comparison between Web Socket
shake mechanism is compatible with HTTP. Therefore,
Connections and HTTP Connections
HTTP servers can share the default HTTP and HTTPS
Communication between client and server is usually ports (80 and 443) with Web Socket servers. To establish
based on HTTP connections which require headers at- a new Web Socket connection, HTTP protocol will be
tached to the request of client and response of server, upgraded to Web Socket protocol during the initial hand-
according HTTP protocol definition, these headers con- shake between client and server. Once the connection is
tain some transmission control information such as pro- established, Web Socket will be transmitted back and
tocol type, protocol version, browser type, transmission forth between client and server based on full-duplex
language, encoding type, out of time, Cookie and Session. model. The header of initial handshake is given as below:
Under the help of software like Firebug and Turning on From client (browser) to server:
Live HTTP Headers, headers of request and response can GET /text HTTP/1.1
be observed clearly. An example of one request and re- Upgrade: WebSocket
sponse’s headers are defined as follows: Connection: Upgrade

Copyright © 2012 SciRes. IJCNS

 Q. G. LIU, X. Y. SUN 799

Host: www.websocket.org void close();

};
From server to client (browser): According the definition of interface and construct
HTTP/1.1 101 WebSocket Protocol Handshake function, a new Web Socket instance can be initialized
Upgrade: WebSocket by two parameters, one necessary parameter is a valid net
Connection: Upgrade work address, and the other optional parameter is proto-
col type. In browsers, Web Socket object is operated by
Hello world JavaScript. A new Web Socket instance can be created
It is clearly shown that the control information includ- by a piece of simple code:
ed in headers of Web Socket connections is much less var myWebSocket = new WebSocket
than that in the headers of HTTP connections. On the (“ws://www.websocket.org”);
other hand, Cookie and Session are not allowed in header The prefix “ws” represents Web Socket connection,
of Web Socket connection according the specifications of something related to this is “wss”, it represents secure
Web Socket protocol, and the first and foremost, once the Web Socket connection. Before the initialization, it is
connection is established successfully, client can com- necessary to check whether the client browsers support
municate with server freely, and only two bits of control Web Socket technology:
information are attached to end user required data which if (“WebSocket” in window)
is encoded by UTF-8, one bit is “\x00” locating at the {var ws = new WebSocket
beginning, the other bit is “\xFF” locating at the end. (“ws://example.com/service”);}
This definition of Web Socket makes a great decrease on else
bandwidth and time consumed by processing headers in {alert(“WebSockets NOT supported here”);}
Web Socket connections, then lead to less network traffic Before sending messages, several functions should be
and lower latency. These are the exact reasons why Web registered for handling a serials event of Web Socket
Socket is more suitable than polling and Comet for web- connecting process, such as successfully establishing
based real-time communication. connection, receiving messages, closing message.
From the security point of view, both Web Socket pro- myWebSocket.onopen = function(evt)
tocol and HTTP protocol can realize secure transmission. {alert(“Connection open ...”); };
Wss and https are their separate secure transmission pro- myWebSocket.onmessage = function(evt) {alert( “Re-
tocols. So, Web Socket is considered as the ideal tech- ceived Message: “+ evt.data);};
nology for real-time communication on the aspect of myWebSocket.onclose = function(evt)
network traffic, latency and security. {alert(“Connection closed.”);};
To send messages, just call post message method fol-
5. The Implementation of Web Socket lowed by message content as its default parameter. After
messages have been sent, call disconnect method to ter-
Technology minate the connection.
A. The implementation of Web Socket on client side myWebSocket.postMessage(“Hello Web Socket! “);
The implementation on client side is relatively simple. myWebSocket. disconnect(); stockTickerWebSocket.
Below is the definition of Web Socket interface given by disconnect();
W3C work group [5]: B. Implementation of Web Socket on server side
[Constructor(in DOMString url, in optional DOM- Comparing to the implementation on client side, server
String protocol)] side is much complicated, most operations on client side
interface WebSocket { like generating headers, analysis headers, extracting use-
readonly attribute DOMString URL; ful data are all done by browsers automatically, but these
// ready state are not implemented on servers, and should be done
const unsigned short CONNECTING = 0; manually by developers. Server side Web Socket imple-
const unsigned short OPEN = 1; mentation is mainly depend on Socket programming
const unsigned short CLOSED = 2; which is common for C#, Java, and C++. In this paper,
readonly attribute unsigned short readyState; author uses C# to implement server side Web Socket
readonly attribute unsigned long bufferedAmount; function.
// networking First, a listener should be created for monitoring the
attribute Function onopen; new request in net work.
attribute Function onmessage; private Socket serverListener = new Socket (Address-
attribute Function onclose; Family. InterNetwork, SocketType. Stream, rotocolType.
oolean send(in DOMString data); IP);

Copyright © 2012 SciRes. IJCNS

800 Q. G. LIU, X. Y. SUN

The accept function is responsible for listening the public void SendMessage(MessageEntity me)
new coming request, therefore, it should be put in a loop {
which runs all the time for getting the client request at ClientSocket.Send(new byte[] {0x00});
any time. ClientSocket. Send(Encoding. UTF8. GetBytes (Json-
while (true) Convert.SerializeObject(me)));
{ ClientSocket.Send(new byte[] { 0xff });
Socket sc = serverListener.Accept(); }
//get a new connection Finally, call DisConnection methd to close the connec-
if (sc != null) { … }//process the request tion when communication is over.
}
When receive a new connection request, similarly, se- 6. The Analysis of Web Socket Performance
veral server functions need to be registered for handling
The efficiency is the key issue of real-time data trans-
events like receiving message, sending message, closing
mission; it’s also the important standard for evaluating
connection that occur during communication.
whether a protocol is suitable for real-time data transmis-
ci.ReceiveData += new ClientSocketEvent (Ci_Re-
sion. A test has been conducted to monitor Web Socket
ceiveData);
performance in asynchronous transmission. The test is
ci.BroadcastMessage += new BroadcastEvent (ci.
divided into two parts, the first part is to sort a table
SendMessage);
which contains five columns and three rows data in
ci.DisConnection += new ClientSocketEvent (Ci_Dis-
phpMyAdmin page based on HTTP request, and the
Connection)
other part is to sort a same size table in separate page
Then call BeginReceive method to receive client re-
based on Web Socket communication. During the whole
quest message, and try to handshake with client browser,
test process, use Google Chrome 5 as a client browser,
if the handshake successes, then full-duplex communica-
and software Wireshark Network Protocol Analyzer as a
tion can be started.
monitor tool to watch the changes of data package and
ci.ClientSocket.BeginReceive(ci.receivedDataBuffer,
bit stream. Finally, get following results (Figure 1):
0, ci.receivedDataBuffer.Length, 0, new AsyncCallback
Shown by the above data (Table 1), Socket connec-
(ci.StartHandshake), ci.ClientSocket.Available);
tions are ten times efficient than HTTP connections. On
In above code, StartHandshake method is responsible
the other hand, refer to Peter Lubbers and Frank Greco’s
for generating handshake information based on client
test about the efficiency comparison between Ajax poll-
request. In this method, values of two key “Sec-Web-
ing and Web Socket [7], it can be concluded that Web
Socket-Key1” and “Sec-WebSocket-Key2” will be fetch-
Socket’s performance is much better than HTTP in terms
ed from request headers, and MD5 computation defined
of network traffic and delay, especially in large number
in the Web Socket protocol will be done based on these
concurrency case.
two values, and return the result at the end, the MD5 re-
sult is a means to protect the data during the handshake
process [6]. If the handshake successes, new connection
will be put into the connection poll for reuse next time.
listConnection.Add(ci);
What should be paid attention here is putting the char-
acter “\x00” at the beginning of messages and “\xFF” at
the end of the message when sending messages, and re-
moving these two character when reading messages. Ad-
ditionally, message should be encoded or decode by Figure 1. Comparison between HTTP connections and soc-
UTF-8 before using. ket connections on traffic and time.

Table 1. Data table used in test.

Number of packets Number of bits Time (second)

HTTP Web Socket HTTP Web Socket HTTP Web Socket

Client to server 83 5 33,662 372

Server to client 77 8 45,600 7456

Total 160 13 79,262 7828 ~2.5 ~0.25

Copyright © 2012 SciRes. IJCNS

 Q. G. LIU, X. Y. SUN 801

7. Summary http://www.infoq.com/news/2008/12/websockets-vs-com
et-ajax
Real-time data transmission will be an inevitable trend [2] Wikipedia, “WebSockets,” 2010.
for web-based information system. Web Socket consid- http://en.wikipedia.org/wiki/WebSockets
ered as the next generation of Ajax will be widely used in
[3] Peter Lubbers, “Pro HTML 5 Programming,” Apress,
the Internet. Currently, the most popular browser IE8 and Victoria, 2010.
its lower versions still not support Web Socket. However,
[4] W3C, “The Web Sockets API,” 2009.
Kaazing Company has been developing an intelligent http://www.w3.org/TR/2009/WD-websockets-20091222
gateway which can convert Ajax polling and Comet used
[5] D. Sheiko, “Persistent Full Duplex Client-Server Connec-
in lower version browser to Web Socket instant commu- tion via Web Socket,” 2010.
nication. Web Socket protocol and Web Socket API are http://dsheiko.com/weblog/persistent-full-duplex-client-ser-
still being updated. Probably, Web Socket will become ver-connection-via-web-socket
the perfect solution for the “C10K” issue in the near fu- [6] Makoto, “Living on the Edge of the WebSocket Proto-
ture. col,” 2010.
http://blog.new-bamboo.co.uk/2010/6/7/living-on-the-edge
of-the-websocket-protocol
REFERENCES [7] P. Lubbers and F. Greco, “HTML5 Web Sockets: A Quan-
[1] D. G. Synodinos, “HTML 5 Web Sockets vs. Comet and tum Leap in Scalability for the Web,” 2010.
Ajax,” 2008. http://websocket.org/quantum.html, 2010.

Copyright © 2012 SciRes. IJCNS