Websocket flutter connection

Question

We want to connect a WebSocket served with spring boot using a Flutter WebSocket client.

The following code snippet is our websocket configuration on the server side:

// Spring web socket configuration file
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app")
                .enableSimpleBroker("/chat");
    }
}

And this is the code that we are using to setup our WebSocket client (this code comes frome here).

// This code is not working. The websocket throws an Exception
class WsService {
  final socketUrl = 'ws://my-app.herokuapp.com/socket';

  IOWebSocketChannel get channel {
    return IOWebSocketChannel.connect(socketUrl);
  }

When we try to run the Flutter app it throws the following exception:

E/flutter ( 5810): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://91beb66f.ngrok.io:0#' was not upgraded to websocket
E/flutter ( 5810): #0      new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:84:24)
E/flutter ( 5810): #1      _invokeErrorHandler (dart:async/async_error.dart:19:29)
E/flutter ( 5810): #2      _HandleErrorStream._handleError (dart:async/stream_pipe.dart:288:9)
E/flutter ( 5810): #3      _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:170:13)
E/flutter ( 5810): #4      _rootRunBinary (dart:async/zone.dart:1146:38)
E/flutter ( 5810): #5      _CustomZone.runBinary (dart:async/zone.dart:1039:19)
E/flutter ( 5810): #6      _CustomZone.runBinaryGuarded (dart:async/zone.dart:941:7)
E/flutter ( 5810): #7      _BufferingStreamSubscription._sendError.sendError (dart:async/stream_impl.dart:358:15)
E/flutter ( 5810): #8      _BufferingStreamSubscription._sendError (dart:async/stream_impl.dart:376:16)
E/flutter ( 5810): #9      _BufferingStreamSubscription._addError (dart:async/stream_impl.dart:275:7)
E/flutter ( 5810): #10     _SyncStreamControllerDispatch._sendError (dart:async/stream_controller.dart:777:19)
E/flutter ( 5810): #11     _StreamController._addError (dart:async/stream_controller.dart:657:7)
E/flutter ( 5810): #12     _rootRunBinary (dart:async/zone.dart:1146:38)
E/flutter ( 5810): #13     _CustomZone.runBinary (dart:async/zone.dart:1039:19)
E/flutter ( 5810): #14     _CustomZone.runBinaryGuarded (dart:async/zone.dart:941:7)
E/flutter ( 5810): #15     _BufferingStreamSubscription._sendError.sendError (dart:async/stream_impl.dart:358:15)
E/flutter ( 5810): #16     _BufferingStreamSubscription._sendError (dart:async/stream_impl.dart:376:16)
E/flutter ( 5810): #17     _BufferingStreamSubscription._addError (dart:async/stream_impl.dart:275:7)
E/flutter ( 5810): #18     _SyncStreamControllerDispatch._sendError (dart:async/stream_controller.dart:777:19)
E/flutter ( 5810): #19     _StreamController._addError (dart:async/stream_controller.dart:657:7)
E/flutter ( 5810): #20     new Stream.fromFuture.<anonymous closure> (dart:async/stream.dart:177:18)
E/flutter ( 5810): #21     _rootRunBinary (dart:async/zone.dart:1146:38)
E/flutter ( 5810): #22     _CustomZone.runBinary (dart:async/zone.dart:1039:19)
E/flutter ( 5810): #23     _FutureListener.handleError (dart:async/future_impl.dart:154:20)
E/flutter ( 5810): #24     Future._propagateToListeners.handleError (dart:async/future_impl.dart:694:47)
E/flutter ( 5810): #25     Future._propagateToListeners (dart:async/future_impl.dart:715:24)
E/flutter ( 5810): #26     Future._completeError (dart:async/future_impl.dart:534:5)
E/flutter ( 5810): #27     Future._asyncCompleteError.<anonymous closure> (dart:async/future_impl.dart:582:7)
E/flutter ( 5810): #28     _rootRun (dart:async/zone.dart:1126:13)
E/flutter ( 5810): #29     _CustomZone.run (dart:async/zone.dart:1023:19)
E/flutter ( 5810): #30     _CustomZone.runGuarded (dart:async/zone.dart:925:7)
E/flutter ( 5810): #31     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:965:23)
E/flutter ( 5810): #32     _microtaskLoop (dart:async/schedule_microtask.dart:43:21)
E/flutter ( 5810): #33     _startMicrotaskLoop (dart:async/schedule_microtask.dart:52:5)

We don't understand why the websocket connection is not working with flutter while in Angular2+ it does. The code we use to connect to WebSocket in the Angular part is the following:

// Connection in angular works
initializeWebSocketConnection() {
  const ws = new SockJS(environment.SOCKET_URL);
  this.stompClient = Stomp.over(ws);
  this.stompClient.debug = true;

  this.stompClient.connect({}, (a) => {
    console.log(a);
    this.stompClient.subscribe('/chat', (m) => {
      // Handle messages  
    });
  });
}

Answer 1

You have to turn off sockJs in your spring application in order to connect as you wanted here is the link to the discussion Github Link