boardgameio / boardgame.io

State Management and Multiplayer Networking for Turn-Based Games
https://boardgame.io
MIT License
10k stars 706 forks source link

Tutorial Multiplayer Not Functioning #187

Closed Kikketer closed 6 years ago

Kikketer commented 6 years ago

I feel bad asking this but I'm unable to get the multiplayer portion working with the tutorial. Clicking the cell works for player one and the "reducer" modifies the state but it doesn't seem to get to the server and the "end turn" function doesn't seem to fire.

Here's the repo: https://github.com/Kikketer/octosock

So the only differences I can see are the fact that I put the server code into the /server directory and I'm using an array of clients so that I can launch the debugger on just one. I do see the websocket connecting and frames in there but I don't see any data when clicking on the cells.

Are there any tips on debugging such a situation (teach a developer to fish)? Most of the things provided by this framework are "magic" which isn't a bad thing until you run into a problem like this. I'm probably missing something obvious....

nicolodavis commented 6 years ago

Change your server file from:

require('dotenv').config()
const Server = require('boardgame.io/server').Server
const TicTacToe = require('../src/Game')
const server = Server({ games: [TicTacToe] })
server.run(8000)

to

require('dotenv').config()
const Server = require('boardgame.io/server').Server
const TicTacToe = require('../src/Game').default
const server = Server({ games: [TicTacToe] })
server.run(8000)

Additional reading: link

Feel free to reopen if you think there is a bug in the tutorial that needs to be fixed.

janosimas commented 6 years ago

@nicolodavis I created a branch with a test server

I using to run the server: npx babel-node --presets es2015 src/server.js and to run the client: npm start

Kikketer commented 6 years ago

Thanks for the response! I was able to get it to work by going 100% ES6, I realized I did this on my other projects but wasn't paying attention when building this one. Here's what the updated server code could look like if using ES6:

import * as dotenv from 'dotenv'
import { Server } from 'boardgame.io/server'
import TicTacToe from '../src/Game'

dotenv.config()

const server = Server({ games: [TicTacToe] })
server.run(process.env.PORT)

console.log('Server started: ', process.env.PORT)

Obviously some extra stuff in there like the dotenv but you get the idea. Also i'm using env as my babel preset:

NODE_ENV=development npx babel-node --presets env server/index.js

It might be worth having the server side of the tutorial 100% ES6 if we recommend using babel-node. I could do a pull request on the tutorial if that works.