A few weeks back on Devoxx 08, Jonas Jacobi and John R. Fallows did a talk about 2 future web technologies that’ll change the way we architect our webapplications.
(in the same manner then AJAX did a few years back).
The technologies are called WebSockets and Server Sent events and are part of the HTML5 specification. (which is now in Editor’s draft and thus not finished)
WebSockets and Server Sent events can enable us to create a full-duplex web application. Eg. a sample application could be a poker game with thousands of viewers connected and that those viewers need to be notified in realtime. Another example could be a continuously updated stock ticker.
Prior to the introduction of WebSockets, bi-directional browser communication was an elusive beast, commonly known as Comet or ReverseAjax and typically achieved with an astonishing assortment of browser hacks. But, with the emerging standards outlined in the HTML 5 specification, developers can now take advantage of a full-duplex communications channel that operates over a single socket.
Real time web
With real time web, we mean that web clients can receive server updates (server initiated communication) and end users receive those updates concurrently.
Long polling with AJAX (XML Http Request) gives us near real time updates, but they are requested from the client and cause increased network traffic. Also these short AJAX requests generally have a small payload and relatively high amount of http headers. (wasted bandwith)
Comet technologies support HTTP Streaming, this setups a persistent http connection which only has to be setup/teardown only once. (especially nice for performance for https traffic)
HTML 5 Overview
HTML 5 not only contains WebSockets and Server Sent events. It also contains standard features like:
- communication (sockets, cross-site)
- graphics (2D)
- drag n drop
- storage (transient, (offline) persistent)
- compatibility
Here we focus on two: Server-sent events and WebSockets
Server-sent events
Server-sent events standardizes how we stream data from the server to the client (in fact standardizing comet/reverse ajax).
It introduces a new DOM Element: eventsource. The eventsource element provides a simple interface for allowing servers to dispatch DOM events into documents that expect it.
Here is how to create it:
var es = document.createElement(“eventsource”);
es.addEventSource(“http://www.javablog.be”);
(where the event source is an URL).
WebSockets
WebSockets provide a full duplex TCP connection to communicate between the browser and the server. It traverses firewalls and routers and allows authorized cross domain communication.
An example is provided below:
var myWebSocket = new WebSocket(“ws://www.websocket.org”);
The WebSocket(url) constructor takes one argument, url, which specifies the URL to which to connect. When a WebSocket object is created, the User Agent must parse this argument and verify that the URL parses without failure and has a <scheme> component whose value is either “ws” or “wss”. Only then the user agent must asynchronously establish a Web Socket connection to url.
myWebSocket.postMessage(“Hello”);
=> text based data transmission using the connection.
myWebSocket.onopen = function(evt) { }
=> The open event is fired when the Web Socket connection is established.
myWebSocket.onmessage = function(evt) { }
=> The message event is fired when when data is received for a connection.
myWebSocket.onclose = function(evt) { }
=> The close event is fired when the connection is closed
myWebSocket.disconnect();
=> close the conncetion
Browser support
Opera already has Server sent events, for Mozilla/Firefox there is patch available (bug 338583)
WebSockets is not yet available natively in browsers.
But fortunately for current browsers Kaazing.com provides an emulation Javascript library. (IE5.5+, Firefox 1.5, Chrome 0.2+, Safari 3.1+, Opera9+)
The Javascript only emulates the parts which are not yet implemented in a certain browser.
It can be any of the following layers: ByteSocket, Websockets, Server sent events, Cross site XML HTTP Request, XML Http Request IFrame postMessage
This example uses Apache TomEE as it provides an easy way to specify the correct dependencies via Maven.