[英]Flutter websockets + Spring Boot chat application
I'm trying to setup connection between Flutter and Spring boot as backend using websocket, but I came across many problems.我正在尝试使用 websocket 作为后端启动 Flutter 和 Spring 之间的连接,但我遇到了很多问题。 I found in the Internet many tutorials even on StackOverflow but still I can't correctly build my chat application.
我在 Internet 上找到了很多关于 StackOverflow 的教程,但我仍然无法正确构建我的聊天应用程序。 I have been using this tutorial for backend: https://kiberstender.github.io/miscelaneous-spring-websocket-stomp-specific-user/
我一直在将本教程用于后端: https://kiberstender.github.io/miscelaneous-spring-websocket-stomp-specific-user/
I just want to simple print the log on my backend service after incoming message, but I don't know what I'm doing wrong.我只想在收到消息后简单地在后端服务上打印日志,但我不知道我做错了什么。
Flutter code: Flutter代码:
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: "newUser\n",
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);
});
} }
Backend code:后端代码:
@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("*");
}
} }
And the controller和 controller
@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);
In your backend code try this:在您的后端代码中试试这个:
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket-chat").setAllowedOrigins("*");
registry.addEndpoint("/websocket-chat").setAllowedOrigins("*").withSockJS();
}
You don't need to supply the full URL again when subscribing/sending messages.订阅/发送消息时,您无需再次提供完整的 URL。 So this:
所以这:
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: "newUser\n",
headers: asdf);
should be应该
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: "newUser\n",
headers: asdf);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.