About ChessHub.io


ChessHub.io is an attempt to make a non trivial real-time multiplayer gaming web application using the following technologies:

Client side

• HTML5, CSS3, Twitter bootstrap and Font awesome to make a nice looking UI
• JQuery combined with the inevitable Javascript utilities (Lodash, Moment.js, Messenger.js and Highcharts) for client side logic
• Socket.io client to make real time gaming possible
• Chess.js and Chessboard.js for everything related to chess

Server side

• Node JS as Web server
• Express JS as Web framework
• Passport JS as authentication middleware
• Socket.io server to make real time gaming possible
• Handlebars.js to easily render HTML templates
• Mongo DB along with Mongoose

Why Chess?

• Because it is a good use case for real-time multiplayer gaming
• Because every time you look for a real-time application example on the web, you end up on chat applications, so I decided to change the subject :-)
• Because I am a chess junkie!

Goals

The goal of ChessHub.io is not to provide a fully featured web application to play chess but to provide a non trivial application serving as an example of modern web application using the aforementioned technologies.

Apart from chess logic, here is a list of reusable features:

• Application structure and setup
• User authentication and registration process (/login & /register)
• Real time multiplayer gaming logic (See gaming logic section)
• RESTful API (/api)
• Real time monitoring dashboard (/monitor)
• "TV" page to broadcast any real-time content (/tv)

Even though the application is related to chess, it is easy to change the domain model along with application logic and keep/adapt the application structure.

Gaming logic

ChessHub.io uses a simple gaming sequence through Socket.io that works for 2+ players. Here is a simplified diagram of most relevant events:

Build and Run the application

Prerequisites

• Node JS
• Mongo DB up and running on the default port (27017) and using the default database (test)

Run the application

$> npm install
$> node initData.js
$> node .

Browse the following address: http://localhost:3000

You can register a new account or sign in with the following credentials: [email protected] / foobar

Note: The initData.js script will populate Mongo DB with some data so you can use the application.

Screen shots

Home page

Playing chess in real time

Watch live game

Real time monitoring dashboard

Contribution

I made ChessHub.io primarily to learn how to make this kind of real-time applications with a non hello world use case.

I am aware of the excellent MEAN.io project, but I decided to go from the ground up without code generation to understand how things work behind the scene.

I am not an expert in all these technologies, so there are probably some points of improvement in the application design, structure or code.

If you believe there is best practice I have not followed, please let me know by opening an issue on the issue tracker. Pull requests are welcome!

License

ChessHub.io is released under the MIT license (see LICENSE file).