Getting WebSocket connection to 'ws://localhost:9955/essence/fecf/maker-checker/notification/notify/272/ruxkoajx/websocket' failed: with springboot + SockJS

[PSHREYASHOLLA]

We have a spring-boot application which runs on tomcat which has only back end server side code(Java). For the front end UI component runs on a different server and is connected to back end server through rest service calls.

On some event triggered on back end server, the back end server should be able to push some messages to the front end UI component through websockets.

As I do understand websockets are designed for duplex scenarios but for now we do not have a requirement of sending messages from front end UI component to back end server component.

So I tried designing our code as below to send messages from back end server component to the front end UI component.

Back end server side:

Added following piece of code to register stompclient and configure message broker,

@configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/maker-checker/notification/topic");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/maker-checker/notification/notify").setAllowedOriginPatterns("*");
    registry.addEndpoint("/maker-checker/notification/notify").setAllowedOriginPatterns("*").withSockJS(); 
}

}
And I have created a Notifier class which will be called as a Java API by the events who wants to send messages to front end UI component.

@service
public class WebSocketNotifier implements Notifier {
private final SimpMessagingTemplate simpMessagingTemplate;

public WebSocketNotifier(SimpMessagingTemplate simpMessagingTemplate) {
    this.simpMessagingTemplate = simpMessagingTemplate;
}   
@Override
public void send(String recipient, String message) {
    // TODO Auto-generated method stub
    NotificationMessage notificationMessage = new NotificationMessage(recipient, message);
     simpMessagingTemplate.convertAndSend("/maker-checker/notification/topic", 
             JsonHelper.getInstance().writeJsonValue(notificationMessage));
}

}
Front end UI component side

The client looks like,

var stompClient = null;

        function setConnected(connected) {

            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            
            var socket = new SockJS('http://localhost:9955/essence/fecf/maker-checker/notification/notify');
            stompClient = Stomp.over(socket);
            
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/maker-checker/notification/topic', 
                function(messageOutput) {
                    showMessageOutput(JSON.parse(messageOutput.body));
                });
            });
        }

[github-actions]

This issue has been inactive for 30 days. It will be in closed in 5 days without any new activity.