Skip to content

Lightstreamer/Lightstreamer-example-RoomBall-client-javascript

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

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.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

Related Projects

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.

About

A simple gaming/collaborative HTML5 application fed in real time via a Lightstreamer server

Resources

License

Stars

Watchers

Forks

Packages

No packages published