Sample demo using nodeJS / socket.io
How it works?
- There is a list of customizable players.
Select one and wait for others player…- Other users see live the same selection and the same actions that you make.
- Press start / stop to start time countdown.
- If using Chrome browser, in the end you should see a Desktop Notification.
- Very easy, stupid and full of bugs.
Installation
package.json content:
[code autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]
{
“name”: “Turn-Based socket”,
“version”: “1.0.0”,
“description”: “A Turn-Based socket time-tool.”,
“main”: “index.js”,
“author”: “Alberto Pasca”,
“private”: false,
“license”: “MIT”,
“dependencies”: {
“express”: “3.4.8”,
“engine.io”: “1.6.8”,
“socket.io-parser”: “2.2.6”,
“socket.io-client”: “1.4.5”,
“socket.io-adapter”: “0.4.0”,
“has-binary”: “0.1.7”
}[/code]
Use NPM to install package.json
[code autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]
$ npm install
[/code]
To start server, simply type:
[code autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]$ node .[/code]
or (if you have installed heroku toolbet (https://dashboard.heroku.com/))
[code autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]$ heroku local[/code]
Usually localhost is on port 5000: http://localhost:5000
Demo screenshots:
Players list:
When a user select a player, this one is removed from list.
Users online now:
The selected users (from login page) goes here…
Player selection / Start|Stop:
Select a user to start/stop countdown (turn based)
Every peoples connected to this page, see the live events.
Known bugs:
- a lot. It’s simple starting point project. Less than a MVP.
- If you want to fix, you’re welcome!
Reference:
This example was made editing the socket.io chat example: http://socket.io/
3rd party:
- https://jquery.com/
- http://hilios.github.io/jQuery.countdown/
- Player images from google images.
Download source code here: https://github.com/elpsk/Turn-Based-Web-Socket