This project includes different demos based on Lightstreamer StockList Adapter
HTML JavaScript CSS

README.md

Lightstreamer - Stock-List Demos - HTML Clients

This project includes different demos based on Lightstreamer - Stock-List Demo - Java Adapter:

  • Basic Stock-List Demo
  • Stock-List Demo
  • Framed Stock-List Demo
  • Simple Grid Demo
  • Chart Demo

Basic Stock-List Demo - HTML Client

Live Demo

Demo ScreenShot

View live demo

Details

This demo displays real-time market data for ten stocks, generated by a feed simulator.
This page uses the JavaScript Client API for Lightstreamer to handle the communications with Lightstreamer Server. A simple user interface is implemented to display the real-time data received from Lightstreamer Server. The front-end code is kept extremely simple and represents a good introduction to Lightstreamer subscription management. In particular, the client code can be considered as a reference example of item subscriptions in MERGE mode.

The demo includes the following client-side functionalities:

Stock-List Demo - HTML Client

Live Demo

Demo ScreenShot

View live demo

Details

This demo shows some further features with respect to the Basic Stock-List Demo.
Click on the stock names to open pop-up windows that display real-time streaming charts. Notice that the maximum update frequency set for the pop-up windows is greater than the frequency set for the main window. The data is resampled by Lightstreamer Server, according to the maximum frequency requested by each table (you can easily notice that if you open "Ations Europe").
Click on the link under the table (Next/Previous 15) to dynamically switch between two lists of fifteen items, without losing previously opened pop-ups. If you open the same demo in different browser windows, you will see slightly different values for the most updated stocks. Again, this behavior shows how the data resampling is done in real-time on a per-window basis. Notice that a large portion of the JavaScript front-end code is devoted to client-side formatting operations.

The demo includes the following client-side functionalities:

Framed Stock-List Demo - HTML Client

Live Demo

Demo ScreenShot

View live demo

Details

The same as the Stock-List Demo, but with a different architecture for the LightstreamerClient integration.
A LightstreamerClient object is always kept alive in a hidden frame. For an explanation of the different deployment strategies, please refer to the "Web Client Guide.pdf" document.

The demo includes the following client-side functionalities:

Simple Grid Demo - HTML Client

Live Demo

Demo ScreenShot

View live demo

Details

This demo shows how it is possible to build a "dynamic-subscription grid" by leveraging a Lightstreamer DynaGrid.
The 30 items of the Stock-List Demo are virtually contained in the grid, but only 5 at a time are displayed. The slider to the right implements a virtual scroll bar. When the table is scrolled, the invisible items are unsubscribed from and the new visible items are subscribed to. To accomplish this, each Lightstreamer Subscription contains one item only and each row on the DynaGrid is fed by a different Lightstreamer Subscription: the granularity of subscriptions and unsubscriptions is at the row level.
This technique enables to handle visual grids containing thousands of items with a very low impact on both the client side and the server side.

The demo includes the following client-side functionalities:

  • A Subscription for each visible row, containing 1 item, subscribed to in MERGE mode. All of the Subscriptions feed the same DynaGrid.

Chart Demo - HTML Client

Live Demo

Demo ScreenShot

View live demo

Details

This demo shows the capability of Lightstreamer to plot some simple real-time streaming charts in pure HTML and JavaScript. This feature is also demonstrated in the pop-up windows of the Stock-List Demo. For more sophisticated charts, it is possible to use third-party charting libraries.
In this chart, the prices for two stocks are normalized to 100 and plotted.

The demo includes the following client-side functionalities:

Install

If you want to install a version of one of these demos pointing to your local Lightstreamer Server, follow these steps:

  • Note that, as prerequisite, the Lightstreamer - Stock- List Demo - Java Adapter has to be deployed on your local Lightstreamer Server instance. Please check out that project and follow the installation instructions provided with it.
  • Launch Lightstreamer Server.
  • Get the lightstreamer.js file from the Lightstreamer 5 Colosseo distribution and put it in the src/[demo_name]/js folder of the demo (if that is the case, please create it). Alternatively, you can build a lightstreamer.js file from the online generator. In that case, be sure to include the LightstreamerClient, Subscription, DynaGrid, StaticGrid, Chart, SimpleChartListener, ConnectionSharing, and StatusWidget modules and to use the "Use AMD" version.
  • Get the require.js file form requirejs.org and put it in the src/[demo_name]/js folder of the demo.
  • This applies only for Simple Grid Demo. Get the zip file from script.aculo.us and put the prototype.js, scriptaculous.js, and slider.js files in the src/[demo_name]/js/scriptaculous folder of the demo.

You can deploy these demos to use the Lightstreamer server as Web server or in any external Web Server you are running. If you choose the former case, please create the folders <LS_HOME>/pages/demos/[demo_name] then copy here the contents of the src/[demo_name] folder of this project.
The client demos configuration assumes that Lightstreamer Server, Lightstreamer Adapters, and this client are launched on the same machine. If you need to target a different Lightstreamer server, please search this line:

var lsClient = new LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"DEMO");

in lsClient.js or index.html, depending on the demo, and change it accordingly.

The demos are now ready to be launched.

Build

The html applications can be optionally built, to reduce the number and size of the files to be downloaded by the browser, using r.js. A ready-made configuration file for the build process of the Chart Demo is available in the build_r.js folder of this project.

The build is configured to use Google Closure compiler to minify the files. To run it as-is, you need to download rhino js.jar file, compiler.jar from the closure compiler project and r.js from RequireJS. You also need a Java Virtual Machine installed on your system.

Once ready, from the build_r.js/ChartDemo folder, run

java -cp compiler.jar;js.jar org.mozilla.javascript.tools.shell.Main r.js -o app.build.js

As an alternative, it is possible to customize the build file to use UglifyJS; in this case, it can be built using node.js instead of using the JVM.

See Also

Lightstreamer Adapters Needed by These Demo Clients

Related Projects

Lightstreamer Compatibility Notes

  • Compatible with Lightstreamer JavaScript Client library version 6.0 or newer.