title: Spring Websocket with SockJS Connection Lost Issue
body: <p>I'm developing a web application using spring boot, angular cli and sockjs.</p>
  
  <p>WebSocket implementation:</p>
  
  <pre><code>@Configuration
  @EnableWebSocketMessageBroker
  public class WebSocketConfig extends AbstractSecurityWebSocketMessageBrokerConfigurer {
  
      @Override
      public void registerStompEndpoints(StompEndpointRegistry registry) {
          registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
      }
  
      @Override
      public void configureMessageBroker(MessageBrokerRegistry registry) {
          registry.enableSimpleBroker("/info", "/user", "/notif");
          registry.setApplicationDestinationPrefixes("/app");
      }
  }
  </code></pre>
  
  <p>Angular websocket util implementation:</p>
  
  <p><strong>Note: This class is used to connect web socket and subscribe routines!</strong></p>
  
  <pre><code>@Injectable()
  export class WebSocketUtil {
  
    stompClient = null;
  
    constructor() {
    }
  
    connect(subscribers: Subscriber[] = null) {
      let _this = this;
      let socket = new SockJS("https://localhost/ws");
      if (socket != null) {
        this.stompClient = Stomp.over(socket);
        if (this.stompClient != null) {
          console.log("Stomp client is connected!");
  
          let headers = {};
          headers["X-CSRF-TOKEN"] = ...;// csrf code
  
          this.stompClient.connect(headers, (frame) =&gt; {
            subscribers.forEach((subscriber) =&gt; {
              _this.stompClient.subscribe(subscriber.URL, subscriber.CALLBACK);
            });
          }, () =&gt; {
            console.log(_this.stompClient);
          });
        } else {
          throw {
            name: "StompClientNotRegistered",
            message: "Stomp client is not registered!"
          };
        }
      } else {
        throw {
          name: "SocketEstablishFailed",
          message: "Socket cannot be established!"
        };
      }
    }
  
    send(message) {
      this.stompClient.send(message.url, JSON.stringify(message.params));
    }
  }
  </code></pre>
  
  <p>Angular subscriber class implementation:</p>
  
  <p><strong>Note: This class is used to bind subscribe routines to stomp client!</strong></p>
  
  <pre><code>export class Subscriber {
    constructor(private url: string = "", private callback: any) {
    }
  
    get URL() {
      return this.url;
    }
  
    get CALLBACK() {
      return this.callback;
    }
  }
  </code></pre>
  
  <p>WebsocketUtil usage:</p>
  
  <p><strong>Note: This snippet of code is called after view init stage.</strong></p>
  
  <pre><code>this.webSocketUtil.connect([
        new Subscriber("/notif", function (data) {
          console.log(data);
        }),
        new Subscriber("/user", function (data) {
          console.log(data);
        })
      ]);
  </code></pre>
  
  <p>The code above causes following error in web browser(both FF &amp; chrome) console:</p>
  
  <p><a href="https://i.stack.imgur.com/GtDEM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GtDEM.png" alt="Browser error!"></a></p>
  
  <p><strong>Note: <a href="https://localhost/ws" rel="nofollow noreferrer">https://localhost/ws</a> is accessible and returns "Welcome to SockJS!" message.</strong></p>