Flutter websockets+Spring Boot聊天应用程序

Question

我试图使用websocket在Flutter和Spring引导之间建立连接作为后端，但我遇到了很多问题。我在互联网上发现了许多教程，甚至在StackOverflow上，但我仍然无法正确构建我的聊天应用程序。我一直在后台使用此教程：https://kiberstender.github.io/miscelaneous-spring-websocket-stomp-specific-user/

我只想在收到消息后在后台服务上简单地打印日志，但我不知道我做错了什么。

颤振代码：

try {
StompClient stompClient = StompClient(
config: StompConfig(
url: "ws://10.0.2.2:8080/websocket-chat",
onStompError: (StompFrame frame) {
print(
'A stomp error occurred in web socket connection :: ${frame.body}');
},
onWebSocketError: (dynamic frame) {
print(
'A Web socket error occurred in web socket connection :: ${frame.toString()}');
},
onDebugMessage: (dynamic frame) {
print(
'A debug error occurred in web socket connection :: ${frame.toString()}');
},
onConnect: (StompClient client, StompFrame connectFrame) {
print(
'${client.toString()} connected with the following frames ${connectFrame.body}');
_stompClient = client;
Map<String, String> asdf = {};
var clientUnSubscribeFn = _stompClient.subscribe(
destination: "ws://10.0.2.2:8080/user/queue/newMember",
headers: asdf,
callback: (frame) {
// Received a frame for this subscription
print("here" + frame.body);
});
},
),
);
stompClient.activate();
}
sendClientMessage(String msg) async {
Map<String, String> asdf = {};
var clientUnSubscribeFn = await _stompClient.subscribe(
destination: "ws://10.0.2.2:8080/topic/newMember",
headers: asdf,
callback: (frame) {
// Received a frame for this subscription
print("here" + frame.body);
});
_stompClient.send(
destination: "ws://10.0.2.2:8080/app/register",
body: "newUsern",
headers: asdf);
clientUnSubscribeFn = await _stompClient.subscribe(
destination: "ws://10.0.2.2:8080/user/newUser/msg",
headers: asdf,
callback: (frame) {
// Received a frame for this subscription
print("here" + frame.body);
});

}

后端代码：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/user", "/topic", "/queue");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket-chat").setAllowedOrigins("*");
}

}

和控制器

@MessageMapping("/register") // 3
@SendToUser("/queue/newMember")
public Set<String> registerUser(String webChatUsername) {
logger.info(("reg"));
if (!connectedUsers.contains(webChatUsername)) {
connectedUsers.add(webChatUsername);
simpMessagingTemplate.convertAndSend("/topic/newMember", webChatUsername); // 4
logger.error(connectedUsers.toString());
return connectedUsers;
} else {
return new HashSet<>();
}
}
@MessageMapping("/unregister") // 5
@SendTo("/topic/disconnectedUser")
public String unregisterUser(String webChatUsername) {
logger.info(("unreg"));
connectedUsers.remove(webChatUsername);
return webChatUsername;
}
@MessageMapping("/message") // 6
public void greeting(WebSocketMessage message) {
logger.warn(("mes"));
simpMessagingTemplate.convertAndSendToUser(message.toWhom, "/msg", message);

Answer 1

在后端代码中尝试以下操作：

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

Answer 2

订阅/发送消息时不需要再次提供完整的URL。所以这个：

var clientUnSubscribeFn = await _stompClient.subscribe(
destination: "ws://10.0.2.2:8080/topic/newMember",
headers: asdf,
callback: (frame) {
// Received a frame for this subscription
print("here" + frame.body);
});
_stompClient.send(
destination: "ws://10.0.2.2:8080/app/register",
body: "newUsern",
headers: asdf);

应该是

var clientUnSubscribeFn = await _stompClient.subscribe(
destination: "/topic/newMember",
headers: asdf,
callback: (frame) {
// Received a frame for this subscription
print("here" + frame.body);
});
_stompClient.send(
destination: "/app/register",
body: "newUsern",
headers: asdf);