我们想使用Flutter WebSocket客户端连接带有Spring Boot服务的WebSocket。
以下代码段是我们在服务器端的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)
我们不明白为什么在Angular2 +中websocket连接不能正常工作。我们用于在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
});
});
}