javascript - 如何每隔几秒在php中刷新一个具有打印语句和图像功能的div

Question

我正在尝试构建一个浏览器纸牌游戏，主要使用 PHP 和一些其他有用的语言来测试和扩展我的 PHP 知识，这是我一直想做的事情。但是我阅读并尝试实现的所有在线解决方案都行不通，而且我也不知道为什么。我有这样的逻辑:

//find game form
        print "<form method='post' action='game.php'>
        <label>Enter host generated game #</label><br>
        <label><input type='text' name='gamenumber'></label><br>
        <label><input type='submit' name='findgame' value='FindGame'></label><br><br>
        </form>";

        //host game button
        print "<form method='post' action='game.php'>
        <label><input type='submit' name='hostgame' value='HostGame'></label>
        </form>";

//game logic



if(isset($_POST['hostgame'])) 
    {
        $roomnumber = rand();
        print $roomnumber;

        insertField($Ausername,$roomnumber); //insert field GUI

        //link game to host for future field printing
        $query = "UPDATE game".$roomnumber." SET host='".$Ausername."' WHERE host='null'";
        $result = mysqli_query($link, $query);

        print "<div id='quote'>"; //populate host just disappears <meta http-equiv='refresh' content='5' />

        //populates self and opponents in hosts perspsective
        populatehost($roomnumber); 

        print "</div>";


    }

    if(isset($_POST['findgame'])) //this processes after user submits data.
    {
        $roomnumber = $_POST['gamenumber'];
        $_SESSION['gamenumber'] = $_POST['gamenumber'];

        //link game to find for future field printing
        $query = "UPDATE game".$roomnumber." SET find='".$Ausername."'WHERE find='null'";
        $result = mysqli_query($link, $query);

        print "<form method='post' action='game.php'>
        <label><input type='submit' name='startgame' value='StartGame'></label>
        </form>";

        //populates self and opponents in finds perspsective
        populatefind($roomnumber); 

    }


    if(isset($_POST['startgame'])) //this processes after user submits data.
    {
        print "<br>Game started.<br>";

        print "heads or tails?\n\n";

        print "<form method='post' action='game.php'>
        <label><input type='text' name='headstails'></label><br>
        <label><input type='submit' name='select' value='Select'></label><br><br>
        </form>";

        //finder always starts game
        populatefind($_SESSION['gamenumber']);
    }

    $gameStatus="";
    $flip = rand(1,2);
    $coin = "heads";
    $gameStarted = "game not started";

    if($flip==1)
        $coin="heads";
    else if($flip==2)
        $coin="tails";

    if(isset($_POST['headstails'])) //this processes after user submits data.
    {
        if($_POST['headstails']==$coin)
        {
            print "find game player goes first";
            $gameStarted = "game started";
            //notify find game player he goes first
            //do logic where he goes first
        }
        else
        {
            print "host game player goes first";
            $gameStarted = "game started";
            //notify host game player he goes first
            //do logic where he goes first
        }

        populatefind($_SESSION['gamenumber']);
    }

这是我尝试粘贴在页面底部的 jquery 函数。

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js%22%3E%3C/script%3E">
    jQuery(function () {
        var $els = $('div[id^=quote]'),
            i = 0,
            len = $els.length;

        $els.slice(1).hide();
        setInterval(function () {
            $els.eq(i).fadeOut(function () {
                i = (i + 1) % len
                $els.eq(i).fadeIn();
            })
        }, 2500)
    })
</script>

</body>
</html>

所以我能够为主持人和发现者打印该字段，一旦发现者抛硬币，它就会从他们的 Angular 来看谁先走..但我很难让它出现在其他玩家的看法。我正在考虑通过使用执行所有打印的功能刷新 div 来实现它，但无论如何似乎都没有用。我以多种不同的方式尝试了 php sleep 方法，我尝试了一些 jquery 函数，但没有任何效果。顺便说一下，populate host 和 populate find 只是具有基于变量数组的巨型表的函数。

Answer 1

您尝试实现的这种事情会使用常规 Ajax 调用花费服务器的大量资源。

类似问题:Link

让我们以两个用户之间的聊天为例:

用户的 1 页面有一个 Javascript 计时器每秒询问新消息:“嘿服务器，给我发送新消息。”有或没有新消息，服务器将处理请求，搜索新消息回复“我现在没有给你的消息” 或“这是你的新消息” 的消息。 用户 2 也一样。

如果两个用户保持聊天页面打开 10 秒，您的服务器将收到 20 个新消息请求，将运行 20 次新消息搜索并发送 20 个包含新消息的回复或“没有新消息”回复。即使两个用户都没有发送任何内容，只是保持页面打开。想象一下，如果有 1000 个用户连接到您的聊天室!

在这种情况下最好的方法是 Socket。在同一个聊天示例中，用户 1 和用户 2 将继续收听新消息，而不是每秒询问一次。当用户1发送消息时，服务器会通知用户2“我有一条新消息给你，这里是。”

如果连接1000个用户，完全没有问题。服务器会将新消息发送到套接字 channel ，并通知所有连接的用户。没有延迟。

在您的特定情况下，将像这样工作:播放器 1 和播放器 2 正在监听新消息。当玩家 1 点击卡片时，将触发服务器命令。服务器将接收和发送一个套接字 channel 的消息:“嘿每个正在等待新卡的人，这里是”然后每个玩家都会收到通知。即时。

第一种情况的另一个问题是，使用 Javascript 计时器:如果您增加计时器间隔，回复将延迟传递。

关于套接字的另一个好处是:它独立于技术。 PHP、Java、Node等

将 WebSocket 与 Php 结合使用的 GitHub 项目:Link

You can see some socket demos here

Here is a repository with some tests I ran when I tried Socket earlier