Issues implementing websockets (Spring backend/React frontend)

Question

I am trying to make a realtime web application (a virtual multiplayer board-game). I started with HTTPs requests, but I am now trying to switch to websockets. I am using a React frontend and a Spring Boot backend. I now realise I need to be creating websockets, but I am having trouble implementing them.

Using standard websocket objects in react worked fine to a test server (echo.websocket.org), but most guides online seemed to suggest using STOMP endpoints. It seems that I can't use the generic websocket object if I used STOMP endpoints in my backend. Considering that the data I want to send is a small array (eg coordinate of a player) to all clients connected to the server, is STOMP the correct protocol or can I make this simpler?

Part of a react component in frontend.

import React from 'react';
import Stomp from 'stompjs';

componentDidMount() {

    const ws = ("ws://localhost:8080/player");
    var client = Stomp.client(ws);
    client.connect({}, function() {
        client.send("/location/update", {}, "coord: [3,2]");
    });
}

Relevant controller in backend.

@Controller
public class playerController {

public Player b = new Player("a", 1, 1, 1);

@MessageMapping("/player/location/update")
@SendTo("/playerLocation")
public int[] validClick(String value) throws Exception {
    Thread.sleep(1000);

    JSONObject temp = new JSONObject(value);
    JSONArray val = temp.getJSONArray("coord");
    int[] coord = {val.getInt(0), val.getInt(1)};
    b.updateLocation(coord);

    int[] newCoord = b.getLocation();
    System.out.println(newCoord[0] + "," + newCoord[1]);
    return b.getLocation();
}

Config file: WebsocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/playerLocation");
    config.setApplicationDestinationPrefixes("/api");
}

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

Everything compiles fine, but when looking at the network developer tool in browser for the frontend, the websocket has a 404 error failed to connect. This seems to suggest that the backend is the problem, but I am not sure. Any advice is appreciated.

You prefix the application with "/api", but I don't see anywhere else you're using that prefix. — Ben R.
– Ben R., Commented Nov 16, 2018 at 16:00
@Seraph I have tried inserting /api in ws (localhost:8080/api/player) and in client.send (/api/location/update) and still a 404. Where would you suggest? — dvidg
– dvidg, Commented Nov 16, 2018 at 16:41

dvidg · Accepted Answer · 2018-11-19 11:47:33Z

4

In the end I worked out the problem, the formatting for our websockets was actually correct. The issue was that our file structure was not correct (so webSocketConfig.java was in the wrong package) and our Pom.xml was wrong. We had dependencies for Spring websockets not Spring Boot websockets, and similarly when rearranging the file structure, we had introduced errors in package arrangements.

My advice to anyone struggling with similar issues: follow a tutorial such as this independently to get an idea about the correct file and package structure, and then try to adapt your setup to match.

answered Nov 19, 2018 at 11:47

dvidg

1391 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

Issues implementing websockets (Spring backend/React frontend)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related