Im trying to make a Spring boot app with websocket communication through lobby's with ID's. When I make a post request to make a lobby it returns a String with a game ID (this works fine). I'm really not that much of a star on the frontend but I got making a game and generating, and retrieving the ID working. Then I want to join a random lobby and retrieve the Game object which the player joins randomly. When I retrieve that data I cannot access it's properties through any way. Anyone know why?

Javascript code:

async function startGame() {
 (async () => {
   const rawResponse = await fetch('http://localhost:8080/game/newgame', {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({name: 'Gerrt'})
   });
   const content = await rawResponse.json();

   console.log(content);

   stompClient.send("/drinkordice/topic/"   content);
        stompClient.subscribe('/topic/'   content, function (greeting) {
                   showGreeting(JSON.parse(greeting.body).content);
               });
 })();
}

function joinlobby(){
(async () => {
   const rawResponse = await fetch('http://localhost:8080/game/joinrandom', {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({name: 'Henk-Jan'})
   });
   const content = await rawResponse.json();

   console.log(content   " "   content['gameID']   " "   content.gameID   " "   JSON.stringify(content));

   stompClient.send("/drinkordice/topic/"   content.gameID);
        stompClient.subscribe('/topic/'   content.gameID, function (greeting) {
                   showGreeting(JSON.parse(greeting.body).content);
               });
 })();
}

Java code:

@RestController
@RequestMapping("/game")
public class DrinkOrDiceController {

    Logger LOG = LoggerFactory.getLogger(DrinkOrDiceController.class);

    @Autowired
    DrinkOrDiceService drinkOrDiceService;

    public DrinkOrDiceController(){

    }

    @PostMapping("/newgame")
    public ResponseEntity<String> startNewGame(@RequestBody String playername) throws Exception {
        LOG.info("Request to make a new game by {}", playername);
        return ResponseEntity.ok((drinkOrDiceService.createGame(playername)));
    }

    @PostMapping("/joinrandom")
    public ResponseEntity<Game> joinRandomGame(@RequestBody String playername) throws Exception {
        LOG.info("Request to join a random game by {}", playername);
        return ResponseEntity.ok((drinkOrDiceService.joinRandomGame(playername)));
    }

The output I get from console.log() on the frontend: console.log() frontend

CodePudding user response：

Well, you have a typo:) you are trying to console.log(content.gameID); but your key is "gameId" with a small "d" as seen in the result of JSON.stringify(content);