Today, we will talk about HTML5 and will study the protocol that has been the most successful: WebSocket. This protocol allows for a permanent bi-directional connection between a client and a server, in order to solve some of the problems caused by the unidirectional and disconnected nature of the HTTP protocol.
WebSocket thus allows the development of real-time applications such as news sites or stock market monitoring, or multi-user applications (chat, online games, etc.).
The specification allowing to use WebSocket is developed by the W3C, while the communication protocol is standardized by the IETF.
The WebSocket Protocol
To establish a WebSocket connection, a request of “upgrade” must be sent by the client, in order to ask for the update of the current TCP/HTTP connection towards the WebSocket mode. This request can be presented in the following way:
https://prnt.sc/1uutspj
And the server returns a response to the request:
https://prnt.sc/1uuu12r
This initial exchange is called “handshake”. From then on, the communication between server and client is done by the WebSocket protocol. The details of the protocol can be found on the site of the IETF. New versions are published regularly, the protocol I presented being the latest version (25/02/11). I specify that these publications are in a “draft” state and change constantly.
The WebSocket API
The API, developed by the W3C, introduces the following WebSocket interface:
[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
readonly attribute DOMString url;
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2;
const unsigned short CLOSED = 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
attribute Function onopen;
attribute Function onmessage;
attribute Function onerror;
attribute Function onclose;
readonly attribute DOMString protocol;
void send(in DOMString data);
void close();
};
WebSocket implements EventTarget;
So to create an instance of WebSocket, the only argument we have to provide is the URL of the server (Websocket compatible) with which we want to establish a connection. It must start with ws:// (or wss:// for a secure connection).
Then, the interface that contains the functional attributes allowing to manage the associated events:
onopen : opening of a WebSocket
onmessage : reception of a message
onerror : error(s) occurred
onclose : closing of a WebSocket
Support
Server side implementation
There are currently several server-side implementations of WebSocket:
Kaazing WebSocket Gateway
Socket.IO-Node (NodeJS)
Jetty (Java)
Netty (Java client-server framework)
JWebSocket (Java)
Web Socket Ruby (Ruby)
mod_pyWebSocket (Python extension for the Apache HTTP server)
Websocket (Python)…
Many projects are underway to create other servers and frameworks integrating WebSockets.
Client-side implementation: browsers
Chrome: supported version 4+.
Firefox: supported but disabled version 4+.
IE : not supported
Opera: supported but disabled version 11+.
Safari : supported version 5+
The lack of browser support is due to security holes in the protocol specification. I will talk about this in more detail in the security section.
Application
Now we will see how we can use the WebSocket API on the client side with JavaScript.
We start by creating a Websocket instance with a valid URL:
var ws= new WebSocket(“ws://websocketUrl”);
Then, we manage the events that occurred after the creation:
ws.onopen = function(evt) { alert(“Connection open …”); };
ws.onmessage = function(evt) { alert(“Received Message: ” + evt.data); };
ws.onclose = function(evt) { alert(“Connection closed.”); };
ws.onerror = function(evt) { alert(“WebSocket error: ” + e.data) };
To send messages or data we use the send function :
myWebSocket.send(MyMessage);
And finally, we close the WebSocket with the close method :
myWebSocket.close();
Security
Studies have been conducted by security experts regarding the use of WebSockets and important flaws have been discovered, including the possibility of cache-poisoning in cases of transparent proxies. As a result of these studies, the browsers Opera and Firefox have decided to disable their support of WebSockets (which can be re-enabled in the options) until these issues are resolved in future versions.
Conclusion
The WebSocket protocol represents a very important advance in client-server communication. HTTP is a stateless, unconnected protocol, and was not designed to establish permanent connections or push data: in HTTP, the client must explicitly request data from the server. Of course, several techniques have been developed to bypass this barrier and allow the reception of updated data almost instantaneously (polling, long-polling…); but they overload the network with useless HTTP headers. WebSocket will soon be able to remedy this.