Spring Boot Rest und Angular2 mit Websocket (Stampf über Socks)

Question

Ist es möglich, Stomp über Socks ohne MVC zu verwenden. So würde ich gerne in Tomcat Frühling ruhen Schnittstelle haben, und eckig2 Anwendung ausgeführt von 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; 
    } 
} 

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

. . .

aber aus irgendeinem Grund nicht funktioniert .. in der Konsole I Ausgabe:

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 

und wenn ich ich

bekommen senden

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

{ "name": "kitica"}

, aber die Nachricht kommt nie zum Abonnenten zurück.

angular2 ist auf Port 8001 und Federauflage ist auf 8080

Answer 1

Der Teil, der war verwirrend ist, dass ich Spring-Boot-Rest verwende und ich angle2 als statische aus Tomcat-Container nicht dienen, habe ich angular2 unter Webpack, so dass ich ständig versucht zu abonnieren und an die relative URL senden.

Der richtige Weg ist zu tun:

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

} 

und im Frühjahr Controller:

@Controller 
public class SocketController { 


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

} 

Konfigurationsklasse:

@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

ich mir einige Probleme mit einem angular2-Client stampft über SockJs im Vergleich zu einem Java-Feder-Boot-Back-End zu arbeiten hatte. Hier ist, was ich tat, um es arbeiten:

Auf der Winkelseite:

this.stompClient.subscribe nicht gefunden werden kann, so bind „dieses“, „dass“.

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

Auf der Java Server-Seite:

Der Controller benötigen eine Anmerkung, die besagten, wo die vallue wie folgt zurückgegeben:

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

nach Ihren Nachrichtenbroker .

Ich hoffe, das hilft ein bisschen.

Answer 3

Sie senden haben die 'handle()' Methode Wert für die Teilnehmer entweder mit simpMessagingTemplate.co nvertAndSend (,); e.g.- simpMessagingTemplate.convertAndSend ("/ Thema/Chats", message.getMessage());

oder @SendTo ("Ziel-URL") über der Behandlungsmethode. z. B. @SendTo ("/ topic/message")