WebSocket with Spring Boot and JavaScript

Question

This is my simple attempt to create a WebSocket channel between a JavaScript client and a Java server.

// java websocket server configuration with spring boot
// server port: 8080 set in the "application.yml"

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer{
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket")
                .setAllowedOrigins("*")
                .withSockJS();
    }

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

// js websocket client configuration with "webstomp-client"

import webstomp from 'webstomp-client';

const connection = new WebSocket('ws://localhost:8080/websocket');
const stompClient = webstomp.over(connection);
stompClient.connect(()=>{
  stompClient.subscribe('/app/notification', () => console.log('Connection established with server'));
});

The console shows the following:

WebSocket connection to 'ws://localhost:8080/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

I looked at a lot of other posts, and most of them had to do with allowing the origin. I have tried setting the origin to localhost as well as the local IP address, but without success.

What am I missing? Any help would be tremendous.

Edit: The client is created with create-react-app, if that's relevant.

Edit: The client is on: http:localhost:3000, the server is on: http:localhost:8080.

Could you please show where you are handling the routes app/notification in your server? — edkeveked
– edkeveked, Commented Apr 15, 2018 at 18:05
@edkeveked I have a websocket controller class but it is not doing much at the moment. So I am not handling anything. — Edv Beq
– Edv Beq, Commented Apr 15, 2018 at 18:15
Maybe that this is where the problem comes from. Are you returning something to those that have subscribed with app/notification? — edkeveked
– edkeveked, Commented Apr 15, 2018 at 18:21
@edkeveked I don't think it even gets there. The channel closes before any subscription happens. Does it matter that client and server are on different ports? I wouldn't think so but Id mention it anyways. — Edv Beq
– Edv Beq, Commented Apr 15, 2018 at 18:25
What do you mean by client and server on different ports? Well, it is possible to have the client being served on localhost:4200 and the server on localhost:8080 for instance. The last thing I could mention is maybe to remove the .setAllowedOrigins("*") and to set the CORS at a global level of your application — edkeveked
– edkeveked, Commented Apr 15, 2018 at 18:31

Sergi Almar · Accepted Answer · 2018-04-16 09:46:48Z

4

You are configuring your endpoint with SockJS on the server side but you are not using SockJS on the client side. That's why you get a 200 status code instead of a 101. Either use SockJS on the client side (instead of a raw WebSocket) or remove withSockJS() on the server side.

answered Apr 16, 2018 at 9:46

Sergi Almar

8,4443 gold badges36 silver badges32 bronze badges

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

2 Comments

Edv Beq Over a year ago

Yes - this is it. I also found out last night by trial and error. I am gonna give you the check mark. In order to add sockjs support on the client - do I use the sockjs library instead?

Sergi Almar Over a year ago

Yes, add SockJS on the client and use new SockJS('http://localhost:8080/websocket') instead of new WebSocket('ws://localhost:8080/websocket')

Collectives™ on Stack Overflow

WebSocket with Spring Boot and JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related