Lightstreamer - Basic Stock-List Demo - Vue.js Client
This project contains a demo application showing the integration between the Lightstreamer Web Client library and Vue.js.
This demo displays real-time market data for ten stocks generated by a feed simulator and is based on Basic Stock-List Demo.
This project uses the Web Client SDK API for Lightstreamer to handle the communications with Lightstreamer Server and uses Vue.js library to display the real-time data pushed by Lightstreamer Server.
The onItemUpdate callback, of a Lightstreamer Subscription, updates an object binded to a Vue.js component, which keeps in sync the real-time data with the DOM.
If you want to go deeper into Vue, check out the Vue.js site.
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 the
src/jsfolder of the demo (if that is the case, please create it). Alternatively, you can generate a customized lightstreamer.min.js library containing only the classes you actually use; see the build instructions on the GitHub page. In that case, be sure to include the LightstreamerClient, Subscription, ConnectionSharing, and StatusWidget modules.
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:
lsClient = new Lightstreamer.LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"DEMO");
js/index.js, and change it accordingly.
The demo is now ready to be launched.
Lightstreamer Adapters Needed by These Demo Clients
- Lightstreamer - Stock-List Demo - Java Adapter
- Lightstreamer - Reusable Metadata Adapters - Java Adapter
Lightstreamer Compatibility Notes
Compatible with Lightstreamer Web Client library version 8.0 or newer.
For a version of this example compatible with Lightstreamer SDK for Web Clients version 7.x or earlier, please refer to this tag.