/Lightstreamer-example-Portfolio-client-javascript

This project includes three different demo based on Lightstreamer Portfolio Adapter

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Lightstreamer - Portfolio Demos - HTML Clients

The Portfolio Demo simulates a portfolio management: it shows a list of stocks included in a portfolio and provides a simple order entry form. Changes to portfolio contents, as a result of new orders, are displayed on the page in real-time. In addition to that, the Full Version of the Portfolio Demo also shows, for each stock in the portfolio, the current price, updated in real-time from a market data feed.

This project includes three different web client front-end examples for the Lightstreamer - Portfolio Demo - Java Adapter:

Basic Portfolio Demo - HTML Client

Live Demo

screenshot

View live demo

Note. Real-Time simulated Portfolio data is received from the Lightstreamer Server deployed at http://push.lightstreamer.com.

Details

In the Basic Portfolio Demo, a virtual stock portfolio, shared among all the connected users, is displayed.

By using the "Submit Order" panel, you can buy or sell a stock (identified by an item number), filling in the Quantity field and pressing the proper button. Click on the column headers to sort the grid on different columns. The portfolio grid is updated in push mode, for both the columns and the rows (this is the so called "metapush" feature). This portfolio is shared among all the connected users, so you can connect to this demo from different machines (or try at least different browsers on the same machine), then submit orders from one browser and see the updates displayed on another browser. The front-end code can be considered a reference example of item subscriptions in COMMAND mode.

The demo includes the following client-side functionalities:

  • A Subscription containing 1 item, subscribed to in COMMAND mode feeding a DynaGrid. Each row of the grid is identified by a unique key. For didactic purpose, this example displays the command and key fields, which are usually hidden.
  • The order submission is done by sending a message directly to Lightstreamer Server using the LightstreamerClient.sendMessage utility.

Portfolio Demo - HTML Client

Live Demo

screenshot

View live demo

Note. Real-time simulated Portfolio data is received from the Lightstreamer Server deployed at http://push.lightstreamer.com.

Details

This demo application extends the Basic Portfolio Demo by combining live stock prices as in the Stock-List Demos with the portfolio contents. The columns show: stock name, last price, quantity (number of stocks in the portfolio), countervalue (=price*quantity), time of last price.

The portfolio content is the same as the Basic Portfolio Demo (i.e., it subscribes to the same item from the same Data Adapter) and it is shared among all the connected users. Again, you can connect to this demo from different machines and see your operations propagated everywhere. The front-end code can be considered a reference example of item subscriptions in COMMAND mode with "two-level push".

Compared to the Basic Portfolio Demo a panel has been added to display information about the submission of orders. It displays your orders only and not those submitted by other connected users. The columns show: progressive number of order, stock name, type of order (buy or sell), quantity, and status of order (initially SUBMITTING, then determined by the outcome of the sendMessage request: SUBMITTED, ABORT, DENY, DISCARDED, ERROR).

The demo includes the following client-side functionalities:

  • A Subscription containing 1 item, subscribed to in COMMAND mode feeding a DynaGrid. Each added row automatically provokes an underlying subscription to a sub-item in MERGE mode, to get the real-time price for that specific stock from another feed (the same as the Stock-List Demos). When a row is deleted, the underlying sub-item is automatically unsubscribed from.
  • The order submission is done by sending a message directly to Lightstreamer Server using the LightstreamerClient.sendMessage utility. A confirmation response is received from the Metadata Adapter (either an error or the "SUBMITTED" message).
  • A DynaGrid is fed dynamically with one row for each sendMessage invocation and updated via an appropriate ClientMessageListener.

JSON Patch Portfolio Demo - HTML Client

Live Demo

screenshot

View live demo

Note. Real-Time simulated Portfolio data is received from the Lightstreamer Server deployed at http://push.lightstreamer.com.

Details

This demo application is similar to the Basic Portfolio Demo, but the portfolio contents are received in JSON format and displayed as a tree. Note that the use of JSON is not the recommended way to supply tabular data like this, but it may be needed to handle more complex structures.

The portfolio content is the same as the Basic Portfolio Demo (i.e., it subscribes to the same item name through a different Data Adapter, which however shares the same feed simulator) and it is shared among all the connected users. Again, you can connect to this demo from different machines and see your operations propagated everywhere.

Again, the portfolio is updated in push mode, but, whenever possible, the updates are sent by the Server as a JSON Patch, so that only the changes are sent. In this case, the latest JSON Patch received is also displayed as a tree.

The demo includes the following client-side functionalities:

Dynamic Drop-Down Demo - HTML Client

Live Demo

screenshot

View live demo

Note. Real-time simulated Portfolio data is received from the Lightstreamer Server deployed at http://push.lightstreamer.com.

Details

This demo application shows a changeable list of items within a normal HTML drop-down menu. The contents of the list change in real-time, based on the commands pushed by the Server.
The feed that controls the list contents is the same as in the Portfolio Demos (i.e., it subscribes to the same item from the same Data Adapter) and it is shared among all the connected users. So, you can see the drop-down menu kept in sync across all the browsers connected to this page.

The front-end code can be considered a reference example of visualization of data, coming from an item subscription that does not leverage the Lightstreamer widgets, but uses custom HTML code or third-party widgets.

The demo includes the following client-side functionalities:

  • A Subscription containing 1 item, subscribed to in COMMAND mode. Each time the Server sends an "add" or "delete" command, the JavaScript code manipulates the drop-down menu to update its contents.

Install

Install the Basic Portfolio Demo

If you want to install the Basic Portfolio Demo, pointing to your local Lightstreamer Server, follow the steps below.

  • As prerequisite, the basic version of the Lightstreamer - Portfolio Demo - Java Adapter has to be deployed on your local Lightstreamer Server instance. Please follow the instructions in Install the Basic Portfolio Demo to install it.
  • Download this project.
  • Get the lightstreamer.min.js file from npm or unpkg and put it in the src/PortfolioDemo_Basic/js folder of the project.
  • Get the require.js file form requirejs.org and put it in the src/PortfolioDemo_Basic/js folder of the project.
  • Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. Please follow these steps:
    • create the folder <LS_HOME>/pages/PortfolioDemo_Basic, and copy here the contents of the src/PortfolioDemo_Basic folder;
    • The client demo 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 edit the src/PortfolioDemo_Basic/js/lsClient.js file and change accordingly the following line:
      var lsClient = new LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"PORTFOLIODEMO");
  • Open your browser and point it to: http://localhost:8080/PortfolioDemo_Basic/](http://localhost:8080/PortfolioDemo_Basic/).

Install the Portfolio Demo

If you want to install the full version of the Portfolio Demo, pointing to your local Lightstreamer Server, follow the steps below.

  • The full version of the Portfolio Demo, needs both the PORTFOLIO_ADAPTER, from the Portfolio Demo, and the QUOTE_ADAPTER, from the Stock-List Demo (see Lightstreamer - Stock-List Demo - Java Adapter). As a prerequisite, the full version of the Lightstreamer - Portfolio Demo - Java Adapter has to be deployed on your local Lightstreamer Server instance. Please follow the instructions in Install the Portfolio Demo to install it.
  • Download this project.
  • Get the lightstreamer.min.js file from npm or unpkg and put it in the src/PortfolioDemo/js folder of the project.
  • Get the require.js file form requirejs.org and put it in the src/PortfolioDemo/js folder of the project.
  • Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. Please follow these steps:
    • create the folder <LS_HOME>/pages/PortfolioDemo, and copy here the contents of the src/PortfolioDemo folder.
    • The client demo configuration assumes that Lightstreamer Server, Lightstreamer Adapters, and these clients are launched on the same machine. If you need to target a different Lightstreamer server, please edit the src/PortfolioDemo/js/lsClient.js file and change accordingly the following line:
      var lsClient = new LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"FULLPORTFOLIODEMO");
  • Open your browser and point it to: http://localhost:8080/PortfolioDemo/.

Install the JSON Patch Portfolio Demo

If you want to install the JSON Patch Portfolio Demo, pointing to your local Lightstreamer Server, follow the steps below.

  • As prerequisite, the JSON version of the Lightstreamer - Portfolio Demo - Java Adapter has to be deployed on your local Lightstreamer Server instance. Please follow the instructions in Install the JSON Patch Portfolio Demo to install it.
  • Download this project.
  • Get the lightstreamer.min.js file of the web client SDK from npm or unpkg and put it in the src/PortfolioDemo_JSONPatch/js folder of the project.
  • Get the require.js file form requirejs.org and put it in the src/PortfolioDemo_JSONPatch/js folder of the project.
  • Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. Please follow these steps:
    • create the folder <LS_HOME>/pages/PortfolioDemo_JSONPatch, and copy here the contents of the src/PortfolioDemo_JSONPatch folder;
    • The client demo 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 edit the src/PortfolioDemo_JSONPatch/js/lsClient.js file and change accordingly the following line:
      var lsClient = new LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"JSONPORTFOLIODEMO");
  • Open your browser and point it to: http://localhost:8080/PortfolioDemo_JSONPatch/](http://localhost:8080/PortfolioDemo_JSONPatch/).

Install the Dynamic Drop-Down Demo

If you want to install the Dynamic Drop-Down Demo, pointing to your local Lightstreamer Server, follow the steps below.

  • As prerequisite, the basic version of the Lightstreamer - Portfolio Demo - Java Adapter has to be deployed on your local Lightstreamer Server instance. Please follow the instructions in Install the Basic Portfolio Demo to install it.
  • Download this project.
  • Get the lightstreamer.min.js file from npm or unpkg and put it in the src/DropDownDemo/js folder of the project.
  • Get the require.js file form requirejs.org and put it in the src/DropDownDemo/js folder of the project.
  • Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. Please follow these steps:
    • create the folder <LS_HOME>/pages/DropDownDemo, and copy here the contents of the src/DropDownDemo folder.
    • The client demo configuration assumes that Lightstreamer Server, Lightstreamer Adapters, and these clients are launched on the same machine. If you need to target a different Lightstreamer server, please edit the src/DropDownDemo/js/lsClient.js file and change accordingly the following line:
      var lsClient = new LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"PORTFOLIODEMO");
  • Open your browser and point it to: http://localhost:8080/DropDownDemo/.

See Also

Lightstreamer Adapters Needed by These Clients

Related Projects

Lightstreamer Compatibility Notes

  • Compatible with Lightstreamer SDK for Web Clients version 9.0.0 or newer.
  • For a version of this example compatible with Lightstreamer SDK for Web Clients version 6.0 to 8.0, please refer to this tag.