spring boot rest e angular2 con websocket (stomp over sockjs)

Question

È possibile utilizzare stomp su sockjs senza MVC. Quindi mi piacerebbe avere l'interfaccia a molla in tomcat, e l'applicazione angular2 eseguita da 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; 
    } 
} 

e il codice dattiloscritto:

. . .

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" })); 
} 

. . .

ma per qualche motivo questo non funziona .. in consolle ottengo uscita:

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 

e quando invio ricevo

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

{ "name": "kitica"}

ma il messaggio non ritorna mai all'abbonato.

angular2 è sulla porta 8001 e di riposo la primavera è il 8080

Answer 1

La parte che mi ha confuso è che sto usando spring-boot-rest e non sto servendo angular2 come static da tomcat container, ho angular2 sotto webpack, quindi ho cercato costantemente di iscriverti e inviarli all'URL relativo.

Il modo giusto di fare è:

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); 
    }); 
} 

} 

e controller primavera: classe

@Controller 
public class SocketController { 


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

} 

Configurazione:

@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

ho avuto io stesso alcuni problemi a lavorare con un client angular2 utilizzando Stomp oltre SockJs rispetto a un Java primavera-boot back-end. Ecco quello che ho fatto per farlo lavorare:

Sul lato angolare:

this.stompClient.subscribe non può essere trovato, in modo da legare "questo" a "che".

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); 
    }); 
} 

Sul lato server Java:

del controllore ha bisogno di un'annotazione che ha detto dove il vallue viene restituita come questo:

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

Secondo il broker messaggio .

Spero che sia di aiuto un po '.

Answer 3

Si hanno inviare il metodo 'impugnatura()' valore per l'abbonato utilizzando simpMessagingTemplate.co nvertAndSend (,); e.g.- simpMessagingTemplate.convertAndSend ("/ topic/chat", message.getMessage());

o @SendTo ("URL di destinazione") sopra il metodo gestore. ad es. @SendTo ("/ topic/message")