Play Chess

I encountered WebSocket for the first time during my day job at the time. I was looking for a way to learn more about the technology behind “full-duplex, bidirectional communication with the server over a single long-lasting connection”.

The bidirectional communication characteristic of WebSocket is pretty cool. I thought about a chess game where two players could play online with each other, and I could leverage this technology for a low latency and reliable gameplay. I initially used Angular to build this project. I’ve updated and replaced Angular with React and React Hooks (to learn React Hooks). Backend side used Node and WebSocket to open and hold connections. It was simple but fun experience building the project. I really like chess ¹.

Features

• A working chess board that you can play with other person over the internet.
• I added moves sound to make it more stimulating (it can be disabled it if it annoys you).
• After a match has ended, the “match lobby” will be open for access, so you can go back again and see the match result and position.

Technologies

• WebSocket
• Node.js
• React.js
• Chessground
• Chess.js

Notes

• After you get the match link, send it over to the other person. Once they join the match, it will automatically notify you on the screen.
• I host a backend server on Heroku (moved to Render.com when they stopped offering free dynos). If the server has been inactive for a while, and you are the first person to interact with the app during that time, it might take a few seconds to spin up. So please be patient until the connection has been established, or you can refresh the app.

Screenshots