CODEWITHSUNDEEP
reactjsspring-bootwebsocket
dvidg
dvidg

Reputation: 139

Issues implementing websockets (Spring backend/React frontend)

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.

Upvotes: 3

Views: 3025

Answers (1)

dvidg
dvidg

Reputation: 139

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.

Upvotes: 4

Related Questions