Online slate board using HTML5 websocket and glassfish

My last post was about #AdoptAJSR initiative in which JUG Hyderabad is actively involved. Meanwhile I was trying to explore the Websocket API for Java (JSR 356) using glassfish 4 's latest build as reference implementation.

The idea was to use HTML5 websocket API in the front end to communicate with websocket endpoint created in the glassfish server.  To get started with I referred a  similar sample application blogged by Arun Gupta.

In this process I managed to log following bugs against the reference implementation

  1. Session object coming as the parameter in @WebSocketClose annotated method is null

  2. Session#isOpen method returns NoSuchMethodException

    To avoid this situation I have put the code "peer.getRemote().sendString("Ping");" in try block so that if it fails , it can gracefully remove that peer instead of ending up in exception.


My app lets you draw freehand lines in the browser and the same gets drawn in real time at every other user's browser who is accessing this app. If you refresh the page or a new user joins in then the existing state of the drawing is shown the browser.

To create such project one has to go maven way as of now. Following are the major steps you need to care about while creating this project

  1. Choose a Maven project in Netbeans


Maven1

Maven2

Maven3

2. The Websocket Java APIs could not be imported in the Java class unless the websocket library is searched in the repository and added to the project

maven4

maven5

The source code that I created can be accessed from Github. Feel free to download and give feedback or try to create your own version.

You can download the slate demo video and play in any flash enabled browser.

Play this in full screen to see the code.
Unable to display content. Adobe Flash is required.

Further features and future challenges

  1. Draw the existing lines slowly (Playback) when a new user joins in so that he gets the context. For this, one needs to block other users ( javaScript thread ) from drawing till the playback is over. or some way to buffer the new drawings till the JavaScript thread is free from playback.

  2. Different color and strokes

  3. Simultaneous drawing using webworkers.