Tag Archives: html5

Devoxx 08: HTML 5 WebSockets and Server Sent Events

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

Top picks for Devoxx 2008 University day 2

Here are my Top picks for Devoxx 2008 University day 2:

Comet: Never more!

The title of this talk is a little bit mysterious if you don’t know what Comet is about, but the content is looking very interesting.

The first part of the talk will be about HTML5 WebSockets and Server Side Events. WebSockets will enable full-duplex HTTP communication, and bring an end to the “click and wait” paradigm traditionally associated with the Web.

Attendees will also learn how WebSockets can be used to deliver information from a set of TCP-based backend services, such as Apache ActiveMQ and Jabber to a variety of clients (e.g. Java, Silverlight, and Flash) other than JavaScript.

The second half of this university session will be about deploying and scaling “real-time” Web Applications. Eg. the server and network architecture, performance requirements and scalability of a bi-directional Web application will be discussed.

Check out Jonas Jacobi’s blog for more info!

Filthy Rich Clients: beyond Java

Interested in the new Google Android phone? Then you certainly should not miss this univerity session by Romain Guy.

Romain Guy, who’s now working on the UI design of the Android phones as a Google engineer, always manages to impress the crowd with cool demos and knows what it takes to design a intuitive user-interface.
(which is more important than most programmers think!)

Chet Haase, who works on animation and UI components for the Flex SDK team at Adobe Systems, will likewise describe how to achieve beautiful Filthy Rich Client applications for Flex.