Imagine that I have an app that only shows the button and the user is able to click on this button. Below the button there is a counter of clicks. It will display a sum of all clicks from all user. The idea is similar to the cookie clicker game, but I would like to make this like a multiplayer game.
Is this possible to see this counter in real time in app ?
I was wondering if I can use here the Socket.IO.
Assuming you know how to run a node app, here is a very basic example:
File server.js
var express = require('express');
var app=express();
var http = require('http').Server(app);
var server = require('socket.io')(http);
var port=89;
var counter=0;//Initial counter value
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
server.on('connection', function(socket)
{
console.log('a user connected');
//on user connected sends the current click count
socket.emit('click_count',counter);
//when user click the button
socket.on('clicked',function(){
counter+=1;//increments global click count
server.emit('click_count',counter);//send to all users new counter value
});
});
//starting server
http.listen(port, function()
{
console.log('listening on port:'+port);
});
File index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Socket.IO Clicker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<h1 style="text-align: center">Click Counter</h1> </div>
<div class="row">
<div class="col-md-12 ">
<p style="text-align: center"><button id='btn_click' class="bnt btn-lg btn-success">Click Me!</button></p>
<p style="text-align: center">Click counts:<span id="counter"></span></p>
</div>
</div>
</div>
<script>
$(function () {
var socket = io();//connect to the socket
socket.on('connect',function()
{
console.log('Yeah I am connected!!');
});
//Listen from server.js
socket.on('click_count',function(value)
{
$('#counter').html(value);//Set new count value
});
//Says to server that the button has been clicked
$('#btn_click').click(function()
{
socket.emit('clicked');//Emitting user click
});
});
</script>
</body>
</html>
File package.json
{
"name": "ClickME",
"version": "0.0.1",
"description": "Multiclick",
"dependencies": {
"express": "4.10.2",
"socket.io": "1.7.2"
}
}
Localhost usage
then open your browser and open multiple tabs on:
Enjoy :) Hope this helps.
In node.js socket connection (server port) is shared between child processes (cluster mode: https://nodejs.org/api/cluster.html ). You can also scale web sockets among several machines (https://socket.io/docs/using-multiple-nodes/). If you are going to create small app you will probably have one server (with many processes) and you can create then a simple queue which will gather all increments. Remember that TCP/IP will ensure you will get web socket requests in the order in which they have been generated. This queue will make/sync requests to your DB. In case of many servers the app scaling will be more complicated. Then the simple app queue will be replaced with your DB (and proper isolation level) or with e.g. redis or rabbitmq. PS. Socket.io is good choice.
