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!

Howdy!

Posted in amqp, fun, javascript, jms, kaazing, stomp, websocket
One comment on “Bringing Stomp/JMS to the browser – via WebSocket
  1. […] to bring event- or data-driven applications to the browser. A valid example would a Web UI for a JMS or AMQP application. With help of the Kaazing Gateway this is possible! As said before, you are […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: