Spring boot rest and angular2 with websocket (stomp over sockjs)

Question

Is it possible to use stomp on top of sockjs without MVC. Therefore, I would like to have a spring rest interface in tomcat and an angular2 application running express.

WebSocketConfig.java

@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { // the endpoint for websocket connections registry.addEndpoint("/portfolio").setAllowedOrigins("*").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.setApplicationDestinationPrefixes("/app"); config.enableSimpleBroker("/topic"); } } 

Socketcontroller.java

 @Controller public class SocketController { @Autowired private SimpMessagingTemplate template; public SocketController() { int a = 5; } @MessageMapping("/greeting") public String handle(String greeting) { return "[" + "greeting" + ": " + greeting; } } 

and typescript code:

. ,,

 constructor() { var socket = new SockJS('http://localhost:8080/portfolio'); this.stompClient = Stomp.over(socket); this.stompClient.connect("guest", "guest", function(frame) { console.log('Connected: ' + frame); this.stompClient.subscribe('http://localhost:8080/topic/greeting', function(greeting) { console.log("from from", greeting); }); }, function (err) { console.log('err', err); }); } 

. ,.

 send() { this.stompClient.send("http://localhost:8080/app/greeting", {}, JSON.stringify({ 'name': "kitica" })); } 

. ,.

but for some reason this does not work. In the console, I get the output:

 Opening Web Socket... stomp.js:134 Web Socket Opened... stomp.js:134 >>> CONNECT login:guest passcode:guest accept-version:1.1,1.0 heart-beat:10000,10000 stomp.js:134 <<< CONNECTED version:1.1 heart-beat:0,0 stomp.js:134 connected to server undefined activity-socket.ts:17 Connected: CONNECTED heart-beat:0,0 version:1.1 

and when I send, I get

 >>> SEND destination:http://localhost:8080/app/greeting content-length:17 

{"name": "kitica"}

but the message does not return to the subscriber.

angular2 is on port 8001 and spring the rest is on 8080

Answer 1

The confusing part is that I use spring-boot-rest, and I don't serve angular2 as static from the tomcat container, I have angular2 under webpack, so I was constantly trying to subscribe and send to the relative URL.

The right way:

 import {Component} from '@angular/core'; import {ActivityService} from '../common/services'; import {MaterializeDirective} from 'angular2-materialize'; import {LarsActionButtonComponent} from '../common/components'; var SockJS = require('sockjs-client'); var Stomp = require('stompjs'); @Component({ selector: 'activity', providers: [ActivityService], directives: [MaterializeDirective, LarsActionButtonComponent], templateUrl: 'app/activity/activity.html' }) export class Activity { stompClient: any; activityId: any; text: any; messages: Array<String> = new Array<String>(); constructor() { } send() { this.stompClient.send('/app/hello/' + this.activityId, {}, JSON.stringify({ 'name': this.text })); } connect() { var that = this; var socket = new SockJS('tst-rest.mypageexample/hello?activityId=' + this.activityId); this.stompClient = Stomp.over(socket); this.stompClient.connect({}, function (frame) { console.log('Connected: ' + frame); that.stompClient.subscribe('/topic/greetings/' + that.activityId, function (greeting) { that.messages.push(JSON.parse(greeting.body).content); }); }, function (err) { console.log('err', err); }); } } 

and in the spring controller:

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

Configuration class:

 @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/hello").setAllowedOrigins("*").withSockJS(); } } 

Answer 2

I'm having some problems working with angular2 client using stomp on top of SockJs compared to Java spring-boot back-end. Here is what I did to make it work:

On the angular side:

this.stompClient.subscribe cannot find, so bind "this" to "this."

 constructor() { var that = this; var socket = new SockJS('http://localhost:8080/portfolio'); this.stompClient = Stomp.over(socket); this.stompClient.connect("guest", "guest", function(frame) { console.log('Connected: ' + frame); that.stompClient.subscribe('http://localhost:8080/topic/greeting', function(greeting) { console.log("from from", greeting); }); }, function (err) { console.log('err', err); }); } 

On the server side of Java:

Your controller needs an annotation that states where the vallue value is returned as follows:

 @MessageMapping("/greeting") @SendTo("/topic/greetings") public String handle(String greeting) { return "[" + "greeting" + ": " + greeting; } 

According to your message broker.

Hope this helps.

Answer 3

You sent the value of the "handle ()" method to the subscriber either using simpMessagingTemplate.convertAndSend (,); for example, simpMessagingTemplate.convertAndSend ("/ topic / chats", message.getMessage ());

or @SendTo ("destination URL") above the handler method. e.g. @SendTo ("/ topic / message")