Websocket with Angular and Spring

Question

I am trying to make a Websocket Connection between a Java Spring Backend and an Angular Frontend.

The problem I am having is that the frontend seems to fail while trying to call /ws/info?t=1586086970794 and I can't figure out why or where that call is being made. I am using sockJS with stomp but I could not find any information about an info-endpoint being called and it is not directly used in the code.

This is my Backend:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOrigins("http://localhost:4200").withSockJS();
    }
}

@Controller
public class PageWebsocketController {

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

}

This is my Frontend:

export class SocketService {
  webSocketEndPoint: string = 'http://localhost:8080/ws';
  topic: string = "/topic/greetings";
  stompClient: any;
  _connect() {
    console.log("Initialize WebSocket Connection");
    let ws = new SockJS(this.webSocketEndPoint);
    this.stompClient = Stomp.over(ws);
    const _this = this;
    _this.stompClient.connect({}, function (frame) {
      _this.stompClient.subscribe(_this.topic, function (sdkEvent) {
        _this.onMessageReceived(sdkEvent);
      });
      //_this.stompClient.reconnect_delay = 2000;
    }, (error) => {
      console.log("errorCallBack -> " + error)
      setTimeout(this._connect, 5000);
    });
  };

  _disconnect() {
    if (this.stompClient !== null) {
      this.stompClient.disconnect();
    }
    console.log("Disconnected");
  }

  _send(message) {
    console.log("calling logout api via web socket");
    this.stompClient.send("/app/hello", {}, JSON.stringify(message));
  }

  onMessageReceived(message) {
    console.log("Message Recieved from Server :: " + message);
  }
}

Currently I am just trying to call the _connect function and get the following output:

Initialize WebSocket Connection
Opening Web Socket...
GET http://localhost:8080/ws/info?t=1586087497720 net::ERR_CONNECTION_REFUSED
Whoops! Lost connection to http://localhost:8080/ws
socket.service.ts:23 errorCallBack -> Whoops! Lost connection to http://localhost:8080/ws

In the networks tab I can see that the request to switching protocols was successful and the following messages have been exchanged:

o   1   
13:51:37.425
a["{\"type\":\"liveReload\"}"]  30  
13:51:37.426
a["{\"type\":\"overlay\",\"data\":{\"errors\":true,\"warnings\":false}}"]   73  
13:51:37.426
a["{\"type\":\"hash\",\"data\":\"64ab939817031c9011d5\"}"]  58  
13:51:37.427
a["{\"type\":\"ok\"}"]

But the call to http://localhost:8080/ws/info?t=1586087497720 fails

Answer 1

I found my mistake. Since I had set spring.servlet.context-path=/api in my application.yml I needed to use http://localhost:8080/api/ws in my javascript instead of http://localhost:8080/ws Then everything worked like a charm