服务器端事件，HTML5、PHP & Javascript...索引页面不是 'refreshing'

Question

我找到了一篇非常好的文章，其中包含我想添加到页面的功能，但由于一个小错误而卡住了一整天。作为参考，教程是 located here.

一切正常，唯一没有发生的事情是 index.php 网页没有刷新对托管 php 数组所做的更改。谁能看一眼我的代码并告诉我是否有错字或遗漏了文章的一部分？

我的数组文件 - selectedSystemStateResults.php

<?php
$selectedSystemStateResults = ["cart", "dogsss", "cows", "zebra", "snake"];

我的服务器端 PHP 脚本文件 - selectedSystemState-script.php

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

// Require the file which contains the $animals array
require_once "selectedSystemStateResults.php";

// Encode the php array in json format to include it in the response
$selectedSystemStateResults = json_encode($selectedSystemStateResults);

echo "data: $selectedSystemStateResults" . "\n\n";
flush();
echo "retry: 1000\n";
echo "event: selectedSystemStateResultsMessage\n";

我的客户端网页 - index.php

    <?php require "selectedSystemStateResults.php"; ?>
    <html>
      <body>
    <?php foreach ($selectedSystemStateResults as $selectedSystemStateResult) : ?>
            <li><?php echo $selectedSystemStateResult; ?></li>
          <?php endforeach ?>
        </ul>
    <script src="/selectedSystemState-script.js"></script> 
    </body>
    </html>

我的javascript文件-selectedSystemState-script.js

let eventSource = new EventSource('selectedSystemState-script.php');

eventSource.addEventListener("selectedSystemStateResultsMessage", function(event) {
  let data = JSON.parse(event.data);
  let listElements = document.getElementsByTagName("li");

  for (let i = 0; i < listElements.length; i++) {
    let selectedSystemStateResults = listElements[i].textContent;
    if (!data.includes(selectedSystemStateResults)) {
      listElements[i].style.color = "red";
    }
  }
});

在过去的 8 小时里，我已经阅读并重新阅读了这篇文章，感觉真的卡住了。有没有人看到任何明显的 php 或 javascript 拼写错误，或者教程是否有误？

请原谅我在未经编辑的原件 post 上的文件名中的错字。该目录显示所有正确命名的文件。

Answer 1

<script src="/selectedSystemState-script.js"></script>

与您的 javascript 文件名 selectSystemState-script.js 不匹配。下次打开开发者工具控制台验证 javascript 个错误！

另一个错误是您在设置事件名称之前发送数据。 selectedSystemState-script.php的结尾应该是：

echo "retry: 1000\n";
echo "event: selectedSystemStateResultsMessage\n";
echo "data: $selectedSystemStateResults" . "\n\n";
flush();

Answer 2

使用本教程Using server-sent events

我发现 script.php 文件不能停止执行！！

或 (selectedSystemState-script.php) 在你的情况下 .

所以我猜你链接的教程在某些地方是错误的？

试试这个

while (1) {
  // Every second, send a "selectedSystemStateResultsMessage" event.

  echo "event: selectedSystemStateResultsMessage\n";
  require("selectedSystemStateResults.php");
  $selectedSystemStateResults = json_encode($selectedSystemStateResults);
  echo "data: $selectedSystemStateResults" . "\n\n";
  ob_end_flush();
  flush();
  sleep(1);
}

这对我来说是新的，但我注意到了一些事情：

1- php 事件脚本文件必须有 header text/event-stream

2- 该文件不能停止执行！

3- event: 在 data: 之前发送。

希望对您有所帮助

编辑在对您的脚本进行测试后，当我更改时它起作用了 <script src="/selectedSystemState-script.js"></script>

到<script src="./selectedSystemState-script.js"></script>

它正在从根文件夹调用 selectedSystemState-script.js！并生成 404 错误

并在 selectedSystemState-script.php

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

// Require the file which contains the $animals array
require_once "selectedSystemStateResults.php";

// Encode the php array in json format to include it in the response
$selectedSystemStateResults = json_encode($selectedSystemStateResults);

// data after event
flush();
echo "retry: 1000\n";
echo "event: selectedSystemStateResultsMessage\n";
echo "data: $selectedSystemStateResults" . "\n\n";
?>

我稍微编辑了 selectedSystemState-script.js :

let eventSource = new EventSource('selectedSystemState-script.php');

eventSource.addEventListener("selectedSystemStateResultsMessage", function(event) {
  let data = JSON.parse(event.data);
  let listElements = document.getElementsByTagName("li");

  for (let i = 0; i < listElements.length; i++) {
    let selectedSystemStateResults = listElements[i].textContent;
    if (!data.includes(selectedSystemStateResults)) {
      listElements[i].style.color = "red";
    } else {
        listElements[i].style.color = "blue";
    }
  }
});

服务器端事件，HTML5、PHP & Javascript...索引页面不是 'refreshing'

Server Side Events, HTML5, PHP & Javascript... index page not 'refreshing'

javascript

php

html

server-sent-events