如何让Flutter WebSocket与Spring Boot后端正常对接？

我试了各种配置组合，就是跑不起来，连问题出在前端还是后端都搞不清。下面是相关代码片段和报错信息：

报错信息 #

Flutter连接时提示如下错误（MYIPADDRESS为电脑有效IP地址）：

WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://MYIPADDRESS:8080/topic/greetings#' was not upgraded to websocket

后端代码 #

Spring Boot控制器代码 #

@MessageMapping("/hello")
@SendTo("/topic/greetings")
public String send(final String message) throws Exception {
    return message;
}

Spring Boot配置代码 #

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

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

前端代码 #

Flutter代码 #

final channel = IOWebSocketChannel.connect(
  Uri(
    scheme: "ws",
    host: "MYIPADDRESS",
    port: 8080,
    path: "/topic/greetings",
  ),
);

问题根源与解决方法 #

• 连接路径错误：前端直接连接了消息订阅地址/topic/greetings，但Spring Boot的WebSocket端点是/websocket（带SockJS支持），必须先连接这个端点，再通过STOMP协议订阅主题。
• 协议不匹配：后端启用了SockJS，前端用普通WebSocket连接，没有遵循STOMP协议，导致握手失败无法升级连接。

具体修正 #

1. 前端调整：使用stomp_dart_client库实现STOMP连接，先建立端点连接再订阅主题：

import 'package:stomp_dart_client/stomp_dart_client.dart';

StompClient client = StompClient(
  config: StompConfig(
    url: 'ws://MYIPADDRESS:8080/websocket',
    onConnect: (StompFrame frame) {
      client.subscribe(
        destination: '/topic/greetings',
        callback: (StompFrame frame) {
          print(frame.body);
        },
      );
    },
  ),
);

client.activate();

2. 后端跨域处理：如果前后端不在同一域名，需添加跨域允许：

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
     registry.addEndpoint("/websocket")
             .setAllowedOriginPatterns("*") // 生产环境请根据实际域名配置
             .withSockJS();
}

内容的提问来源于stack exchange，提问作者KijeviGombooc