Skip to content

Latest commit

 

History

History
126 lines (83 loc) · 9.93 KB

File metadata and controls

126 lines (83 loc) · 9.93 KB

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
  • Simple Grid Demo
  • Chart Demo

Basic Stock-List Demo - HTML Client

Live Demo

Demo ScreenShot

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

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:

Simple Grid Demo - HTML Client

Live Demo

Demo ScreenShot

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

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.min.js file from npm or unpkg and put it in the src/[demo_name]/js folder of the demo (if that is the case, please create it).
  • 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.

See Also

Lightstreamer Adapters Needed by These Demo Clients

Related Projects

Lightstreamer Compatibility Notes

  • Compatible with Lightstreamer Web Client library version 7.0 or newer (installation instructions for version 8.0 or newer).