websocket ActiveMQ

Time needed to complete  ~40 minutes

1.Introduction

This post will demonstrate how to use websockets with activeMQ. The client will receive 
data from message broker using stomp protocol via websockets.  

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.8

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring 3.1.1.
6- jQuery and plugins
7- Stomp protocol (stomp.js)
8-ActiveMQ 5.10.0 - Link to home Page
9- Web browser supporting websockets

3.Project Structure

Picture 3.1: Project structure

4. Controller

- HomeController Listing 4.1, is for displaying web page.   

Listing 4.1: PageController

   
  package org.phoenix.Controller;  
   
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
   
   
 @Controller  
 public class HomeController {  
        
        
      @RequestMapping(value = "/", method = RequestMethod.GET)  
      public String home(Model model) {  
                       
           return "stock";  
      }  
        
 }  
   

-   LiveRandomData class, listing 4.2, will connect and send messages to message broker, new message will be generated every 150 ms, it will send messages to defined destination simData , each message is a list of company objects that contains five companies with the stock price and change, the prices and change data is generated in method generateRandomdata(). 

note: don't forget to change phoenix-PC in MESSAGE_BROKER_URL to ip address or computer name where ActiveMQ is running.

Listing 4.2: LiveRandomData controller

 
   
public class LiveRandomData{  
        
      private static final Random GENERATOR = new Random();  
      private static final DecimalFormat DF = new DecimalFormat("#.##");  
             
      // Change phoenix-PC to IP or pc name where activeMQ is running  
      private static final String MESSAGE_BROKER_URL = "tcp://phoenix-PC:61616";    
        private static final String DESTINATION = "simData";  
      private static final Gson GSON = new Gson();  
   
   
      private static Map<String, Double> DATA_MAP = new HashMap<String, Double>();  
      static {       
           DATA_MAP.put("TOMATO", new Double(200.0));  
           DATA_MAP.put("CBM", new Double(120.0));  
           DATA_MAP.put("LINK", new Double(124.0));  
           DATA_MAP.put("MOON", new Double(156.0));  
           DATA_MAP.put("HIC", new Double(60.0));  
      }  
             
                      
      public static void main(String args[]) throws Exception {  
             
           //Connect to message broker  
           ConnectionFactory connectionFactory = new ActiveMQConnectionFactory(MESSAGE_BROKER_URL);  
           Connection connection = connectionFactory.createConnection();  
           connection.start();  
   
           // create session and topic  
           Session session = connection.createSession(false,Session.AUTO_ACKNOWLEDGE);  
           Destination destination = session.createTopic(DESTINATION);  
             
           MessageProducer producer = session.createProducer(destination);  
           TextMessage message = session.createTextMessage();  
             
           LiveRandomData liveRandomData = new LiveRandomData();  
   
           // 500 messages will be sent to message broker, a message every 150 ms.   
           for (int i = 0; i < 500; i++) {  
                List<Company> list = liveRandomData.generateRandomdata();  
                message.setText(GSON.toJson(list));  
                producer.send(message);  
   
                TimeUnit.MILLISECONDS.sleep(150);  
           }  
             
           connection.close();  
      }  
   
        
      private List<Company> generateRandomdata() {  
        
           List<Company> result = new ArrayList<Company>();            
           String changeDirection;            
          
           for(String companyName : DATA_MAP.keySet()){                 
                  
                double r = GENERATOR.nextGaussian()/10;                
                changeDirection = (r > 0) ? "up":"down";  
                double newPrice = DATA_MAP.get(companyName).doubleValue() + (r * DATA_MAP.get(companyName).doubleValue() );  
                  
                Company company = new Company(companyName,DF.format(newPrice),changeDirection);  
                                 
                result.add(company);                                
           }  
             
           return result;  
      }  
   
 } 

5. View

-  Page stock.jsp contains a table Listing 5.1 where the data will be displayed.

Listing 5.1: stock.jsp table

 <div>  
     <button id="connect" onclick="connect();">Connect</button>  
     <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>  
   </div>  
   
           <table>  
                <tr >  
                     <th>Company</th>  
                     <th>Price</th>  
                     <th>Change</th>       
                     <th>Plot</th>                      
                </tr>  
                  
                <tbody>  
                <tr id="TOMATO">  
                     <td id="company">TOMATO</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotTOMATO"></td>                      
                </tr>                 
                <tr id="CBM">  
                     <td id="">CBM</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotCBM"></td>                      
                </tr>                 
                <tr id="LINK">  
                     <td id="company">LINK</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotLINK"></td>                           
                </tr>                 
                <tr id="MOON">  
                     <td id="">MOON</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotMOON"></td>                      
                </tr>  
           <tr id="HIC">  
                     <td id="">HIC</td>  
                     <td id=""></td>  
                     <td id=""><img src="" alt="" width="" height="" /></td>  
                     <td id="PlotHIC"></td>                      
                </tr>       
       </tbody>                  
           </table> 

6. Configuration

-In  /webapp/WEB-INF/spring/appServlet/servlet-context.xml Listing 6.1.

Listing 6.1: servlet-context.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans:beans xmlns="http://www.springframework.org/schema/mvc"  
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
      xmlns:beans="http://www.springframework.org/schema/beans"  
      xmlns:context="http://www.springframework.org/schema/context"  
      xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd  
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd  
           http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">  
   
      <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->  
        
      <!-- Enables the Spring MVC @Controller programming model -->  
      <annotation-driven />  
   
      <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->  
      <resources mapping="/resources/**" location="/resources/" />  
   
      <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->  
      <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
           <beans:property name="prefix" value="/WEB-INF/views/" />  
           <beans:property name="suffix" value=".jsp" />  
      </beans:bean>  
        
      <context:component-scan base-package="org.phoenix" />  
             
 </beans:beans>  
   

7. Connection & data display

- Javascript is used to connect to server and get the data Listing 7.1, it is assumed that ActiveMQ is running on the local machine if not change localhost to ip address where ActiveMQ is running, the default port for websocket in ActiveMQ is 61614 this value is defined in apache-activemq-5.10.0/conf/activemq.xml file, the connect() function will initialize stompClient, disable heartbeats(see note), connect to message broker, connect_callback will subscribe to simData topic and error_callback will handle error messages. When message is received callback will handle it. 

Note: As to the date of writing this post in ActiveMQ 5.10.0 there is a bug that disconnets the client with message: "Whoops! lost conection to ws://localhost:61614" for this reason heart beats are disabled and in  error_callback when connection is lost it will be automatically established again.

Listing 7.1: function to connect, disconnect and handling messages

 var url = "ws://localhost:61614/stomp";  
 var stompClient = null;  
   
 function setConnected(connected) {  
      document.getElementById('connect').disabled = connected;  
      document.getElementById('disconnect').disabled = !connected;            
 }  
   
   
      var connect_callback = function() {  
           stompClient.subscribe("/topic/simData", callback);  
      }  
   
      var error_callback = function(error) {  
           console.log(error);  
           connect(); // This to prevent Whoops! lost connection to ws://localhost:61614/Stomp bug in activeMQ  
      };  
   
      function connect() {  
   
           for (var i = 0; i < 5; i++) {  
                plot[companies[i]] = $.plot($("#Plot" + companies[i]),  
                          [ initData(i) ], options);  
           }  
   
           stompClient = Stomp.client(url,"v11.stomp");  
           stompClient.heartbeat.outgoing = 0;  
           stompClient.heartbeat.incoming = 0;  
           stompClient.connect("", "", connect_callback, error_callback);  
           setConnected(true);  
      }  
   
      function disconnect() {  
           stompClient.disconnect(function() {});  
           setConnected(false);  
      }  
   
      var callback = function(message) {  
   
           if (message) {  
   
                var companylist = JSON.parse(message.body);  
   
                for (var i = 0; i < companylist.length; i++) {  
                     $("#" + companylist[i].name + " td:eq(1)").text(  
                               companylist[i].price);  
   
                     if (companylist[i].change == "up") {  
                          $("#" + companylist[i].name + " td:eq(2)").children('img')  
                                    .attr("src", "/mb/style/up.png");  
                          $("#" + companylist[i].name + " td:eq(2)").css(  
                                    "background-color", "#C3FDB8");  
                     } else {  
                          $("#" + companylist[i].name + " td:eq(2)").children('img')  
                                    .attr("src", "/mb/style/down.png");  
                          $("#" + companylist[i].name + " td:eq(2)").css(  
                                    "background-color", "#ffa796");  
                     }  
   
                     plot[companylist[i].name].setData([ getData(  
                               companylist[i].price, i) ]);  
                     plot[companylist[i].name].draw();  
                }  
   
           } else {  
                alert("Empty message");  
           }  
      }  

8. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.
-Start ActiveMQ (E:/Downloads/apache-activemq-5.10.0/bin/win64/activemq.bat for 64bit windows   OS)

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
   click Apply and Run buttons.
- In browser type http://localhost:8080/mb/ to see the form picture 7.1. Clicking Connect button, in   eclipse run main method in LiveRandomData.

Picture 8.1: Demonstration page

- Video 8.1, shows the display of data.

video 8.1: Data received from server via websocket

9. Eclipse Project

 Download project source code