CODEWITHSUNDEEP
javascriptjavaspring-bootstompsockjs
mistertl
mistertl

Reputation: 107

STOMP Spring Boot clientside ReferenceError: SockJS is not defined

I want to create a simple chatapplication with STOMP Spring boot and a client, which runs later on an other domain. I created several classes and function but I can't find the solution of this error. It would be great if you could take a look at this :)

So I have two Spring Boot classes:

My WebSocketConfig looks like this:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
    
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").setAllowedOrigins("*").withSockJS();

    }

    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic/", "/queue/");
        config.setApplicationDestinationPrefixes("/app");
    }

My Controller looks like this:

@Controller
public class StompController {
    
    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public ChatMessage send(ChatMessage message) throws Exception {  
        return message;
    }

My Spring Boot dependencies regarding this topic:

<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>5.2.2.RELEASE</version>
        </dependency>
        
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-messaging</artifactId>
            <version>5.2.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.10.2</version>
        </dependency>
        
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.10.2</version>
        </dependency>

Finally, my client connect function looks like this (vanilla JS):

  function connect() {
        var socket = new SockJS("http://localhost:8080/chat");
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
          setConnected(true);
          console.log("Connected: " + frame);
          stompClient.subscribe(
            "/chat/topic/messages",
            function (messageOutput) {
              showMessageOutput(JSON.parse(messageOutput.body));
            }
          );
        });
      }

Somehow I always receive the error: ReferenceError: SockJS is not defined

enter image description here

Do you may the solution of this problem without jQuery?

Upvotes: 2

Views: 1412

Answers (1)

Lee Shu Yun
Lee Shu Yun

Reputation: 1

I had the same problem, and found out it was because stompjs and sockjs files were being loaded from the CDN. You need to download and put sockjs and stompjs files into the /resources/public/js folder where Spring Boot will automatically add them.

Then link the scripts in index.html like so:

<head>
<script src="js/stomp.js"></script>
<script src="js/sockjs.min.js"></script>
</head>

See: https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

Upvotes: 0

Related Questions