javascript - 我已经为单个浏览器实现了 winwheel 应用程序，现在我想同步它的旋转以供所有访问

Question

我已经为单机浏览器实现了 winwheel 应用程序，现在我想为任何机器浏览器同步它的旋转。

我用过..

Winwheel.jsTweenMax.min.js

在单台机器上工作正常，但现在我想同步所有机器。

我正在发布部分代码..winwheel 应该一次旋转所有..应该得到独特的结果

我的代码部分:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/Winwheel.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script>
            setTimeout(function(){ startSpin() }, 20000);
            setTimeout(function(){ timecounting() }, 1000);

            let theWheel = new Winwheel({
                'outerRadius'     : 200,        
                'responsive'      : true,          
                'innerRadius'     : 75,         
                'textFontSize'    : 72,         
                'textOrientation' : 'vertical', 
                'textAlignment'   : 'outer',    
                'numSegments'     : 10,         
                'segments'        :             
                [                               
                   {'fillStyle' : '#ee1c24', 'text' : '1'},
                   {'fillStyle' : '#3cb878', 'text' : '2'},
                   {'fillStyle' : '#f6989d', 'text' : '3'},
                   {'fillStyle' : '#00aef0', 'text' : '4'},
                   {'fillStyle' : '#f26522', 'text' : '5'},                   
                   {'fillStyle' : '#e70697', 'text' : '6'},
                   {'fillStyle' : '#fff200', 'text' : '7'},
                   {'fillStyle' : '#f6989d', 'text' : '8'},
                   {'fillStyle' : '#ee1c24', 'text' : '9'},
                   {'fillStyle' : '#3cb878', 'text' : '0'},                   

                ],
                'animation' :           
                {
                    'type'     : 'spinToStop',
                    'duration' : 10,    
                    'spins'    : 10,     
                    'callbackFinished' : alertPrize,
                    'callbackSound'    : playSound,   
                    'soundTrigger'     : 'pin'       
                },
                'pins' :        
                {
                    'number'     : 10,
                    'fillStyle'  : 'silver',
                    'outerRadius': 10,
                    'responsive' : true, 
                }
            });

            var timecounter = 20;
            var winning_no = '';

            let audio = new Audio('tick.mp3');

            function timecounting()
            { 
                if(timecounter>1){ 
                    timecounter=timecounter-1;
                    setTimeout(function(){ timecounting() }, 1000);
                    $('#timeCntPara').html(timecounter);
                    $('#timeCntPara').show();
                }else{
                    $('#timeCntPara').hide();
                }   
            }

            function playSound()
            { 
                audio.play();
            }

            let wheelSpinning = false;            

            function startSpin()
            {
                $('#timeCntPara').hide();

                if (wheelSpinning == false) {

                    theWheel.animation.spins = 10;

                    theWheel.startAnimation();

                    wheelSpinning = true;
                }
            }

            var delay=0;
            function alertPrize(indicatedSegment)
            {                 
                if (indicatedSegment.text == 'LOOSE TURN') {
                    $('#spinres').html('Sorry but you loose a turn.');
                    $("#spinres").show().delay(2000).fadeOut();
                } else if (indicatedSegment.text == 'BANKRUPT') {
                    $('#spinres').html('Oh no, you have gone BANKRUPT!');
                    $("#spinres").show().delay(2000).fadeOut();
                } else {
                    $('#spinres').html('You have won '+indicatedSegment.text);
                    $("#spinres").show().delay(2000).fadeOut();
                }
                theWheel.stopAnimation(false);
                theWheel.rotationAngle = 0;
                wheelSpinning = false;

                // save spin records in db - start
                winning_no = indicatedSegment.text;
                s = {winning_no:winning_no};                

                jQuery.ajax({
                    type: "post",
                    url: 'php/save.php',
                    data: s,
                    success: function(response) {
                        wait(5000);
                        setTimeout(function(){ startSpin() }, 20000);
                        timecounter=20;
                        setTimeout(function(){ timecounting() }, 1000);
                    }
                })
                // save spin records in db - end
            }

            function wait(ms){
               var start = new Date().getTime();
               var end = start;
               while(end < start + ms) {
                 end = new Date().getTime();
              }
            }
    </script>

请给我个主意..

Answer 1

我希望为此使用推送通知。向所有监听该事件的浏览器推送“旋转”命令。

我用过https://pusher.com/channels之前认为这个或类似的东西可以做你想做的事。在 pusher JS 示例中，您可以触发轮子的旋转而不是发出警报......

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  if (data.message == 'spin') {
    theWheel.startAnimation();
  }
});