Lightstreamer - Room-Ball Demo - HTML Client

This project includes a web client front-end example for the Lightstreamer - Room-Ball Demo - Java Adapter.

Live Demo

View live demo

Details

This Room-Ball Demo implements a simple gaming/collaborative application fed in real-time via a Lightstreamer server.
Once logged in, the user can start moving his or her avatar in the room and exchange messages with every other user present in the demo. For each user, an avatar of a specific background color is created, on top of which the nickname chosen by the user is displayed and the balloon with the last typed message appears to the right.
User messages are broadcasted as you type, character by character, to all other users.
The red ball is a passive object that you can push in different directions with your avatar.

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:

• Note that, as prerequisite, the Lightstreamer - Room-Ball 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.js file from from npm or unpkg and put it in the src/js folder of the demo.
• Get the require.js file from requirejs.org and put it in the src/js folder of the demo.
• Please note that the demo uses a jQuery customized theme, included in this project.

You can deploy this demo 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/RoomBallDemo, then 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 local machine. If you need to target a different Lightstreamer server, open js/Constants.js file and change the SERVER property accordingly.

 SERVER: protocolToUse+"//localhost:8080"

The demo is now ready to be launched.

Build

The html applications can be optionally built, to reduce the number and size of the files to be downloaded by the browser, using r.js. A ready-made configuration file for the build process of the Room-Ball Demo is available in the build_r.js folder of this project.

The build is configured to use Google Closure compiler to minify the files. To run it as is, you need to download rhino js.jar file, compiler.jar from the closure compiler project and r.js from RequireJS. You also need a Java Virtual Machine installed on your system.

Once ready, from the build_r.js folder, run

java -cp compiler.jar;js.jar org.mozilla.javascript.tools.shell.Main r.js -o app.build.js

As an alternative, it is possible to customize the build file to use UglifyJS; in this case, it can be built using node.js instead of using the JVM.

See Also

Lightstreamer Adapters Needed by This Client

• Lightstreamer - Room-Ball Demo - Java Adapter
• Lightstreamer - Reusable Metadata Adapters - Java Adapter

Related Projects

• Lightstreamer - Chat-Tile Demo - JQuery Client
• Lightstreamer - Chat Demo - HTML Client
• Lightstreamer - Round-Trip Demo - HTML Client
• Lightstreamer - Basic Messenger Demo - HTML Client
• Lightstreamer - 3D World Demo - Three.js Client

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.