websocket_sockJS : all transport error. after adding { transports: ['websocket']}

Question

background:

whenever I open WebSocket page I had a few XHR_SEND? 404 - error but finally XHR_SEND? got success response and connected to WebSocket.

So to avoid this 404 error, I decide to use WebSocket only. so I added this

: return new SockJS(connectionUrl,, null, { transports: ['websocket']});

then now.. XHR_SEND? are gone but it doesn't connect to server at all.

+FYI: I have 2 servers ..(i think because of this previously I got XHR_send error. )

The below screenshot is repeating. but never connected

JAVA

@Configuration
@EnableWebSocketMessageBroker
public class BatchSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer {



    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/batch-socket");
        registry.addEndpoint("/batch-socket").withSockJS();
    }



    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/socketio/");



    }

ANGULAR7

import { Injectable, OnDestroy, Inject, Optional } from '@angular/core';
import * as SockJS from '../../../assets/lib/sockjs.min.js';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter, first, switchMap } from 'rxjs/operators';
import { StompSubscription, Stomp, Client, Frame, Message, StompConfig, Versions } from '@stomp/stompjs';


@Injectable({
  providedIn: 'root'
})
export class SocketService {

  private client: Client;
  private state: BehaviorSubject<any>;
  private baseUrl: any = "/" + window.location.href.substr(0).split('/')[3] + "/";

  constructor() {
  }

  init() {
    let connectionUrl = this.baseUrl + "batch-socket";
    console.log("MY URL is " + connectionUrl);
    return new Promise((resolve, reject) => {
        let config = new StompConfig();
        config.heartbeatOutgoing = 10000;
        config.heartbeatIncoming = 10000;
        config.stompVersions = new Versions(['1.0', '1.1']);
        config.webSocketFactory = function () {
          return new SockJS(connectionUrl, null, { transports: ['websocket']});
          //PREVIOUS : return new SockJS(connectionUrl)
        }
        config.debug = function (str) {
          console.log("@socketDebug: " + str)
        }
      this.client = new Client();
      this.client.configure(config);

      console.log(this.client);
      console.log("@socketSvc: starting connection...");

      const _this = this;
      this.client.onConnect = function (frame) {
        console.log("@socketSvc: connection established.");
        console.log(frame);
        _this.state = new BehaviorSubject<any>(SocketClientState.ATTEMPTING);
        _this.state.next(SocketClientState.CONNECTED);
        resolve(frame.headers['user-name']);
      }

      this.client.onWebSocketClose = function (msg){
        console.log("@socketSvc: connection closed.");
        console.log(msg);
      }

      this.client.onWebSocketError = function(msg){
        console.log("@socketSvc: connection error.");
        console.log(msg);
      }

      this.client.onDisconnect = function(msg){
        console.log("@socketSvc: socket disconnected.");
        console.log(msg);
        //this.init();
      }

      this.client.onStompError = function(msg){
        console.log("@socketSvc: stomp error occurred.");
        console.log(msg);
      }

      this.client.activate();
    });

  }

  private connect(): Observable<Client> {
    return new Observable<Client>(observer => {
      this.state.pipe(filter(state => state === SocketClientState.CONNECTED)).subscribe(() => {
        observer.next(this.client);
      });
    });
  }

  onPlainMessageReceived(topic: string): Observable<string> {
    return this.onMessageReceived(topic, SocketService.textHandler);
  }

  onMessageReceived(topic: string, handler = SocketService.jsonHandler): Observable<any> {
    return this.connect().pipe(first(), switchMap(client => {
      return new Observable<any>(observer => {
        const subscription: StompSubscription = client.subscribe(topic, message => {
          observer.next(handler(message));
        });
        return () => client.unsubscribe(subscription.id);
      });
    }));
  }

  static jsonHandler(message: Message): any {
    return JSON.parse(message.body);
  }

  static textHandler(message: Message): string {
    return message.body;
  }


  disconnect() {
    this.connect().pipe(first()).subscribe(client => client.deactivate());
    this.client.deactivate();
  }
}

export enum SocketClientState {
  ATTEMPTING, CONNECTED
}

Answer 1

I found a reason for this issue. I realized that I have 2 war files. hence one has my code(socket connection) , the other one doesnt have a code (socket connection). so it throws the error.

=> resolved by removing the war file that doesn't have socket connection.