为了账号安全,请及时绑定邮箱和手机立即绑定

服务器端事件、HTML5、PHP 和 Javascript...索引页不“刷新”

服务器端事件、HTML5、PHP 和 Javascript...索引页不“刷新”

PHP
冉冉说 2021-09-18 13:54:33
我发现了一篇非常好的文章,其中包含我想添加到页面的功能,但由于一个小错误而被困了一整天。作为参考,教程位于此处。一切正常,唯一没有发生的事情是 index.php 网页没有刷新对托管 php 数组所做的更改。谁能看一眼我的代码并告诉我我是否有错别字或遗漏了文章的一部分?我的数组文件 - selectedSystemStateResults.php<?php$selectedSystemStateResults = ["cart", "dogsss", "cows", "zebra", "snake"];我的服务器端 PHP 脚本文件 - 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);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.jslet 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 回答

?
海绵宝宝撒

TA贡献1809条经验 获得超8个赞

<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();


查看完整回答
反对 回复 2021-09-18
?
梵蒂冈之花

TA贡献1900条经验 获得超5个赞

使用本教程使用服务器发送的事件


我发现 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-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";

    }

  }

});


查看完整回答
反对 回复 2021-09-18
  • 2 回答
  • 0 关注
  • 164 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信