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  
    });
  });
}

Did you find a solution to your problem my friend? and what url u are using in your angular2+ ? socket url ? @guillem — Aliy, Jan 15 '20 at 11:10
I decided to switch to firestor to kind of simulate a web socket connection — Guillem, Jan 15 '20 at 20:21
My friend I have found a solution after writing to you. The thing is that you have to remove .withSockJS(); part from your spring code and try to connect. it works. the reason it is not working right now is that in flutter there is no SockJs client lib to support like you are doing in your angular2. if you need anything feel free to ask i will explain @Guillem — Aliy, Jan 16 '20 at 05:51

score 0 · Answer 1 · answered Jan 16 '20 at 06:10

0

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

answered Jan 16 '20 at 06:10

Aliy

406
6
21

Websocket flutter connection

1 Answers1