Saturday 12 March 2011

HTML5 Server-Sent API

Introduction

This specification defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events. The API is designed such that it can be extended to work with other push notification schemes such as Push SMS. It can also be used to implement connectionless Push notification as described in below use case.

When we would like to push data to web pages over HTTP or using some dedicate server-push protocol this API can be used. It offers the use of EventSource interface to implement this functionality. Using this API we will need to create an EventSource object and registering an event listener to show various readyState as CONNECTING (numeric value 0), OPEN (numeric value 1) and CLOSED (numeric value 2).

While the connection is alive with the server the user agent will be required to parse and interpret the event stream of MIME type text/event-stream

Use case

In case of Stock application when we would like to minimize the load on client especially if it is on the portable device like mobile to save battery power and reduce network load the push notifications can certainly help. This will require server side implementation to support pushing of data to client. This can be a good alternative rather than using XMLHttpRequest or an iframe.

The browsers on mobile handsets tied to specific carriers, may offload the management of the connection to a proxy on the network. In such a situation, the user agent will be implementing the connectionless push notification with the help of some ‘push proxy’.

For example, a browser on a mobile device, after having established a connection, might detect that it is on a supporting network and request that a proxy server on the network take over the management of the connection. In between two messages, the browser detects that it is idle except for the network activity involved in keeping the TCP connection alive, and decides to switch to sleep mode to save power. Here the browser will disconnect from the server and the "push proxy" service will contact the remote HTTP server and requests the resource and if available then it will convey the event to the mobile device, which wakes only enough to process the event and then returns to sleep.

This can reduce the total data usage, and can therefore result in considerable power savings.

The only challenge is if user is opening multiple pages from the same server that is using this API. In such cases isolated domain per page might be required to solve the problem or implementing push objects with the help of Webworker API.

Examples

The user agent will create the EventSource object as described below and have a listener for incoming data.

var source = new EventSource('stockupdates.cgi');

source.onmessage = function (event) {

alert(event.data);

};

On the server-side, the script ("stockupdates.cgi" in this case) will send messages in the following form, with the text/event-stream MIME type:

data: This is the X stock value for AAA stock option.


data: This is Y stock value for BBB stock option

data: with deviation from previous value as 4.

1 comment:

  1. Couple of days back…I was thinking of implementation where client sends requests to the server for updated data…but after some research, in some cases I found it useless. Now with this new technique, server can inform the client in case if it contains new data. This was not happening in the earlier case where client uselessly asks the server for updates.

    As the server has taken the responsibility of updating the client, we are benefitted with factors such as load (network, client, and server) and power (crucial in case of mobile devices).

    We can use this new technique for variety of applications worldwide such as Cricket score, News alerts etc. Example provided at the end has given small idea of great thing. I would definitely like to research more on this.

    Thanks for putting this in front of us. Best Luck.

    ReplyDelete