# Lightstreamer Client Web SDK # The Lightstreamer Client Web SDK enables any JavaScript application running in a web browser to communicate bidirectionally with a Lightstreamer server. The API allows to subscribe to real-time data pushed by a server, to display such data, and to send any message to the server. ## Use ## Install the package using npm ``` npm install lightstreamer-client-web ``` ### Available builds ### The package contains a variety of library formats to suit the needs of the major development flavors. For [TypeScript](https://www.typescriptlang.org) users, the file `types.d.ts` declares the API types exported by the library. | | **UMD** | **CommonJS** | **ES Module** | |-----------|-------------------------------------------------------|-------------------------------|----------------------------| | **Full** | lightstreamer.js
lightstreamer.min.js | lightstreamer.common.js | lightstreamer.esm.js | | **Core** | lightstreamer-core.js
lightstreamer-core.min.js | lightstreamer-core.common.js | lightstreamer-core.esm.js | | **MPN** | lightstreamer-mpn.js
lightstreamer-mpn.min.js | lightstreamer-mpn.common.js | lightstreamer-mpn.esm.js | - **Full**: builds with all the modules in the SDK - **Core**: builds with only the core modules (Widgets and Mobile Push Notifications are excluded) - **MPN**: builds with the core modules and Mobile Push Notifications (Widgets are excluded) - **UMD**: UMD builds can be used directly in the browser via a ` ``` ### Require.js ### To use the API objects as AMD-compliant modules, import [Require.js](http://requirejs.org) loader before importing the client library (you can also use the plain version *lightstreamer.js*). ``` ---------- index.html ---------- ``` To set a namespace prefix for the module names, configure the property `ns` of the special module `lightstreamer`. ``` ---------- index.html ---------- ``` ### ES6 module ### In modern browsers, you can import the library as an ES6 module. ``` ``` ### Webpack ### A basic usage of [Webpack](https://webpack.js.org) bundler requires the installation of `webpack` and `webpack-cli` packages. To create the application bundle imported by `index.html`, run the command `webpack` in the directory where `webpack.config.js` resides. ``` ---------- webpack.config.js ---------- const path = require('path'); module.exports = { mode: 'production', entry: './main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ---------- main.js ---------- import {Subscription, LightstreamerClient} from 'lightstreamer-client-web'; var sub = new Subscription("MERGE",["item1","item2","item3"],["stock_name","last_price"]); sub.setDataAdapter("QUOTE_ADAPTER"); sub.setRequestedSnapshot("yes"); sub.addListener({ onItemUpdate: function(obj) { console.log(obj.getValue("stock_name") + ": " + obj.getValue("last_price")); } }); var client = new LightstreamerClient("http://push.lightstreamer.com","DEMO"); client.connect(); client.subscribe(sub); ---------- index.html ---------- ``` ### Rollup.js ### A basic usage of [Rollup.js](https://rollupjs.org) bundler requires the installation of `rollup` and `rollup-plugin-node-resolve` packages. To create the application bundle imported by `index.html`, run the command `rollup -c` in the directory where `rollup.config.js` resides. ``` ---------- rollup.config.js ---------- import resolve from 'rollup-plugin-node-resolve'; export default { input: './main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ resolve() ] }; ---------- main.js ---------- import {Subscription, LightstreamerClient} from 'lightstreamer-client-web'; var sub = new Subscription("MERGE",["item1","item2","item3"],["stock_name","last_price"]); sub.setDataAdapter("QUOTE_ADAPTER"); sub.setRequestedSnapshot("yes"); sub.addListener({ onItemUpdate: function(obj) { console.log(obj.getValue("stock_name") + ": " + obj.getValue("last_price")); } }); var client = new LightstreamerClient("http://push.lightstreamer.com","DEMO"); client.connect(); client.subscribe(sub); ---------- index.html ---------- ``` ### Browserify ### A basic usage of [Browserify](http://browserify.org) bundler requires the installation of `browserify` package. To create the application bundle imported by `index.html`, run the command `browserify main.js -o dist/bundle.js`. ``` ---------- main.js ---------- var Ls = require('lightstreamer-client-web'); var sub = new Ls.Subscription("MERGE",["item1","item2","item3"],["stock_name","last_price"]); sub.setDataAdapter("QUOTE_ADAPTER"); sub.setRequestedSnapshot("yes"); sub.addListener({ onItemUpdate: function(obj) { console.log(obj.getValue("stock_name") + ": " + obj.getValue("last_price")); } }); var client = new Ls.LightstreamerClient("http://push.lightstreamer.com","DEMO"); client.connect(); client.subscribe(sub); ---------- index.html ---------- ``` ## Compatibility ## The library requires Server 7.4.0. ## Documentation ## - [Web Client Guide](https://github.com/Lightstreamer/Lightstreamer-lib-client-haxe/tree/Web-v9.2.3/docs/WebClientGuide.adoc) - [API Reference](https://lightstreamer.com/api/ls-web-client/9.2.3) - [Demos](https://demos.lightstreamer.com/?p=lightstreamer&t=client&a=javascriptclient ) - [Changelog](https://github.com/Lightstreamer/Lightstreamer-lib-client-haxe/blob/main/CHANGELOG-Web.md) ## FAQ ## **Q: The library is too big. Is there a way to make it smaller?** You can build a custom library comprising only the modules you need. Refer to the [Github project](https://github.com/Lightstreamer/Lightstreamer-lib-client-haxe) for further information.