Tag Archives: JavaScript

WebSockets in Java

At the second JavaDay in Skopje in 2013, I talked about WebSockets and how to do them in Java. As a base for explaining, I’ve created a simple chat room application along with three different WebSocket implementations: JavaWebSocket, JavaEE7 and Spring4.


The application prompts for a username on start, shows all the present users in the room, provides basic chat functionality and does automatic log out when the browser tab/window is closed.

The slides of the presentation are available at SlideShare.
The talk is available (in Macedonian only) at Parleys.
The whole source code (explained in short below) is avalable at Github.


Client application

The client application is built with jQuery 1.10.2 and Bootstrap 3.0.3. For the first two examples, native WebSocket API is used for the communication.

At the start, a bootstrap modal dialog is shown for entering the desired nickname. When it’s confirmed, the whole application is being initialized, the communication procedure is started up, the events are bound and the jQuery assisted DOM manipulation is defined.

The JavaScript WebSocket API is quite simple and it involves just creating a web socket connection and binding the four communication events:

  • onOpen – when the connection has been successfully opened
  • onMessage – when a server sent message has been received
  • onClose – when the connection has been properly closed
  • onError – when a communication error has occured and the connection has been severed

The basic shape of a javascript WebSocket handler is:

In the implementation, the messages that the client sends to the server are pure text. By convention, the first message sent is the username, while every next one is a message that the user is sending to everyone else.

For better manipulation, the messages that are being received from the server are placed in JSON objects. There are three types of messages that the server can send:

  • addUser message – a message that has only one field ‘addUser’ containing the username to be added to the list, i.e. a new user joins the chat
  • removeUser message – a message that has only one field ‘removeUser’ containing the username to be removed from the user list, i.e. a user closed the chat
  • message message – a message that has two fields: nickname and message, describing a sent chat message from the user ‘nickname’ and contents ‘message’

There is no logout option, since the tab/window closing automatically closes the WebSocket and the server gets this event.


JavaWebSocket implementation

One of the simplest ways to start-up a WebSocket server is by using a standalone implementation like the Java WebSocket (github link).

In order to use it, you need to create a standard Java7 application, which defines an extension of the WebSocketServer class, instantiates it and starts in the main routine (or anywhere applicable). The WebSocket server will run as a background thread as long as it is not explicitly stopped or the application is terminated.

The class that resembles the WebSocket server should pass a proper base constructor for the target IP and port, and override the four methods that are basically the event handlers in the WebSocket communication life cycle:

Several notes here:

  • There is just one instance of the WebSocket server. It handles all the connections and the communication.
  • The WebSocket server implements the very same methods / event handlers as present in the client side: onOpen, onClose, onMessage and onError, having now, the onMessage is triggered when a message is received from some client.
  • For every opened websocket connection, there is a single WebSocket object instantiated. That object will remain the same and present until the connection is closed somehow. It can be referenced anywhere from the code and used as the WebSocket handler for that specific connection.

In my example, I store every WebSocket object in a set, and map them in a Map to their nickNames for future usage. When a connection is opened, the WebSocket instance is stored in the set, and when the nickname is passed, in the Map as well. When a message is received, the set is being iterated and the messages is sent to all active clients. In case if a connection closes or it’s being terminated by an error, the WebSocket instance is removed from the map and the set, and the ‘removeUser’ message is sent to all other clients.

For more details, see the JavaWebSocket sample in the source code. In order to run this sample, you need just a Java7 runtime. Start the server as a Java application and then open the chat.html file with your browser. (note: this is an Eclipse project)


JavaEE implementation

JSR 356 defines how the Java API should look like in the enterprise application servers in order to provide server side and Java client side WebSocket functionality. It is already implemented in the most popular application servers.

Apache Tomcat originally implemented JSR 356 and dropped its own WebSocket implementation in Tomcat 8. After a while though, the same functionality was back-ported to Tomcat 7.0.43. It’s usage again is bound by using Java 7.

There are two ways of how a WebSocket server can be defined in JavaEE7. As in many of the other Java APIs, there’s the annotation driven approach, which provides very simple means for creating basic server side constructions. There’s also the extension (interface based) approach by extending the base WebSocket classes and overriding the methods implementations.

A very basic annotation driven WebSocket implementation in Tomcat is comprised by using the following annotations:
– @ServerEndpoint(path) – for defining a class as a WebSocket endpoint at the specified relative path
– @OnOpen(Session), @OnClose(Session, CloseReason), @OnMessage(String), @OnError(Session, Throwable) – for defining the methods handlers for the four events in the WebSocket communication lifecycle.

Sending message back to the client is performed by getting a remote object from the session, and sending data through it. E.g.: session.getBasicRemote().sendText(text);

The session object is unique and persistent for one client throughout it’s communication life-cycle. It can be stored and used in any other place your application.

On client side, everything is the same, except that now the port is 8080 (the same port at which Tomcat is configured to listen).

For more details, see the EESockets sample in the source code. In order to run the sample, you’ll need a Java7 Runtime along with a newer version of Tomcat 7 (> 7.0.43). It is again an eclipse project, so you may need to fine-tune the settings.


Spring 4 implementation

The freshly out Spring4 framework comes with it’s own and improved out of the box WebSockets implementation. It comprises of both well connected server and client side modules which provide native WebSocket communication and give a seamless fallback if no such option is possible.

In order to use the WebSockets implementation in spring,  the context configuration needs to enable both SpringWebMVC and WebSocket, afterwards to define the beans for the WebSocketHandlers and register them. If the spring configuration is done by Java code, it should look something like this:

Several things are important here:
– A web socket server endpoint in Spring is a implementation of a kind from WebSocketHandler
– PerConnectionWebSocketHandler is an extensions which basically says that a new instance from the WebSocketHandler class will be created for each WebSocket client.
– .withSockJS() says that this endpoint should be enabled for, and expect calls from the SockJS client library.

The WebSocket server implementation is done by extending and overriding the WebSocketHandler class. There is a small hierarchy already present in Spring, so e.g.: if only textual data needs to be interchanged, then the implementation class should extend TextWebSocketHandler, since there the encoding/decoding stuff is already handled:

Again here, the same four methods are being overridden, and similar pattern is used for sending data back to the client. The WebSocketSession object is again unique and persistent, and can be saved and used throughout the application.

One crucial difference now is the JavaScript client side implementation. Since the WebSocketHandler is sockJS enabled, the same library can be used for interfacing with it. The difference is minimal: instead of instantiating a WebSocket, include the Sock.JS JavaScript client library, make a SockJS object and bind the same functions to it:

What happens now is, that SockJS will first check if a WebSocket communication can be established (by polling a info sub-path first). If successful, then it is resumed as such. If not, then a fallback option is applied (e.g.: http long polling) and the communication is abstracted on top of it. At the end, only one WebSocket like handler is needed for defining the whole communication. Like this, regardless of the client browser, only one code base is needed to handle all types of communication protocols.

Please note that now when passing the address, “http” and not “ws” is used. This is not an error, since SockJS will try to upgrade the connection afterwards.

For more details, see the springsockets sample in the source code. In order to run the sample, you’ll need a Java7 Runtime along with a newer version of Tomcat 7 (> 7.0.43). It is again an eclipse project, so you may need to fine-tune the settings. In the maven settings, the proper repositories are also added, so if you’re behind a local nexus mirror, please make sure that they will be accessible. Also, I’m using Spring 4.0.0.RC2 here. You can change it to the most recent Spring version.

pi4jmultimeter: Raspberry Pi + Arduino + d3js electrical multimeter

As a fun project and as an example for my recent talk at the Jazoon conference, I’ve made this device. I call it my pi4jmultimeter.

 What it does its some basic electrical multimeter features:

  • DC voltage measurement
  • AC waveline preview
  • AC spectrum analysis
  • Electrical resistance measurement

The device is a combination of a Raspberry Pi and an Arduino. The Arduino does the analog readings and uses Fast Fourier Transformation for producing the spectrum graph data. The Raspberry Pi hosts the main process and runs a lighttd web server. Both devices are connected with their extension headers (Raspberry Pi’s GPIO and Arduino’s Vin, GND and serial port pins) and have a paired serial port interface. The end result is visualized in a JavaScript web application which renders optimized d3js animated SVG graphs.

The Arduino loops a program which does simple analog reads on three inputs, periodical FFT and sends all this data to the Raspberry Pi via the serial interface. The Raspberry Pi, has a running Java8 SE Embedded process based on the pi4j and Java WebSocket libraries. It reads everything from the serial port with the help of the pi4j library, packs everything in a nice JSON format and broadcasts the data to every opened WebSocket connection by the use of the Java WebSocket library.

The whole source code with the build instructions can be found on GitHub: https://github.com/hsilomedus/pi4jmultimeter
The slides of my presentation are available at the jazoon guide webpage:  (or directly at slideshare)

The d3js graphs can be observed and used individually. All the graphs populated with some random data can be found here:


Electrical field lines and Equipotential surfaces simulation (with d3.js)

The JavaScript simulation here. Definition of an electric field and the corresponding equations here.


Each point of an electric field created by multiple dot or sphere charges can be computed as a superposition of the individual electrical force vectors. The individual forces are proportional to the charge value, and inversely proportional to the distance of the charge and the point, squared. Depending on the polatiry, the vector is moving away (positive) or back (negative).

The electrical potential again can be calculated with superposition, except that it’s a scalar value, not a vector one. The set of points which have the same potential, create a equipotential surface. Each force vector is normal to the equipotential surface at the same point.

d3.js offers functionalities for rendering svg lines and circles, and also dynamically add and control DOM elements. Combined, the simulation. For source code, right click – > view source.

Note: used d3.js example for hints.

Visualize with d3.js

For this year’s JavaDay event in Skopje, I made an interesting JavaScript presentation about the d3.js library.

I’ve tried to cover some of of the basics (manipulation, DOM editing), d3 specific patterns (data enter / update / exit), custom drawing and also explained some of the examples present in the gallery (bar graph, force graph, tree, voronoi).

The presentation itself is made in JavaScript and uses d3, bootstrap and jQuery as a dependency for bootstrap.

The presentation can be seen here, while the whole code can be downloaded at GitHub.