服务器端事件、HTML5、PHP 和 Javascript...索引页不“刷新”
我发现了一篇非常好的文章，其中包含我想添加到页面的功能，但由于一个小错误而被困了一整天。作为参考，教程位于此处。
一切正常，唯一没有发生的事情是 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 错别字或者教程可能是错误的？
请原谅我在未经编辑的原始帖子中的文件名中的错字。该目录显示了所有正确命名的文件
冉冉说2回答
-
海绵宝宝撒
<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(); -
梵蒂冈之花
使用本教程使用服务器发送的事件我发现 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 事件脚本文件必须有标题 text/event-stream2- 该文件不能停止执行！3-event:之前发送data:。希望这有帮助编辑 在对你的脚本进行测试之后它在我改变时起作用了 <script src="/selectedSystemState-script.js"></script>到 <script src="./selectedSystemState-script.js"></script>它是selectedSystemState-script.js从根文件夹调用的！并产生 404 错误并在 selectedSystemState-script.php<?phpheader("Cache-Control: no-cache");header("Content-Type: text/event-stream");// Require the file which contains the $animals arrayrequire_once "selectedSystemStateResults.php";// Encode the php array in json format to include it in the response$selectedSystemStateResults = json_encode($selectedSystemStateResults);// data after eventflush();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"; } }});
随时随地看视频慕课网APP
PHP