'WebSocket connection issue in spring boot

I configured my WebSocket in spring boot. But when I sign in my angular website in browser console , I saw problem with stomp connection. I found a lot of information about config Stopm in backend and frontend. What have I done wrong ?

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/usr");
        registry.setApplicationDestinationPrefixes("/app");
        registry.setUserDestinationPrefix("/usr");
    }

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

    @Override
    public boolean configureMessageConverters(List<MessageConverter> messageConverters) {
        DefaultContentTypeResolver resolver = new DefaultContentTypeResolver();
        resolver.setDefaultMimeType(MimeTypeUtils.APPLICATION_JSON);
        MappingJackson2MessageConverter converter = new MappingJackson2MessageConverter();
        converter.setObjectMapper(new ObjectMapper());
        converter.setContentTypeResolver(resolver);
        messageConverters.add(converter);
        return false;
    }
}

My controller

@MessageMapping("/chat")
public void sendMessage(@Payload ChatMessage chatMessage) {
    Optional<String> chatId = chatRoomService
            .getChatId(chatMessage.getSenderId(), chatMessage.getRecipientId(), true);
    chatMessage.setChatId(chatId.get());

    ChatMessage save = chatMessageService.save(chatMessage);
    simpleMessagingTemplate.convertAndSendToUser(
            String.valueOf(chatMessage.getRecipientId()), "/queue/messages",
            new ChatNotification(
                    save.getId(),
                    save.getSenderId(),
                    save.getSenderName()
            )
    );

}

My angular frontend connection to ws

 connection() {
    this.ws = new SockJS('http://localhost:2797/ws');
    this.stompClient = Stomp.over(this.ws);
    this.stompClient.connect({}, this.onConnected, this.onError);
  }

  onConnected = () => {
    console.log('connected');
    console.log(this.sessionUser);
    this.stompClient.subscribe(
      '/usr/' + this.sessionUser.id + '/queue/messages',
      this.onMessageReceived
    );
  }

  onError = (error) => {
    console.log(error);
  }

  onMessageReceived = (msg) => {
    if (msg.body) {
      const message = JSON.parse(msg.body);
      this.chatMessages.push(message);
    }
  }

  sendMessage(msg: NgForm) {
    const message = msg.form.value.msg.trim();
    
    if (message && this.stompClient) {
      const newMsg = {
        senderId: this.sessionUser.id,
        recipientId: this.selectUser.id,
        senderName: this.sessionUser.username,
        recipientName: this.selectUser.username,
        content: message,
        timestamp: new Date()
      };
      this.stompClient.send('/app/chat', {}, JSON.stringify(newMsg));
      this.chatMessages.push(message);
    }
    
  }

My problem with connection to Stomp

My problem when I send msg



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source