彈簧引導休息和angular2與websocket（stomp over sockjs）

Question

是否有可能在沒有MVC的情況下使用sockjs。所以我想在tomcat中有spring rest界面，而angular2應用程序則是運行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; 
    } 
} 

和打字稿代碼：

。 。 。

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 

，當我送我得到

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

{ 「名」： 「kitica」}

但消息永遠不會回到用戶。

angular2在端口8001和彈簧安置是在8080

Answer 1

令人困惑的部分是，我使用的是spring-boot-rest，而且我沒有在tomcat容器中將angular2作爲靜態服務，我在webpack下有angular2，所以我一直試圖訂閱併發送給相對URL。

做正確的做法是：

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 
@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

我有我自己的一些問題用蹬過SockJs與一個Java彈簧引導後端的angular2客戶工作。在這裏我做了什麼，使其工作：

在角側：

this.stompClient.subscribe不能被發現，所以綁定「這種」到「那個」。

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

在Java服務器端：

控制器需要一個註解，說在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（「目標網址」）在處理程序方法之上。 例如：@SendTo（「/ topic/message」）