How to set up lobby for TicTacToe

[Lossfelt]

I've followed the React tutorial for TicTacToe, and after finishing with the Remote Master I thought I would try to set up a Lobby.
However, I'm having some trouble following the documentation on how that is done. It seems pretty straight forward, but I've encountered problems.

After I first included the <Lobby.....> code, I got a nice bit of UI where I could enter a name and create matches. As soon as I clicked a button, though, I started getting error-messages about failing to retrieve list of matches.
I've restartet my server a few times, but the problem persists.
Googling isn't getting me any further, so I'm hoping someone can help.

My guess is that I'm missing something with either the Lobby-client or the server, but I could be completely wrong.

Here is my repository:
https://github.com/Lossfelt/bgio-tutorial

[fixermark]

Can you provide the error messages you are receiving? This will help clarify what the error could be.

[Lossfelt]

Hi Mark, thanks for your reply.
I'm starting to think it might have something to do with my server settings. I tried opening the app in a different browser, one I hadn't used before. The lobby then loaded without problems. When I tried entering a player-name, however, it immediately started throwing errors again. The error was:
failed to retrieve list of matches (typeerror: networkerror when attempting to fetch resource.) refresh@http://localhost:3000/static/js/bundle.js:12199:13

[Lossfelt]

Here are two screen saves of how it looks when I first load the page in Firefox, then how it looks after a little when it starts throwing errors.

[Lossfelt]

Also in Firefox, looking in the console, it seems the error is thrown by bgio-tutorial\node_modules\boardgame.io\dist\esm\react.js, more specifically line 180 which says catch (error) { throw new Error('failed to retrieve list of matches (' + error + ')'); }
I don't understand what this means, though.

[Lossfelt]

I also noticed in the console that there is a CORS error, more specifically that a cross-origin request was blocked and did not succeed.
This I thought I had handled in the server settings with the following code:
const server = Server({ games: [TicTacToe], origins: [Origins.LOCAL_IP], });

I don't understand why I get this error.

[Lossfelt]

When I load the page in Chrome, it takes a while longer before throwing errors. When it finally does throw errors, they are slightly different.
Here is a screen dump and the log files from the console:
localhost-1689004611103.log
localhost-1689004592899.log

[JoshMathie]

I am guessing the IP address you're using is actually your IP address? Try using this within the origins array in the server configuration [Origins.LOCALHOST, Origins.LOCALHOST_IN_DEVELOPMENT] and in your gameServer within the lobby try https://${window.location.hostname}:8000

[Lossfelt]

Hi Josh, thanks for your suggestion.
Yes, the IP address was my actual address, and I tried using the changes you suggested, but sadly it didn't work. I get the exact same errors at the same time as before.

If I understand the error-messages correctly, it's trying to fetch a list of games from the server. This from a file called react.js:
async refresh() { try { this.matches = []; const games = await this.client.listGames(); for (const game of games) { if (!this._getGameComponents(game)) continue; const { matches } = await this.client.listMatches(game); this.matches.push(...matches); } } catch (error) { throw new Error('failed to retrieve list of matches (' + error + ')'); }

The error being thrown seems to come from this part of the code (for clarity, I've not written the code above, it seems to be something included in boardgame.io: bgio-tutorial\node_modules\boardgame.io\dist\esm\react.js).

I don't know what the boardgame.io code includes for the server out of the box, but my server-code is pretty minimal, which led me to think that the issue might come from there:

`const {Server, Origins} = require('boardgame.io/server');
const {TicTacToe} = require('./Game');

const server = Server({
games: [TicTacToe],
origins: [Origins.LOCALHOST, Origins.LOCALHOST_IN_DEVELOPMENT],
});

server.run(8000);`

Looking at the console log it seems that the site is trying to acces https://localhost:8000/games:1, and I haven't set up any routes for that in the server. However, I don't know if that is something the server handles by itself because of some other part of the boardgame.io code.

(Lastly, for some reason Firefox keeps throwing CORS-issues, which Chrome does not. I don't understand why that should be, because Origins is one of the few things the server-code actually is explicit on.)

[JoshMathie]

The error you're receiving is being thrown by your client, what is the output from your server? Would be worth passing a callback to your server.run() method to be sure things are working properly there e.g. server.run(8000,()=>{console.log("server is running...")})

[Lossfelt]

Thanks for the suggestion. The server is running (by default it seems to output the following information when running: INFO: App serving on 8000...).

I added what you said and got the expected output:
` bgio-tutorial@0.1.0 serve
node -r esm src/server.js

server is running...
INFO: App serving on 8000...`

Before I added the lobby-part, the client and server where communicating fine.
Instead of the Lobby-code I used just this code to send the player to the game-client. That worked fine:
{playerchoice ? (<TicTacToeClient playerID={playerchoice} />) : (<div><button onClick={() => handlePlayerchoice('0')}>Player 0</button> <button onClick={() => handlePlayerchoice('1')}>Player 1</button></div>)}

It was when I introduced the Lobby-code that everything stopped working.

[samkim130]

If you are still working on this:

https is the problem
it should be http

[Lossfelt]

Thank you! That got me a lot further! Now everythings works as long as I'm accessing the app from the PC hosting the app and server.
As long as I access through localhost:3000 then everything works fine. However, if I'm accessing through the IP-address (192.168.4.24:3000) then I get the same problem as previously. This problem happens both when I try using another unit (where I have to use the IP-address), as well as when I try to use the IP-address instead of localhost:3000 on the hosting PC.
The error I get is the same as the one mentioned above: #1158 (reply in thread)