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

前端之家收集整理的这篇文章主要介绍了弹簧靴休息和angular2与websocket(stomp over sockjs)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在没有MVC的情况下使用stock over 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上

令人困惑的部分是我使用spring-boot-rest并且我没有将tom2作为静态来自tomcat容器,我在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();
    }

}

猜你在找的Angularjs相关文章