0

I'm setting a little website, supposed to count how many people are entering a room. If someone enters the room, the manager clicks on a "+" button, adding 1 to the value. A "-" button is also available. I've already done it using JQuery, but it works only with 1 user active on the website. I'd like to know how to adapt it for several users at the same time, if at least it is possible... All the users shoudl have access to the number in real time, maybe PHP can solve this problem ?

$(document).ready(function(){

var compteur = 0;
const min = 0;
const max = 1200;

$("#resultat").attr('value', compteur);

$('#increase').click(function(){
  if(compteur < max){
    ++compteur;
    $("#resultat").attr('value', compteur);
  }

  if(compteur > max){
    alert("Nombre maximum de personnes atteint !");
  }
});

$('#decrease').click(function(){
  if(compteur > 0){
    --compteur;
    $("#resultat").attr('value', compteur);
  }

  if(compteur < min){
    alert('Impossible de descendre en dessous de 0 personne');
  }
});
});
2
  • socket.io is probably the easiest way for you to accomplish this.
    – delashum
    Feb 16, 2019 at 20:14
  • 3
    To do something that involves more than the current user, you need something in the server side. Code in the client side (such as jQuery) can't ever know what is happening with other people accessing the site.
    – Pedro A
    Feb 16, 2019 at 20:18

2 Answers 2

0

As the project includes realtime interaction, You might be interested in socket.io, which is easy to use and contains both the client library (in Your case to be used in browser) and server (You can use it in Node.js, but there are also unofficial implementations in other languages, e.g. Python);

Or, if you want something more lightweight, You might use WebSockets (which are available as a transport in socket.io, too), in which case You can refer to WebSocket docs - in this case, the server can be written in many languages, which have libraries for a WebSockets server (e.g. WS for Node.js). You mentioned PHP, which is also a possible solution in that case, though it will probably be tougher to do that. If you decide to do it with PHP anyway, you can use the JS WebSockets I mentioned above on the client side and Ratchet in the PHP server.

0
0

You are right, you do need a server-side language(PHP, or any language you prefer) along with your javascript snippet. For this you need to store the number of active users somewhere on the server. Perhaps a database, or if it is just going to count the users, you can store it in a file (which would require you to implement locking the file so that no two users read the same value and change it).

In PHP you would do something like this:

Updated code, to prevent data race.

Create a file counter.php; Place it alongside your html files. The code will be somewhat like this:

<?php
// counter.php

// Increment
if (isset($_POST['increment']))
{
    // Increment in your database
    // UPDATE online_users SET users = users + 1
}

// Decrement
else if (isset($_POST['decrement']))
{
    // Decrement in your database
    // UPDATE online_users SET users = users - 1
}

else if (isset($_GET['onlineusers']))
{
    // Read from your database and output
    // SELECT users FROM online_users
}

?>

Then in you jQuery code, you would simple make POST requests to this file to increment or decrement the number of users in the file.

Increment:

jQuery.post("counter.php?increment");

Decrement:

jQuery.post("counter.php?decrement");

To get the currently active users:

jQuery.get("counter.php?onlineusers", function(numusers) {
    compteur = numusers;
    $("#resultat").attr('value', compteur);
});

NOTE: Make sure you check your MAX & MIN users condition in counter.php file also before incrementing or decrementing! I didn't do it :P

2
  • Have you ever heard of race conditions? This makes your solution faulty
    – artus9033
    Feb 16, 2019 at 20:33
  • Yes, my bad. Updated my answer.
    – AmN
    Feb 16, 2019 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.