title: Websocket with Angular and Spring
body: <p>I am trying to make a Websocket Connection between a Java Spring Backend and an Angular Frontend.</p>
  
  <p>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.</p>
  
  <p>This is my Backend:</p>
  
  <pre><code>@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()) + "!");
      }
  
  }
  </code></pre>
  
  <p>This is my Frontend:</p>
  
  <pre><code>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) =&gt; {
        console.log("errorCallBack -&gt; " + 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);
    }
  }
  </code></pre>
  
  <p>Currently I am just trying to call the _connect function and get the following output:</p>
  
  <pre><code>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 -&gt; Whoops! Lost connection to http://localhost:8080/ws
  </code></pre>
  
  <p>In the networks tab I can see that the request to switching protocols was successful and the following messages have been exchanged:</p>
  
  <pre><code>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\"}"]
  </code></pre>
  
  <p>But the call to <a href="http://localhost:8080/ws/info?t=1586087497720" rel="nofollow noreferrer">http://localhost:8080/ws/info?t=1586087497720</a> fails</p>