Flutter websockets + Spring 启动聊天应用程序

Question

我正在尝试使用 websocket 作为后端启动 Flutter 和 Spring 之间的连接，但我遇到了很多问题。 我在 Internet 上找到了很多关于 StackOverflow 的教程，但我仍然无法正确构建我的聊天应用程序。 我一直在将本教程用于后端： https://kiberstender.github.io/miscelaneous-spring-websocket-stomp-specific-user/

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

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);
    });

}

后端代码：

@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("*");
}

}

和 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);

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: "newUser\n",
    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: "newUser\n",
    headers: asdf);