Flutter连接Spring Security STOMP WebSocket遇错求助

核心错误原因 #

1. SockJS URL格式错误：使用StompConfig.sockJS()时，URL必须以http/https开头，而非ws，这是触发报错的直接原因。
2. STOMP Destination格式错误：订阅和发送消息时的destination使用了完整URL，正确写法应为基于后端配置的相对路径。
3. 后端消息代理配置缺失：后端未将/user路径加入消息代理，无法处理用户专属队列的消息。
4. 发送目标与后端映射不匹配：Flutter中发送消息到/app/register，但后端无对应@MessageMapping处理方法。

具体修复步骤 #

1. 修正Flutter连接URL #

将StompConfig.sockJS的url改为HTTP格式：

url: "http://10.0.2.2:8080/ws",

2. 修正STOMP Destination路径 #

所有订阅和发送的destination去掉完整域名，仅保留相对路径：

// 连接成功后的订阅
var clientUnSubscribeFn = _stompClient!.subscribe(
  destination: "/user/queue/newMember", // 移除ws://前缀
  headers: asdf,
  callback: (frame) {
    print("here" + frame.body!);
  },
);

// 发送消息目标（改为后端已存在的映射）
_stompClient!.send(
  destination: "/app/chat.addUser", // 对应后端@MessageMapping("/chat.addUser")
  body: jsonEncode({"sender": "newUser"}), // 匹配后端ChatMessage结构传参
  headers: asdf,
);

// 其他订阅同理修改
var clientUnSubscribeFn = await _stompClient!.subscribe(
  destination: "/topic/public", // 对应后端@SendTo("/topic/public")
  headers: asdf,
  callback: (frame) {
    print("here" + frame.body!);
  },
);

3. 后端WebSocket配置补充/user代理 #

修改WebSocketConfig，将/user加入消息代理：

@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
    registry.setApplicationDestinationPrefixes("/app");
    registry.enableSimpleBroker("/topic", "/user"); // 添加/user路径
}

4. 后端添加对应消息映射（可选） #

若需保留/app/register发送目标，在后端控制器添加处理方法：

@MessageMapping("/register")
@SendTo("/user/queue/newMember") // 发送到用户专属队列
public ChatMessage registerUser(@Payload ChatMessage chatMessage) {
    return chatMessage;
}

5. Spring Security权限配置（若启用） #

确保WebSocket端点能被访问：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
        .antMatchers("/ws/**").permitAll() // 允许WebSocket端点访问
        .anyRequest().authenticated();
    // 其他安全配置...
}

验证步骤 #

1. 重启后端服务
2. 重新运行Flutter应用，检查控制台是否输出Connected with the following frames
3. 调用sendClientMessage方法，确认后端接收消息、Flutter收到订阅反馈

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