Thursday 26 November 2009

StreamHub 2.0.10 Released. New Demos & Connection Listener!

We've just released a new version of the StreamHub Reverse Ajax & Comet Server. We've added a whole bunch of new stuff, details below:
  • New jQuery Grid Plugin Demos
  • New Example Fixed Income streaming data
  • New Ext-GWT Demo
  • Fix for the 'queue is full - disconnecting' loop bug
  • Clients who recently lost connection and are in the reconnection state now do not count towards the maximum user limit
  • StreamHub now distinguishes between deliberate user disconnects and clients losing connection in the logs
  • A connection listener has been added to the Ajax SDK
Using the new Ajax SDK Connection Listener

To use the new connection listener, you'll first need to create your own custom listener code. For example, to alert everytime the connection goes up or down, add the following JavaScript to your host page:

var connectionListener = new StreamHub.ConnectionListener();
connectionListener.onConnectionEstablished = function () {
alert("Connection up");
};
connectionListener.onConnectionLost = function () {
alert("Connection down");
};

Then, before you connect, just add your new connection listener:

var hub = new StreamHub();
hub.addConnectionListener(connectionListener);
// now connect as normal...

You can add as many connection listeners as you like. The alerting example is pretty simple, you will probably want to do something more useful such as add a connection monitor on your page which is green when the connection is up and red when its down. Lets go ahead and add such a connection monitor to one of the examples which come with the StreamHub SDK. Navigate to the examples\StockDemo directory of the SDK and edit the index.html file. Add the following div element just above the closing body tag:

<div id="connectionMonitor" style="width: 120px; border: 1px black solid; background-color: yellow">Not connected</div>

Then change the code between the last script tags to the following:

var connectionListener = new StreamHub.ConnectionListener();
connectionListener.onConnectionEstablished = function () {
var connectionMonitor = document.getElementById('connectionMonitor');
connectionMonitor.innerHTML = "Connected";
connectionMonitor.style.backgroundColor = "green";
};
connectionListener.onConnectionLost = function () {
var connectionMonitor = document.getElementById('connectionMonitor');
connectionMonitor.innerHTML = "Disconnected";
connectionMonitor.style.backgroundColor = "red";
};

var hub = new StreamHub();
hub.addConnectionListener(connectionListener);
var sServerUrl = "http://localhost:7979/";
hub.connect(sServerUrl);
hub.subscribe("BA", priceChangeListener);
hub.subscribe("BAC", priceChangeListener);
hub.subscribe("C", priceChangeListener);
hub.subscribe("KO", priceChangeListener);
hub.subscribe("MCD", priceChangeListener);
hub.subscribe("WMT", priceChangeListener);

Open the StockDemo at http://localhost:7979/StockDemo/index.html and you should see the connection monitor in action. See the screenshot below for an example of the finished item:



New examples overview

We've added three new examples to this version. Two show how to use the versatile jQuery Grid Plugin. The first just displays a simple grid of stock prices.


The second uses the new example Fixed Income data. It shows how to use a larger grid, how to use a different theme and how to highlight rows using the 'ui-hover' class so the row highlight is tied to the jQuery UI theme.



The third new example uses Ext GWT to create a simple sortable grid with custom green/red formatters and the option to hide/show columns.



The full source code for the Ext GWT demo is available from the GWT Comet Adapter source website. The main classes are ExtGwtApp.java and Stock.java.


Get the latest version

Find the latest version available to download below aswell as links to the most up-to-date documentation and tutorials:

Enjoy! More demos are coming soon, subscribe to this blog or follow us on twitter to keep up to date.