WebSocket Handshake - Unexpected response code 200 - AngularJs and Spring Boot

Question

When I tried to establish websocket communication between AngularJS app and Spring Boot I'm getting the error: Error during websocket handshake - Unexpected response code: 200.

Here is my JS code:

function run(stateHandler, translationHandler, $websocket) {
    stateHandler.initialize();
    translationHandler.initialize();

    var ws = $websocket.$new('ws://localhost:8080/socket'); // instance of ngWebsocket, handled by $websocket service

    ws.$on('$open', function () {
        console.log('Oh my gosh, websocket is really open! Fukken awesome!');  
    });

    ws.$on('/topic/notification', function (data) {
        console.log('The websocket server has sent the following data:');
        console.log(data);

        ws.$close();
    });

    ws.$on('$close', function () {
        console.log('Noooooooooou, I want to have more fun with ngWebsocket, damn it!');
    });
}

And here is my Java code:

WebsocketConfiguration.java

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

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

WebsocketSecurityConfiguration.java

@Override
protected void configureInbound(MessageSecurityMetadataSourceRegistry messages) {
    messages
        // message types other than MESSAGE and SUBSCRIBE
        .nullDestMatcher().authenticated()
        // matches any destination that starts with /rooms/
        .simpDestMatchers("/topic/tracker").hasAuthority(AuthoritiesConstants.ADMIN)
        .simpDestMatchers("/topic/**").permitAll()
        // (i.e. cannot send messages directly to /topic/, /queue/)
        // (i.e. cannot subscribe to /topic/messages/* to get messages sent to
        // /topic/messages-user<id>)
        .simpTypeMatchers(SimpMessageType.MESSAGE, SimpMessageType.SUBSCRIBE).denyAll()
        // catch all
        .anyMessage().denyAll();
}

Does anyone have an idea how to fix this problem?
Thank you in advance!

Luka Špoljarić · Accepted Answer · 2018-09-18 07:11:38Z

51

I had a similiar problem, I was testing my websocket connection using an chrome plugin (Simple WebSocket Client) and was trying to connect to ws://localhost:8080/handler/ which is defined in my code as registry.addEndpoint("/handler").setAllowedOrigins("*").withSockJS(); but unexpected error 200 was occuring. I've fixed this by appending /websocket to my client request string on the chrome extension, so what you could try is to change in your JS file the following line:

var ws = $websocket.$new('ws://localhost:8080/socket');

to

 var ws = $websocket.$new('ws://localhost:8080/socket/websocket');

I dont know the reason why this fixed it in my case i just randomly stumbled upon it, if some1 could clarify it more it would be really nice :)

answered Sep 18, 2018 at 7:11

Luka Špoljarić

1,0091 gold badge13 silver badges24 bronze badges

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

9 Comments

Maj Over a year ago

I found that configuring spring with .withSockJS(); means to have to add 'websocket'. I assume because you're providing a fall back option? If you remove .withSockJS(); you don't need to append websocket. Thanks for your answer btw!

Peter Catalin Over a year ago

Thanks, you saved my evening! Does this show up in the documentation? I couldn't find anything...

Binakot Over a year ago

This is the correct answer. When you use withSockJS(), you have to add /websocket to your url. Without SockJS you have to use your url from WebSocketConfiguration.

mkeathley Over a year ago

This worked for me as well but drives me crazy because I haven't been able to find out in the code why it works. I am walking through everything but it seems like a hack more than a correct solution.

kidnan1991 Over a year ago

@PeterCatalin You can check the suffix /websocket at link > github.com/sockjs/…

|

Josef Veselý · Accepted Answer · 2019-08-28 08:54:59Z

5

Can you try this WebsocketConfiguration configuration:

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

so you have both websocket and SockJS configurations?

answered Aug 28, 2019 at 8:54

Josef Veselý

1221 silver badge4 bronze badges

2 Comments

Reg Whitton Over a year ago

I think only the first configuration of the endpoint will be used with your code.

Reg Whitton Over a year ago

The .withSockJS() should configure the endpoint to fallback to SockJS when websockets are not available in the browser. However, if you use .withSockJS() then you also seem to need your web client to also be setup to use it, or you will get the 200 status during the negotiation. Compare: stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/… with stomp-js.github.io/guide/stompjs/….

Deadron · Accepted Answer · 2020-01-28 18:50:03Z

1

You need to use a sockJS client if you configure it to use sockJS on your websocket endpoint.

answered Jan 28, 2020 at 18:50

Deadron

5,2891 gold badge18 silver badges28 bronze badges

Collectives™ on Stack Overflow

WebSocket Handshake - Unexpected response code 200 - AngularJs and Spring Boot

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related