Java Spring boot websocket communication with JS

Question

I have the following WebSocketConfig in my Spring boot app:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }
}

and this code in my controller:

@Autowired
    private SimpMessagingTemplate template;

    @Scheduled(fixedRate = 5000)
    public void getMessage() {
        System.out.println("scheduled");
        this.template.convertAndSend("/topic/updateService", "Hello");
    }

I'm trying to read those messages using my javascript application this way:

let socket = new SockJS(`https://localhost:8443/ws`);
    let stompClient = Stomp.over(socket);

    stompClient.connect({}, () => {
      stompClient.subscribe('/topic/updateService', (data) => {
        console.log("New message!");
        console.log(data);
      });
    }, () => {
      console.log('failed');
    });

Although I'm subscribed to /updateService, I can't get any message.

Console log shows all fine:

Although in my Spring boot app I see scheduled in my console, I get no message in my client.

Any ideas what could have gone wrong?

if you see the stomp.min.js it says in log that connected to server undefined! Isn't that a error! If you are connected to undefinded server then how you are supposed to get messages — Arjun
– Arjun, Commented Oct 10, 2017 at 9:04
I don't think it has something to do with it, but it's impossible to be connected to undefined server, when I change the host in my code I get an error — TheUnreal
– TheUnreal, Commented Oct 10, 2017 at 10:22

Dmitry Zlykh · Accepted Answer · 2017-10-10 10:45:25Z

3

Sorry I don't have enough reputation to leave a comment to your post, so I will reply.

you can enable logging in application.properties to see what actually happens with WS connection.

logging.level.org.springframework.messaging=trace
logging.level.org.springframework.web.socket=trace

connected to server undefined doesn't mean that something is wrong. This line appears every time.
I've tried to reproduce your issue and it works fine on my side. Do you have additional routing or security configuration (I've noticed https and a custom port)? Here is the code in case you need to check:

Controller:

@Controller
public class SomeController {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @Scheduled(fixedDelay = 1000)
    private void send() {
        simpMessagingTemplate.convertAndSend("/topic/updateService", "Hello");
    }
}

Main app & Websocket config (don't forget @EnableWebSocketMessageBroker):

@SpringBootApplication
@EnableScheduling
@EnableWebSocketMessageBroker
public class Main extends AbstractWebSocketMessageBrokerConfigurer {
    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
    }

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }
}

And this is JS code:

<script type="text/javascript">
        var stompClient = null;

        function connect() {
            var socket = new SockJS("http://localhost:8443/ws");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function () {
                stompClient.subscribe('/topic/updateService', function (data) {
                    console.log(data);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            console.log("Disconnected");
        }

</script>

edited Oct 10, 2017 at 10:45

answered Oct 10, 2017 at 10:28

Dmitry Zlykh

4894 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stealth Rabbi Over a year ago

Since this was more of a comment, what was the resolution here, exactly?

Omar Sharaki Over a year ago

In my case, it turned out my controller was sending to topic/updateService, but my broker was registered to /topic and my clients were listening on /topic/updateService (note the leading backslashes). Once I prepended the backslash to the controller's destination (i.e. changing @SendTo("topic/updateService") to @SendTo("/topic/updateService")), the messages went through. In short, I had to make sure my paths matched.

FirePapaya · Accepted Answer · 2019-12-25 12:23:11Z

I know the question is old, but perhaps my answer will help someone else.

I had a similar issue. My task was to keep user updated regarding some ongoing process, so my application had to send every 5 seconds a message.

The front-end Vue.js application is served separately on node. Inside component which had to monitor the task I have added:

<script>    
import SockJS from 'sockjs-client'
const Stomp = require('stompjs')
const socket = new SockJS('http://localhost:8088/monitor/activity',{transports: ['websocket'] })

// Usual Vue-js stuff
methods: {
  subscribe (frame) {
    console.log('Subscribed to: ' + frame)
    this.stompClient.subscribe('/web-socket/activity', (payload) => {
      console.log('Successfully handled message :' + payload)
    })
  },
  connect () {
    this.stompClient = Stomp.over(socket)
    this.stompClient.connect({}, this.subscribe)
  }
},
mounted() {
  this.connect
}
</script>

On server side (Spring Application written in Kotlin) I have added Configuration class

@Configuration
class WebSocketConfig : WebSocketMessageBrokerConfigurer {

    override fun registerStompEndpoints(registry: StompEndpointRegistry) {

        registry.addEndpoint("/monitor/activity")
                .setAllowedOrigins("*")
                .withSockJS()
    }
}

As you may I see, I DO NOT override configureMessageBroker method

In main class I enable web-sockets and scheduling

@SpringBootApplication
@EnableScheduling
@EnableWebSocketMessageBroker
@EnableWebSocket
public class SpringBootVuejsApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootVuejsApplication.class, args);
    }
}

And here is component that sends messages to socket :

@Component
class LoanScheduledCron
@Autowired constructor(
        private val messagingTemplate: SimpMessagingTemplate
) {

    @Scheduled(fixedDelay = 5000)
    fun getSchedulersActivity () {
        messagingTemplate.convertAndSend("/web-socket/activity", "Still active")
    }
}

Please note, that I have to write full destination as a parameter when calling method convertAndSend.

Collectives™ on Stack Overflow

Java Spring boot websocket communication with JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related