1

我不知道我是否清楚，但是...

总之，我是一名主播，我正在做一个 PHP 网站，以在我的 OBS 上展示我的社交媒体和最新的捐款/追随者（好与坏，这不是问题！）。这是一个使用 PHP 读取文件的幻灯片 HTML/JS 页面（因为 JS 不能）。

我有两个可以更新的文件（most_recent_follower.txt 和 most_recent_donator.txt）。我能够阅读这些文件并且它有效。但是，问题是我无法在不刷新页面的情况下更新最后一个捐赠者或最后一个追随者。

我在这个线程上尝试了解决方案，但是它不起作用。我有两个文件，似乎 PHP 只会在一个文件上循环......或者我有 JS 的错误，例如，如果我写

clearstatcache(false, $file);

代替

clearstatcache();

输出读取 ["Jean : 1.00$CAN (br tag)] 而不是 ["Jean : 1.00$CAN"] 与第二个函数。

有我的代码和实际输出的视频（我知道优化不太好，我的编程程度远超RN...lol！）'

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Geekdan97 Stream Label</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        
        <style>     
            @font-face {
                font-family: 'Rayman';
                src: url('../Font/rayman-webfont.woff2') format('woff2'),
                     url('../Font/rayman-webfont.woff') format('woff');
                font-weight: normal;
                font-style: normal;

            }
            
            body{
                font-family:"Rayman";
                color:white;
                text-shadow : 4px 4px black;
                vertical-align: middle;
                font-size:32px;
                background-color:black;
            }
            
            * {box-sizing: border-box;}
            .mySlides .mySlides2{display: none;}

            /* Slideshow container */
            .slideshow-container{
                max-width: 1000px;
                position: absolute;
                margin: auto;
                top: 13px;
                left : 30px;
            }
            
            
            .slideshow-container2{
                max-width: 1000px;
                position: absolute;
                margin: auto;
                top: 13px;
                left : 450px;
            }
            
            /* Fading animation */
            .fade {
              -webkit-animation-name: fade;
              -webkit-animation-duration: 3s;
              animation-name: fade;
              animation-duration: 3s;
            }

            @-webkit-keyframes fade {
              from {opacity: .4} 
              to {opacity: 1}
            }

            @keyframes fade {
              from {opacity: .4} 
              to {opacity: 1}
            }
        </style>
    </head>
    
    <body>
        <div>
            <img src="./images/bg.png" />
        </div>
        <div class="slideshow-container">

            <div class="mySlides fade">
                <img src="./images/facebook.png" width="35" height="35" style="float:left" /> &nbsp
                <div style="float:right">
                    Geekdan97 
                </div>
            </div>

            <div class="mySlides fade">
              <img src="./images/twitter.png" width="35" height="35" style="float:left" /> &nbsp
                <div style="float:right">
                    Geekdan97 
                </div>
            </div>

            <div class="mySlides fade">
              <img src="./images/twitch.png" width="35" height="35" style="float:left" /> &nbsp
                <div style="float:right">
                    Geekdan97 
                </div>
            </div>
            
            <div class="mySlides fade">
              <img src="./images/discord.png" width="35" height="35" style="float:left" /> &nbsp
                <div style="float:right">
                    !discord
                </div>
            </div>
        </div>
        
        <div class="slideshow-container2">
                    <div class="mySlides2 fade">
                            <img src="./images/donation.png" width="35" height="35" style="float:left" /> &nbsp
                            <div id="lastDonator" style="float:right"></div>
                    </div>

                    <div class="mySlides2 fade">
                            <div id="lastFollower"></div>
                    </div>
        </div>
        <br>
        <script>
            var slideIndex = 0;
            var slideIndex2 = 0;
                
            showSlides();
            showSlides2();
            getLastDonator();
            getLastFollower();
            
            function showSlides() {
              var i;
              var slides = document.getElementsByClassName("mySlides");
              for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";  
              }
              slideIndex++;
              if (slideIndex > slides.length) {slideIndex = 1}    

              setTimeout(showSlides, 3000);
              slides[slideIndex-1].style.display = "block";  
            }
            
            function showSlides2() {
                console.log("slide2");
              var i;
              var slides2 = document.getElementsByClassName("mySlides2");
              for (i = 0; i < slides2.length; i++) {
                slides2[i].style.display = "none";  
              }
              slideIndex2++;
              if (slideIndex2 > slides2.length) {slideIndex2 = 1}    

              slides2[slideIndex2-1].style.display = "block";  
              setTimeout(showSlides2, 4002);
            }
            
            //most_recent_donator.txt
            function getLastDonator(){                              
                var lastDonator = "<?php
                    $myfile = fopen("./labels/most_recent_donator.txt", "r");
                    echo fread($myfile,filesize("./labels/most_recent_Donator.txt"));
                    fclose($myfile);
                    
                    clearstatcache();
                ?>";
                $("#lastDonator").text("Last Donator : " + lastDonator);
                
                setTimeout(getLastDonator, 2000);
            }
            
            //most_recent_follower.txt
            function getLastFollower(){
                $("#lastFollower").text("Last Follower : " + "<?php
                    $myfile = fopen("./labels/most_recent_follower.txt", "r");
                    echo fread($myfile,filesize("./labels/most_recent_follower.txt"));
                    fclose($myfile);
                    
                    clearstatcache();
                ?>");
                
                setTimeout(getLastFollower, 2000);
            }
        </script>
    </body>
</html>
4

1 回答 1

0

页面加载后，PHP 脚本的结果在页面中以字符串的形式输出（参见：右键单击 -> 查看源代码），您的 JavaScript 代码中没有要求 PHP 脚本提供新数据的机制。因此，PHP 脚本只会在您访问（例如刷新）页面时运行一次。

您可能需要两个文件：一个.php输出最新数据的文件，另一个.html使用 JavaScript 从api.php.

api.php：

<?php

$result = [
    'donator' => file_get_contents('./labels/most_recent_donator.txt'),
    'follower' => file_get_contents('./labels/most_recent_follower.txt'),
];

// output result as JSON format
header('Content-type: application/json;charset=utf-8');
echo json_encode($result);

// output: {"donator":"...", "follower":"..."}

index.html：

<!-- ... -->
<script>
    // ...
    async function updatePage() {
        let response = await fetch('./api.php');
        let data = await response.json();

        // output fetched data in debug console (in your browser: F12 -> console)
        console.log(data);

        $("#lastFollower").text("Last Follower : " + data.follower);
        $("#lastDonator").text("Last Donator : " + data.donator);
    }
    
    setInterval(updatePage, 2000);
    // ...
</script>
<!-- ... -->

我使用现代Fetch API和asyncJavaScript 来保持代码简单和干净。

于 2021-01-11T02:51:41.447 回答