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
View live demoThis 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:
- A Subscription containing 10 items, subscribed to in MERGE mode feeding a StaticGrid.
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:
- A Subscription containing 15 items, subscribed to in MERGE mode feeding a DynaGrid.
- For each pop-up window opened, a Subscription containing 1 item, subscribed to in MERGE mode feeding both a StaticGrid and a Chart.
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.
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:
- A Subscription containing 2 items, subscribed to in MERGE mode feeding a StaticGrid and a Chart.
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.jsfile from npm or unpkg and put it in thesrc/[demo_name]/jsfolder of the demo (if that is the case, please create it). - Get the
require.jsfile form requirejs.org and put it in thesrc/[demo_name]/jsfolder 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, andslider.jsfiles in thesrc/[demo_name]/js/scriptaculousfolder 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.
- Lightstreamer - Stock-List Demo - Java Adapter
- Lightstreamer - Reusable Metadata Adapters - Java Adapter
- Lightstreamer - Basic Stock-List Demo - jQuery (jqGrid) Client
- Lightstreamer - Stock-List Demo - Dojo Toolkit Client
- Lightstreamer - Stock-List Demos - Flex Clients
- Lightstreamer - Basic Stock-List Demo - Java SE (Swing) Client
- Lightstreamer - Basic Stock-List Demo - .NET Client
- Compatible with Lightstreamer Web Client library version 7.0 or newer (installation instructions for version 8.0 or newer).