spring examples: Spring websocket

Time needed to complete ~40 minutes

1.Introduction

This post will demonstrate how to use websockets with spring. The client will receive
data from server using stomp protocol via websockets.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring 4.0.6
6- jQuery and plugins
7- Stomp protocol
8- Web browser supporting websockets

3.Project Structure

Picture 3.1: Project structure

4. Controllers

- Two controllers are used, PageController Listing 4.1, is for displaying web page. LiveRandomData Listing 4.2 is for generating random prices every defined period of time.

Listing 4.1: PageController

   
  package org.phoenix.controller;  
   
 import java.util.Map;  
   
 import javax.servlet.http.HttpServletRequest;  
   
 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  
 @RequestMapping("/live")  
 public class PageController {  
        
      @RequestMapping(value = "/show", method = RequestMethod.GET)  
      public String displayForm(Map<String, Object> map,Model model, HttpServletRequest request) {  
           return "stock";  
      }  
   
 }

- Method retriveData() is anotated with @Scheduled it will run every 800 ms as it has fixeDdelay = 800 , it will send messages to defined destination /topic/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().

Listing 4.2: LiveRandomData controller

 
   
 package org.phoenix.live;  
   
 import java.text.DecimalFormat;  
 import java.util.ArrayList;  
 import java.util.HashMap;  
 import java.util.List;  
 import java.util.Map;  
 import java.util.Random;  
   
 import org.phoenix.model.Company;  
 import org.phoenix.model.RandomData;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.messaging.simp.SimpMessagingTemplate;  
 import org.springframework.scheduling.annotation.Scheduled;  
 import org.springframework.stereotype.Controller;  
   
   
 @Controller  
 public class LiveRandomData{  
        
      private static final Random GENERATOR = new Random();  
      private static final DecimalFormat DF = new DecimalFormat("#.##");  
        
      @Autowired   
      private SimpMessagingTemplate msgTempx;  
        
      private static final String DESTINATION = "/topic/simData";  
   
   
      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));  
      }  
             
      @Scheduled(fixedDelay = 800)                
      public void retriveData() throws Exception {            
           List<Company> companyList = generateRandomdata();            
           RandomData randomData = new RandomData(companyList);  
           msgTempx.convertAndSend(DESTINATION, randomData);  
      }  
   
        
      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, in the websocket:message-broker definition the application destination prefix /app is used when sending messages to the server, /stock is the endpoint and it is used by the client to connect to url path using sockjs option.

Listing 6.1: servlet-context.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans:beans xmlns:mvc="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" xmlns:p="http://www.springframework.org/schema/p"  
      xmlns:task="http://www.springframework.org/schema/task"  
      xmlns:websocket="http://www.springframework.org/schema/websocket"  
      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  
           http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-4.0.xsd  
           http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.0.xsd">  
   
      <mvc:annotation-driven />  
      <task:annotation-driven />  
      <context:component-scan base-package="org.phoenix" />  
        
      <mvc:resources mapping="/resources/**" location="/resources/" />  
   
      <beans:bean id="viewResolver"  
           class="org.springframework.web.servlet.view.InternalResourceViewResolver"  
           p:prefix="/WEB-INF/views/" p:suffix=".jsp" />  
   
      <websocket:message-broker application-destination-prefix="/app">  
           <websocket:stomp-endpoint path="/stock">  
                <websocket:sockjs />  
           </websocket:stomp-endpoint>  
           <websocket:simple-broker prefix="/topic" />  
      </websocket:message-broker>  
   
 </beans:beans>

7. Connection & data display

- Javascript is used to connect to server and get the data Listing 7.1, the connect() function will use SockJs to connect to endpoint /sws/stock where /sws is the path specified in pom.xml. after that stompClient is initialized and used to connect and subscribe to /topic/simData, when ever message is received dispay() function will handle it and display data . For using sockjs files sockjs-0.3.4.js and stomp.js are included in stock.jsp

Listing 7.1: function to connect, disconnect and handling messages

  function connect() {  
      var socket = new SockJS('/sws/stock');  
      stompClient = Stomp.over(socket);  
             
      for(var i = 0; i < 5; i++){       
            plot[companies[i]] = $.plot($("#Plot"+companies[i]), [ initData(i) ], options);  
           }  
        
      stompClient.connect({}, function(frame) {  
           setConnected(true);                 
           stompClient.subscribe('/topic/simData', function(retriveData) {                      
                display(retriveData.body);  
           });  
      });  
 }  
   
 function disconnect() {  
      stompClient.disconnect();  
      setConnected(false);  
      console.log("Disconnected");  
 }  
   
 function setConnected(connected) {  
      document.getElementById('connect').disabled = connected;  
      document.getElementById('disconnect').disabled = !connected;            
 }  
   
 function display(message) {  
        
      if (message) {  
   
           var companylist = JSON.parse(message).companyList;  
             
           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","/sws/style/up.png");  
                     $("#" + companylist[i].name + " td:eq(2)").css("background-color","#C3FDB8");  
                } else {  
                     $("#" + companylist[i].name + " td:eq(2)").children('img').attr("src","/sws/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.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/sws/live/show to see the form picture 7.1. Clicking Connect button to start receiving data, Disconnect button to stop.

Picture 8.1: Demonstration page