angular2 can't send message to spring stomp over websocket

Question

I use spring stomp over websocket 8080 port and angular2 4200 port

@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("/query/company/socket")
        .setAllowedOrigins("*")
        .withSockJS();
    }

}

and :

@MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        System.out.println(" start is : name is : "+message.getName());
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + message.getName() + "!");
    }

and angular2:

import * as SockJS from 'sockjs-client';
const Stomp = require('stompjs/lib/stomp').Stomp;
import {BehaviorSubject} from "rxjs";


    export class AppComponent implements OnInit{
      private host='http://localhost:8080';
      private url = `${this.host}/query/company/socket`;
      private subUrl=`${this.host}/topic/greetings`;
      private sendUrl=`${this.host}/app/hello`;
      public stompClient: any;

      ngOnInit(): void {
        this.connect();
      }

      connect() {
        var that = this;
        var socket = new SockJS(this.url);
        this.stompClient = Stomp.over(socket);
        this.stompClient.connect({}, function (frame) {
          console.log('Connected: ' + frame);
          that.stompClient.subscribe(this.subUrl, function (greeting) {
            console.log(JSON.parse(greeting.body).content);
          });
        }, function (err) {
          console.log('err', err);
        });
      }

      public send() {

        this.stompClient.send(this.sendUrl , {},      JSON.stringify({ 'name': 'jack' }));

      }
}

when running: chrome console---

Web Socket Opened...
stomp.js:134 >>> CONNECT
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
app.component.ts:41 Connected: CONNECTED
heart-beat:0,0
version:1.1


stomp.js:134 >>> SUBSCRIBE
id:sub-0
destination:undefined

>>> SEND
destination:http://localhost:8080/app/hello
content-length:13

{"name":"ll"}

when sending message :

the spring console:

WebSocketSession[1 current WS(1)-HttpStream(0)-HttpPoll(0), 1 total, 0 closed abnormally (0 connect failure, 0 send limit, 0 transport error)], stompSubProtocol[processed CONNECT(1)-CONNECTED(1)-DISCONNECT(0)], stompBrokerRelay[null], inboundChannel[pool size = 0, active threads = 0, queued tasks = 0, completed tasks = 9], outboundChannelpool size = 0, active threads = 0, queued tasks = 0, completed tasks = 1], sockJsScheduler[pool size = 4, active threads = 1, queued tasks = 2, completed tasks = 441]

when sending message from front , spring should print :

System.out.println(" start is : name is : "+message.getName());

but it not ..

and angular2 did not receive any reply ..

Answer 1

I have solved it .

although my angular2 and spring uses different port , 4200 ,8080.

when i change

private host='http://localhost:8080';
 private subUrl=`${this.host}/topic/greetings`;
private sendUrl=`${this.host}/app/hello`;

to

private subUrl='/topic/greetings';
private sendUrl='/app/hello';

it works fine ,

but i do not know the reason .