弹簧靴休息和angular2与websocket(stomp over sockjs)

前端之家收集整理的这篇文章主要介绍了弹簧靴休息和angular2与websocket(stomp over sockjs)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在没有MVC的情况下使用stock over sockjs.所以我想在tomcat中有 spring rest接口,而angular2应用程序由express运行.

WebSocketConfig.java

  1. @Configuration
  2. @EnableWebSocketMessageBroker
  3. public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
  4.  
  5. @Override
  6. public void registerStompEndpoints(StompEndpointRegistry registry) {
  7. // the endpoint for websocket connections
  8. registry.addEndpoint("/portfolio").setAllowedOrigins("*").withSockJS();
  9. }
  10.  
  11. @Override
  12. public void configureMessageBroker(MessageBrokerRegistry config) {
  13. config.setApplicationDestinationPrefixes("/app");
  14. config.enableSimpleBroker("/topic");
  15. }
  16. }

SocketController.java

  1. @Controller
  2. public class SocketController {
  3.  
  4. @Autowired
  5. private SimpMessagingTemplate template;
  6.  
  7. public SocketController() {
  8. int a = 5;
  9. }
  10.  
  11. @MessageMapping("/greeting")
  12. public String handle(String greeting) {
  13. return "[" + "greeting" + ": " + greeting;
  14. }
  15. }

和打字稿代码

.
.
.

  1. constructor() {
  2.  
  3. var socket = new SockJS('http://localhost:8080/portfolio');
  4. this.stompClient = Stomp.over(socket);
  5. this.stompClient.connect("guest","guest",function(frame) {
  6. console.log('Connected: ' + frame);
  7. this.stompClient.subscribe('http://localhost:8080/topic/greeting',function(greeting) {
  8. console.log("from from",greeting);
  9. });
  10. },function (err) {
  11. console.log('err',err);
  12. });
  13. }

.
.
.

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

.
.
.

但由于某种原因,这不起作用..在控制台我得到输出

  1. opening Web Socket...
  2. stomp.js:134 Web Socket Opened...
  3. stomp.js:134 >>> CONNECT
  4. login:guest
  5. passcode:guest
  6. accept-version:1.1,1.0
  7. heart-beat:10000,10000
  8.  
  9.  
  10.  
  11. stomp.js:134 <<< CONNECTED
  12. version:1.1
  13. heart-beat:0,0
  14.  
  15.  
  16.  
  17. stomp.js:134 connected to server undefined
  18. activity-socket.ts:17 Connected: CONNECTED
  19. heart-beat:0,0
  20. version:1.1

当我发送,我得到

  1. >>> SEND
  2. destination:http://localhost:8080/app/greeting
  3. content-length:17

{ “名”: “kitica”}

但消息永远不会回到用户身上.

angular2在端口8001上,弹簧支架在8080上

令人困惑的部分是我使用spring-boot-rest并且我没有将tom2作为静态来自tomcat容器,我在webpack下有angular2所以我一直在尝试订阅并发送到相对URL.

正确的方法是:

  1. import {Component} from '@angular/core';
  2. import {ActivityService} from '../common/services';
  3. import {MaterializeDirective} from 'angular2-materialize';
  4. import {LarsActionButtonComponent} from '../common/components';
  5.  
  6. var SockJS = require('sockjs-client');
  7. var Stomp = require('stompjs');
  8.  
  9. @Component({
  10. selector: 'activity',providers: [ActivityService],directives: [MaterializeDirective,LarsActionButtonComponent],templateUrl: 'app/activity/activity.html'
  11. })
  12.  
  13. export class Activity {
  14. stompClient: any;
  15.  
  16. activityId: any;
  17. text: any;
  18. messages: Array<String> = new Array<String>();
  19.  
  20. constructor() {
  21. }
  22.  
  23. send() {
  24. this.stompClient.send('/app/hello/' + this.activityId,JSON.stringify({ 'name': this.text }));
  25. }
  26.  
  27. connect() {
  28. var that = this;
  29. var socket = new SockJS('tst-rest.mypageexample/hello?activityId=' + this.activityId);
  30. this.stompClient = Stomp.over(socket);
  31. this.stompClient.connect({},function (frame) {
  32. console.log('Connected: ' + frame);
  33. that.stompClient.subscribe('/topic/greetings/' + that.activityId,function (greeting) {
  34. that.messages.push(JSON.parse(greeting.body).content);
  35. });
  36. },function (err) {
  37. console.log('err',err);
  38. });
  39. }
  40.  
  41. }

在弹簧控制器中:

  1. @Controller
  2. public class SocketController {
  3.  
  4.  
  5. @MessageMapping("/hello")
  6. @SendTo("/topic/greetings")
  7. public Greeting greeting(HelloMessage message) throws Exception {
  8. return new Greeting("Hello," + message.getName() + "!");
  9. }
  10.  
  11. }

配置类:

  1. @Configuration
  2. @EnableWebSocketMessageBroker
  3. public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
  4.  
  5. @Override
  6. public void configureMessageBroker(MessageBrokerRegistry config) {
  7. config.enableSimpleBroker("/topic");
  8. config.setApplicationDestinationPrefixes("/app");
  9. }
  10.  
  11. @Override
  12. public void registerStompEndpoints(StompEndpointRegistry registry) {
  13. registry.addEndpoint("/hello").setAllowedOrigins("*").withSockJS();
  14. }
  15.  
  16. }

猜你在找的Angularjs相关文章