Invalid SockJS path /topic/mytopic - required to have 3 path segments

I've got a spring boot app in which I'm adding the websocket feature so that websocket client can make subscription request to subscribe messages off the websocket topic.

In my controller's method, I've added an annotation @SubscribeMapping("/topic/mytopic").

My WebSocketConfig looks like this:

@Configuration
@ComponentScan
@EnableWebSocket
public class WebSocketConfig extends WebSocketMessageBrokerConfiguratioSupport{
   @Override
   public void registerStompEndpoints(StompEndpointRegistry registry){
     registry.addEndpoint("/my-app")
             .setAllowedOrigin("*")
             .withSockJS();
   }

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

When I go to the browser and type:

http://localhost:<MY_PORT>/my-app

Then I get a response "Welcome to SockJS!". This indicates that Websocket server is indeed up and running.

But to my surprise, when I'm using my Postman's Websocket feature and trying to do a websocket subscription using the url:

ws://localhost:<MY_PORT>/my-app/topic/mytopic

This error is logged in the console: Invalid SockJS path /topic/mytopic - required to have 3 path segments

and the connection gets disconnected automatically.

Am I doing something wrong here? Please advise.

postman can connect but it not support subcribe and publish on ws. You can use this html/js code to test your local websocket



    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello WebSocket</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@stomp/[email protected]/bundles/stomp.umd.min.js"></script>            
            <script>
                const stompClient = new StompJs.Client({
                    brokerURL: 'http://localhost:8080/ws' // 'http://localhost:8080/my-app' in your case
                });

                stompClient.onConnect = (frame) => {
                    setConnected(true);
                    console.log('Connected: ' + frame);
                    stompClient.subscribe('/topic/messages', (greeting) => {//url to subcribe
                        showGreeting(JSON.parse(greeting.body).content);
                    });
                };

                stompClient.onWebSocketError = (error) => {
                    console.error('Error with websocket', error);
                };

                stompClient.onStompError = (frame) => {
                    console.error('Broker reported error: ' + frame.headers['message']);
                    console.error('Additional details: ' + frame.body);
                };

                function setConnected(connected) {
                    $("#connect").prop("disabled", connected);
                    $("#disconnect").prop("disabled", !connected);
                    if (connected) {
                        $("#conversation").show();
                    } else {
                        $("#conversation").hide();
                    }
                    $("#greetings").html("");
                }

                function connect() {
                    stompClient.activate();
                }

                function disconnect() {
                    stompClient.deactivate();
                    setConnected(false);
                    console.log("Disconnected");
                }

                function sendName() {
                    const chatMessage = {
                        type: 1, // or any type you define
                        content: $("#name").val(),
                        sender: 'yourSenderName' // replace with the actual sender name
                    };
                    stompClient.publish({
                        destination: "/app/sendMessage/abcd",////url to send
                        body: JSON.stringify(chatMessage)
                    });
                }

                function showGreeting(message) {
                    $("#greetings").append("<tr><td>" + message + "</td></tr>");
                }

                $(function () {
                    $("form").on('submit', (e) => e.preventDefault());
                    $("#connect").click(() => connect());
                    $("#disconnect").click(() => disconnect());
                    $("#send").click(() => sendName());
                });


            </script>
    </head>
    <body>
    <noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
        enabled. Please enable
        Javascript and reload this page!</h2></noscript>
    <div id="main-content" class="container">
        <div class="row">
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="connect">WebSocket connection:</label>
                        <button id="connect" class="btn btn-default" type="submit">Connect</button>
                        <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                        </button>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name">What is your name?</label>
                        <input type="text" id="name" class="form-control" placeholder="Your name here...">
                    </div>
                    <button id="send" class="btn btn-default" type="submit">Send</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table id="conversation" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Greetings</th>
                    </tr>
                    </thead>
                    <tbody id="greetings">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </body>
    </html>

Follow is code backend

Recommended topics

Hot tags