Summary:

NaN is appended to player.id on the client-side after interpolation. This happens after the second update is received from the server (i.e. the first time interpolation is performed).

Steps to reproduce:

1. Add console.log(me.id); to the start of the render() function in src/client/render.js.
2. Start the server with npm run develop from the command line.
3. Visit localhost:3000.
4. Open dev tools (ctrl + shift + j on Windows).
5. Join the game by clicking on PLAY.

Expected results:

My socket id (e.g. ljLSqzmUSc5ZGEf5AAAC) is logged to console repeatedly.

Actual results:

1. My socket id is logged to console 6 times (e.g. ljLSqzmUSc5ZGEf5AAAC).
2. My socket id appended with NaN (e.g. ljLSqzmUSc5ZGEf5AAACNaN) is logged to console repeatedly.

Additional information:

I encountered this bug when trying to implement a chat feature. Each chat object had a reference to it's parentId without NaN appended to it. I was unable to match chat objects to players in the render() function in src/client/render.js because the player id's had changed to have NaN appended to them.

can someone please help me

i copied my terminal emulator below

pi@raspberry:~$ git clone https://github.com/vzhou842/example-.io-game.git
Cloning into 'example-.io-game'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 632 (delta 0), reused 0 (delta 0), pack-reused 629
Receiving objects: 100% (632/632), 404.26 KiB | 0 bytes/s, done.
Resolving deltas: 100% (338/338), done.
pi@raspberry:~$ cd example-.io-game/
pi@raspberry:~/example-.io-game$ npm install
(node:6808) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
npm WARN package.json [email protected] No repository field.
npm ERR! Error: Method Not Allowed
npm ERR!     at errorResponse (/usr/share/npm/lib/cache/add-named.js:260:10)
npm ERR!     at /usr/share/npm/lib/cache/add-named.js:203:12
npm ERR!     at saved (/usr/share/npm/node_modules/npm-registry-client/lib/get.js:167:7)
npm ERR!     at FSReqWrap.oncomplete (fs.js:135:15)
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/npm/npm/issues>

npm ERR! System Linux 4.19.66-v7+
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /home/pi/example-.io-game
npm ERR! node -v v8.11.1
npm ERR! npm -v 1.4.21
npm ERR! code E405
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/pi/example-.io-game/npm-debug.log
npm ERR! not ok code 0

Title says it all. The project is modular enough that unit tests would be useful and should be easy to do.

The IO game, even on the website (the example), is broken.

The tutorial is really great! One thing that I liked about it is that it is super close to being completely usable on glitch.com without changes.

You could make a glitch import from GitHub button: https://github-import.glitch.me/
That would let someone instantly clone the git the repo and have the example io game hosted for free. People can then immediately tweak and play around with it in the glitch online editor without even downloading or installing anything.

The only changes I needed to make to have it start in glitch was change package.json to build when the server starts:

 "start": "npm run build && cross-env NODE_ENV=production node src/server/server.js"

And change the websocket server to use wss in client/networking.js:

const socket = io(`wss://${window.location.host}`, { reconnection: false });

Error message encountered when running npm run develop

Error: error:0308010C:digital envelope routines::unsupported

Looks like there is a breaking change in node 17 and beyond due to changes in how crypto works. Found a workaround here https://stackoverflow.com/a/72197793

Will submit PR for this fix.