Lightstreamer - Chat-Tile Demo - HTML (JQuery, Masonry) Client
The Chat-Tile Demo implements a simple chat/collaborative application based on Lightstreamer.
This project includes a web client front-end example for the Lightstreamer - Chat-Tile Demo - Java Adapter.
Live Demo
View live demo
Details
This Chat-Tile Demo implements a simple chat/collaborative application fed in real-time via a Lightstreamer server.
Once logged in, the user can start exchange messages with every other user present in the demo. For each user a tile of a specific background color is created, which contains the last message typed as well as the nickname chosen by the user and the user-agent information of the originating client.
User messages are broadcasted as you type, character by character, to all other users.
The demo includes the following client-side functionalities:
- A Subscription containing 1 item, subscribed to in COMMAND mode.
- The user messages are sent to the Lightstreamer Server using the LightstreamerClient.sendMessage utility.
Install
If you want to install a version of this demo pointing to your local Lightstreamer Server, follow these steps:
- As prerequisite, the Lightstreamer - Chat-Tile 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.
- Download this project.
- Get the
lightstreamer.min.js
file from npm or unpkg and put it in thesrc/js
folder of the demo. 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, DynaGrid, and StatusWidget modules. - Get the
require.js
file from requirejs.org and put it in thesrc/js
folder of the demo. - Get the
masonry.pkgd.min.js
file from Masonry - Cascading grid layout library - home page and put it in thesrc/js
folder of the demo. - Deploy this demo on the Lightstreamer Server (used as Web server) or in any external Web Server. If you choose the former, please note that in the
<LS_HOME>/pages/demos/
folder, there may be already aChatTileDemo
folder. If this is not your case, please create the folders<LS_HOME>/pages/demos/ChatTileDemo
and copy here the contents of the/src
folder of this project. 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 search injs/lsClient.js
this line:
var lsClient = new LightstreamerClient(null,"CHATTILE");
and change it accordingly (replace null with your server URI). - Open your browser and point it to: http://localhost:8080/demos/ChatTileDemo/
See Also
Lightstreamer Adapters Needed by This Client
- Lightstreamer - Chat-Tile Demo - Java Adapter
- Lightstreamer - Reusable Metadata Adapters - Java Adapter
Related Projects
- Lightstreamer - Room-Ball Demo - HTML Client
- Lightstreamer - Chat Demo - HTML Client
- Lightstreamer - Round-Trip Demo - HTML Client
- Lightstreamer - Basic Messenger Demo - HTML Client
Lightstreamer Compatibility Notes
- Compatible with Lightstreamer JavaScript Client library version 6.0 or newer (installation instructions for version 8.0 or newer).