A simple gaming/collaborative HTML5 application fed in real time via a Lightstreamer server
JavaScript CSS HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build_r.js
src
.gitattributes
.gitignore
LICENSE
README.md
screen_demo.png
screen_demo_large.png
screen_demo_large_2.png
screen_demo_small.png

README.md

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

screenshot

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:

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.js file from the latest Lightstreamer distribution and put it in the src/js folder of the demo. Alternatively, you can build a lightstreamer.js file from the online generator. In that case, be sure to include the LightstreamerClient, Subscription, DynaGrid, ConnectionSharing, and StatusWidget modules and to use the "Use AMD" version.
  • Get the require.js file from requirejs.org and put it in the src/js folder of the demo.
  • Get the jquery.qtip-1.0.0-rc3.min.js file from qtip download page 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

Related Projects

Lightstreamer Compatibility Notes

  • Compatible with Lightstreamer JavaScript Client library version 6.0 or newer.