spring boot rest and web2 with websocket（靴下をはがす）

Question

MVCを使わずにストームオーバーソックスを使用することは可能ですか？ですから、私はtomcatでspring restインターフェイスを、expressではangle2アプリケーションを実行したいと考えています。

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

とtypescriptですコード：

。 。 。

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

。 。 。

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 

、私が送信したとき、私は{ "名"： "kitica"}

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

を得る：私は出力を得るコンソールに

が、これは動作していない何らかの理由で

..

メッセージはサブスクライバに返されません。

angular2は、ポート8001上にあり、春の残りの部分は、私はいくつかの問題は、Javaのスプリングブーツバックエンド対SockJs上のストンプボックスを使用してangular2クライアントで動作するように自分自身を持っていた8080

Answer 1

混乱していた部分は、私がspring-boot-restを使用していて、tomcatコンテナからstaticとしてangular2を提供していないということです、私はwebpackの下にangular2を持っています。

行うための正しい方法は次のとおりです。

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

} 

と春のコントローラで：

@Controller 
public class SocketController { 


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

} 

Configurationクラス：

@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

です。ここで私はそれが動作するために何をしたか：

角度側：

this.stompClient.subscribeを見つけるので、「これ」と「それ」と結合することはできません。 Javaサーバー側で

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

：

あなたのコントローラは、vallueは次のように返された注釈が必要です。あなたのメッセージブローカーによると

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

を。

少し助けてくれることを願っています。

Answer 3

あなたが送っ持って 'ハンドル（）' メソッド値 simpMessagingTemplate.coを使用してください。 nvertAndSend（、）; 例：simpMessagingTemplate.convertAndSend（ "/ topic/chats"、message.getMessage（））;

または ハンドラメソッドの上の@SendTo（ "destination url"）。 例：@-SendTo（ "/ topic/message"）