Bringing Stomp/JMS to the browser – via WebSocket

Last week I attended the Con-Fess conference in Vienna to speak about WebSocket (and its JSF integration). The first demo described how to bring UDP-based network traffic to the browser. Another demo from my presentation showed how to bring JMS to the browser, by using WebSocket.

You can try this out as well – The steps are quite simple:

• Download the JMS Edition of the Kaazing gateway and extract it
• Start the included Apache ActiveMQ server
• Start the gateway itself
• Start the demo stock ticker feed

The Java program behind the “stock.start” script is a simple class, which uses the standard JMS API to send messages (stock prices) to the running Apache ActiveMQ. We now need a browser-based JavaScript client, which talks to the Apache ActiveMQ over WebSocket.

The Kaazing Gateway (JMS edition) comes with a JMS API for various platforms, like JavaScript or Flash/ActionScript. If you have ever programmed something that used JMS, you are able to use it!

Let’s have a look how to setup a connection to the JMS server:

...
var stompConnectionFactory =
        new StompConnectionFactory( "ws://localhost:8000/jms");

// create a connection, by using a JS callback
var connectionFuture =
   stompConnectionFactory.createConnection(user, passwd, function () {

    if (!connectionFuture.exception) {
        connection = connectionFuture.getValue();
        // register a JMS exception handler
        connection.setExceptionListener(handleException);

        // create session
        session = connection.createSession(false, Session.AUTO_ACKNOWLEDGE);
        // create a topic
        topic = session.createTopic("/topic/destination");

        // creating some consumers!
        var consumer1 = session.createConsumer(topic);

        // attach the callback that receives the stock prices:
        consumer1.setMessageListener(handleMessageCallback);

        // start!
        connection.start(someCallback);
    }
....
});

The code is straightforward: A (Stomp)ConnectionFactory is created and we use that factory object to create the actual connection. The createConnection() function takes three arguments: user, password and a callback, which is invoked once the connection has been established (or an exception is thrown). If no exception occurred, the code executes a few steps:

• we receive the actual connection
• we setup a JMS exception handler
• we create a session, a JMS topic and a consumer
• we register a handler for the incoming JMS messages (handleMessageCallback)
• we finally start the connection’s delivery of incoming messages

The handleMessageCallback() is used to receive the stock prices and to “draw” the DTHML, so that the stock changes are nice to watch in a vanilla HTML table, like below:

The code for the message listener is also using our JavaScript JMS API, to receive JMS (Text)messages:

function handleMessageCallack(message) {

  // did Apache ActiveMQ send us a JMS TextMessage?

  if (message instanceof TextMessage) {
     var body = message.getText();

     // DHTML code to show stock values...

  }
}

The above JavaScript code is pretty much readable for every JMS coder. The big news is that the JMS communication from the ActiveMQ to the browser (and vice versa) happens over WebSocket. This dramatically reduces overhead and latency for your web application!

The WebSocket gateway is not limited to Stomp/JMS, it has support for other protocols like AMQP, or even XMPP as well!

If you want to try (or see) this stock ticker, you can! It is part of the Kaazing JMS demo bundle. Once you installed the gateway, you can see the stockticker on your machine…

Have fun!