Search code examples
javascriptreal-time

How can run JavaScript code for all users at the same time and display the same generated numbers for all users


I have a big problem in my site.

I have in my site a page to generate a random numbers with Spinning Wheel in Javascript.

Code of generating numbers:

function chooseNumbers ()
{
    const wheel = document.querySelector('.circle');

    let deg = 0;

    deg = Math.floor((Math.random() * (360 - 1) + 1));
    wheel.style.transition = 'all 10s ease-out';
    wheel.style.transform = `rotate(${deg}deg)`;

    /**
     * Circle height: 830px
     * Circle width: 830px
     * angle: 36deg
     * 
     * if deg result between this numbers
     * 
     * 0   => 36  = 1
     * 36  => 72  = 2
     * 72  => 108 = 3
     * 108 => 144 = 4
     * 144 => 180 = 5
     * 180 => 216 = 6
     * 216 => 252 = 7
     * 252 => 288 = 8
     * 288 => 324 = 9
     * 324 => 360 = 0
     * 
     * pi = c / d
     */
}

I need to display on my users "IN THE SAME TIME" how the page generate the numbers and how the Spinning Wheel choose the numbers.

That's mean I need to run the same Javascript Code and show the same results to all existing users.

If the page runs JavaScript code for every user It will show different results for each user because I use

Math.random()

to generate the random number.

So I need a way to display the wheel spin to all users at the same time and display the same results that the code generates in JavaScript.

What is the necessary technique to do this method?


Solution

  • You could use a database for this. Theres free ones that you could use to try. The working principle would be, with a different page, in javascript you generate various random numbers and their hour for them to be displayed and then you upload them using PHP to your database. That would be called your backend which is the part the user never gets to see. Now, for each user to see those numbers, you would start the spinning wheel and get the number from the database with PHP too, and then make the wheel stop at that number, in that way it'll the same number for each user and the wheel will keep as long as you keep adding numbers to your database