Javascript 或服务器发送的事件不会立即加载到 php 网页上答案

【问题标题】：Javascript or server-sent events arn't loading instantly on php webpageJavascript 或服务器发送的事件不会立即加载到 php 网页上
【发布时间】：2022-01-02 17:40:07
【问题描述】：

我有一个问题，当我加载我的网站或按下按钮时，由服务器发送的事件和 javascript 设置的按钮的 css 样式需要一些时间来加载。当您观看YouTube video 时，您会发现，当我按下第二个按钮并且网站重新加载第一个按钮时，需要一些时间来获取服务器发送事件设置的颜色。

网站：

    <?php
    shell_exec("gpio -g mode 23 out");
    shell_exec("gpio -g mode 24 out");
   
    if (isset($_POST['lampe1'])){
    $test = exec('gpio -g read 23');
        if($test==0){
            shell_exec("gpio -g write 23 1");
            //shell_exec("sudo python3 /var/www/html/gpio0.py");
        
        }else{
            shell_exec("gpio -g write 23 0");
        }
    }

    if (isset($_POST['lampe2'])){
    $test = exec('gpio -g read 24');
             //directory = /var/www/html
             //exec('touch test.txt');
        if($test==0){
            shell_exec("gpio -g write 24 1");
            //shell_exec("sudo python3 /var/www/html/gpio0.py");
        
        }else{
            shell_exec("gpio -g write 24 0");
        }
    }
    ?>


    <html>
    <script>
        window.onload = function() {
            var source = new EventSource("sse1.php");
            source.onmessage = function(event) {   
        if (event.data == 1){
        document.getElementById("lampe1").style.backgroundColor = "#faba03";
        }else{
            document.getElementById("lampe1").style.backgroundColor = "#18191A";
             }
        }
        var source = new EventSource("sse2.php");
            source.onmessage = function(event2) {   
        if (event2.data == 1){
        document.getElementById("lampe2").style.backgroundColor = "#faba03";
        }else{
            document.getElementById("lampe2").style.backgroundColor = "#18191A";
           }
        }   
        }
        
    </script>

    <body>

    <form method="post">   
    <button class="left" id="lampe1" name="lampe1" >lampe 1</button>
    <button class="right" id="lampe2" name="lampe2" >lampe 2</button>
    </form>

    </body>
    <style>
    body {
      background-color: #18191A;
        }
    button{
      font-family: lato,sans-serif;
      font-weight: bold;
      font-size: 70px;
      letter-spacing: 0.1em;
      text-decoration: none;
      color: #ffffff;
      display: inline-block;
      padding: 30px 40px 30px 40px;
      position: relative;
      border: 3px solid #ffffff;
      border-radius: 60px;
      background-color: #18191A;  
      width: 49.5%;
        }
    .left{
            float: left; 
            margin-bottom: 10px; 
        }    
    .right{
           float: right;
           margin-bottom: 10px; 
            
        }
    </style>
    </html>

sse1.php：（sse2.php看起来一样）

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$onoff = exec('gpio -g read 23');
echo "data: " . $onoff . "\n\n";

@ob_flush();flush();
?>

【问题讨论】：

那个视频没有告诉任何人任何有用的东西。
网站打开时显示按钮样式没有立即加载。
除了在 PHP 中运行 exec 之外，您是否可以硬编码一个值以用于调试目的，以确定延迟是否是由该执行引起的。另外，您应该检查连接本身，也许其中一次握手有些慢？此外，您正在绑定页面加载，但如果您移动下面的 JS，您可以立即调用它们，因为 ID 将可用。
硬编码值并不能解决问题。握手是什么意思？我不知道如何更早地启动 JS ......我尝试了 document.ready 的东西，但没有任何效果了。 @ChrisHaas
对于握手的东西，包括 DNS 查找、TCP 连接和 TLS 握手，请参阅此调试：debugbear.com/blog/devtools-network

标签： javascript php html

【解决方案1】：

如果通过添加一些 php 代码来修复它:)

<button class="left" id="lampe1" name="lampe1" style="<?php $status = exec('gpio -g read 23'); if($status==0){echo" background-color:#18191A;";}else{echo" background-color:#faba03;";}?>">lampe 1</button>

按钮现在在加载时获得正确的颜色

【讨论】：