Using Spring 4 WebSocket, sockJS and Stomp support to implement two way server client communication

妖狐艹你老母 2022-08-06 11:12 17阅读 0赞

# Using Spring 4 WebSocket, sockJS and Stomp support to implement two way server client communication #

January 19, 2014 [1 Comment][]

One exciting new feature of Spring 4 is the support [ for WebSocket, SockJS and STOMP messaging][for WebSocket_ SockJS and STOMP messaging]. This allows two way communication between the server and its clients in a Spring MVC web application using the standard point-to-point and publish-subscribe messaging protocols. In this post, I will demonstrate how to set up a basic boilerplate project to start using this new feature. It is in part based on this [article][].

## Maven Setup ##

First we need to add the Spring messaging modules in the POM file:

<dependency>
     <groupId>org.springframework</groupId>
     <artifactId>spring-messaging</artifactId>
     <version>4.0.0.RELEASE</version>
     </dependency>
     <dependency>
     <groupId>org.springframework</groupId>
     <artifactId>spring-websocket</artifactId>
     <version>4.0.0.RELEASE</version>
     </dependency>

## Spring MVC Configuration ##

Next, we need to add the message broker config to the Spring MVC config XML file.

The main thing here is the set up of the message broker for handling the message exchange between the server and its clients. This is done via the **<message-broker>** and its child tags. The tag **<websocket:simple-broker>** indicates we are using in-memory message broker.

It is easy to understand together with the server and client codes so I will include them below first before attempting to give a bit more explanations by cross-referencing the client and server codes.

## Spring MVC Controller ##

Below is my Spring MVC Controller

@Controller
     public class MessageController {
          @MessageMapping("/hello")
          @SendTo("/topic/greetings")
          public Greeting greeting(HelloMessage message) throws Exception {
               return new Greeting("Hello, " + message.getName() + "!");
         }
    }

The method argument HelloMessage and output Greeting are just POJOs representing the body of the messages being sent and returned.

public class Greeting {
        private String content;
        public Greeting(String content) {
               this.content = content;
        }
        public String getContent() {
          return content;
        }
    }
    public class HelloMessage {
        private String name;
        public String getName() {
            return name;
        }
    }

## Client sockJS and STOMP codes ##

On the client side, I use the sockJS protocol fallback option as outlined in the [ Spring documentation][Spring documentation]. The javascript codes are included below

// Create stomp client over sockJS protocol (see Note 1)
     var socket = new SockJS("/hello");
     var stompClient = Stomp.over(socket);
    
     // callback function to be called when stomp client is connected to server (see Note 2)
     var connectCallback = function() {
          alert("connected!");
          stompClient.subscribe('/topic/greetings', function(greeting){
               alert(JSON.parse(greeting.body).content);
          });
     }; 
    
     // callback function to be called when stomp client could not connect to server (see Note 3)
     var errorCallback = function(error) {
          // display the error's message header:
          alert(error.headers.message);
     };
    
     // Connect as guest (Note 4)
     stompClient.connect("guest", "guest", connectCallback, errorCallback);

#### Note ####

1.  The client starts by create a sockJS by specifying the endpoint (ie.  **/hello**) to connect to and then a stomp client is created over the socket. The endpoint here should match that defined in the Spring MVC configuration in the lines. Note also the 2nd line referring to sockJS.  
    
    
    > <websocket:stomp-endpoint path=”/hello”>  
    > < websocket:sockjs/>  
    > < /websocket:stomp-endpoint>
2.  Then a callback function is created and assigned to a variable *connectCallback*. This is called when a successful connection is made by the stomp client. This allows us to start making subscriptions to messages (as in codes, repeated below) and sending messages. Note the subscription is for the topic *“/topic/greetings”*  
    
    
    > stompClient.**subscribe**(‘/topic/greetings’, function(greeting)\{  
    > alert(JSON.parse(greeting.body).content);  
    > \});
3.  A error callback function is defined if stomp client fails to connect to server.
4.  This line makes the connection registering the callback functions.

Now we are ready to send messages from the client, e.g. using the following javascript function

// function to send message
     function fnSayHi() {
           stompClient.send("/app/hello, JSON.stringify({ 'name': 'Joe' }));
     }

The message will be sent to the Spring MVC message handler method greeting() as defined via the annotation **@MessageMapping(“/hello”)**.

<websocket:message-broker application-destination-prefix=”/app”>

Note the prefix “/app” is defined in the Spring config as  *application-destination-prefix* attribute of the message broker: Note also, the use of **@SendTo** annotation to direct the message to a given destination. I repeat the controller method below

@MessageMapping("/hello")
     @SendTo("/topic/greetings")
     public Greeting greeting(HelloMessage message) throws Exception {
          return new Greeting("Hello, " + message.getName() + "!");
     }

That’s it for now.

[About these ads][]

width="420" height="300" src="http://fw.adsafeprotected.com/rjsi/ad.viewablemedia.net/16201/1098167/a/?pl=25265&rnd=782579499&u=https%3A%2F%2Fraymondhlee.wordpress.com%2F2014%2F01%2F19%2Fusing-spring-4-websocket-sockjs-and-stomp-support-to-implement-two-way-server-client-communication%2F&r=https%3A%2F%2Fraymondhlee.wordpress.com%2F2014%2F04%2F12%2Fset-up-a-full-broker-for-spring-4-stomp-over-websocket-messaging-using-activemq%2F&cust00=undefined&cust01=undefined&view=" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" vspace="0" hspace="0">

### *Related* ###

[Set up a full broker for Spring 4 STOMP over WebSocket messaging using ActiveMQ][]In "J2EE"

[Using Maven build number plugin to load code revision details][]In "J2EE"

[Automated Web site testing with Selenium][]In "J2EE"

[1 Comment]: https://raymondhlee.wordpress.com/2014/01/19/using-spring-4-websocket-sockjs-and-stomp-support-to-implement-two-way-server-client-communication/#comments
[for WebSocket_ SockJS and STOMP messaging]: http://docs.spring.io/spring/docs/4.0.0.RELEASE/spring-framework-reference/htmlsingle/#_websocket_sockjs_and_stomp_messaging
[article]: http://spring.io/guides/gs/messaging-stomp-websocket/
[Spring documentation]: http://docs.spring.io/spring/docs/4.0.0.RELEASE/spring-framework-reference/htmlsingle/#websocket
[About these ads]: http://wordpress.com/about-these-ads/
[Set up a full broker for Spring 4 STOMP over WebSocket messaging using ActiveMQ]: https://raymondhlee.wordpress.com/2014/04/12/set-up-a-full-broker-for-spring-4-stomp-over-websocket-messaging-using-activemq/
[Using Maven build number plugin to load code revision details]: https://raymondhlee.wordpress.com/2014/10/25/using-maven-build-number-plugin-to-load-code-revision-details/
[Automated Web site testing with Selenium]: https://raymondhlee.wordpress.com/2013/03/23/automated-web-site-testing-with-selenium/