Websocket颤振连接

Question

我们想使用 Flutter WebSocket 客户端连接 Spring Boot 服务的 WebSocket。

以下代码sn -p是我们在服务器端的websocket配置：

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

这是我们用来设置 WebSocket 客户端的代码（此代码来自 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);
  }

当我们尝试运行 Flutter 应用时，它会抛出以下异常：

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)

我们不明白为什么 websocket 连接不能在 Angular2+ 中使用颤振。我们在Angular部分用来连接WebSocket的代码如下：

// 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

你必须在你的 spring 应用程序中关闭 sockJs 才能如你所愿地连接这里是讨论的链接Github Link