flutter+springboot+websocket

### Flutter与Spring Boot通过WebSocket实现双向通信 #### 配置Spring Boot端的WebSocket支持 为了使Spring Boot应用程序能够处理WebSocket连接，需要创建一个配置类来设置消息代理和其他必要的参数[^1]。 ```java @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("/ws").withSockJS(); // 注册STOMP终端并启用SockJS回退机制 } } ``` 此代码片段定义了一个`WebSocketConfig`类，它实现了`WebSocketMessageBrokerConfigurer`接口，并重写了两个方法：一个是用来配置消息代理以及指定哪些路径下的目的地应该被当作是客户端订阅的目的地；另一个则是注册了WebSocket端点以便前端可以建立连接。这里还启用了SockJS协议的支持，这允许浏览器即使在网络环境不理想的情况下也能维持稳定的连接[^2]。 #### 创建控制器以接收来自Flutter的消息并向其发送响应 为了让服务器能接收到从移动设备发出的信息并且做出回应，在服务端还需要编写相应的控制逻辑： ```java @Controller public class ChatController { @MessageMapping("/chat.sendMessage") @SendTo("/topic/messages") public Message sendMessage(@Payload Message message) throws Exception { Thread.sleep(1000); // 模拟延迟 return new Message(message.getFrom(), "Hello, " + message.getContent()); } static class Message{ private String from; private String content; // 构造函数、getter和setter省略... public Message(String from, String content){ this.from = from; this.content = content; } public String getFrom() { return from; } public String getContent() { return content; } } } ``` 上述代码展示了如何利用`@MessageMapping`注解映射特定目的地址上的入站消息到处理器的方法上，而`@SendTo`则指定了返回的数据应当推送给哪个频道中的所有已订阅者。在这个例子中，每当有新消息到达时都会触发一次回复操作，模拟了一种简单的聊天室功能[^3]。 #### 在Flutter侧集成WebSocketClient库并与后端交互 对于移动端而言，则要借助于第三方包如`web_socket_channel`来进行网络层面上的操作。下面是一个简化版的例子说明怎样初始化通道对象并通过它收发数据流： ```dart import 'package:flutter/material.dart'; import 'package:web_socket_channel/io.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final channel = IOWebSocketChannel.connect('ws://localhost:8080/ws'); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('WebSocket Demo')), body: Center(child: StreamBuilder( stream: channel.stream, builder: (context, snapshot) { if(snapshot.hasData && !snapshot.hasError && snapshot.data != null){ return Text("${snapshot.data}"); }else{ return const CircularProgressIndicator(); } }, )), floatingActionButton: FloatingActionButton( onPressed: (){ channel.sink.add("Hello Server!"); }, child: Icon(Icons.send), ), ) ); } @dispose(){ channel.sink.close(); } } ``` 这段Dart程序构建了一个小型的应用界面，其中包含了一个按钮用于向远端发送字符串形式的消息，还有一个区域显示由服务器传回来的内容。当按下浮动按钮的时候就会调用`sink.add()`方法把信息写入输出缓冲区从而触发改变事件传播给对方监听器。