События на стороне сервера, HTML5, PHP и Javascript ... страница индекса не обновляется - PullRequest
Новая
       28

События на стороне сервера, HTML5, PHP и Javascript ... страница индекса не обновляется

0 голосов
/ 30 июня 2019

Я нашел действительно хорошую статью с функцией, которую хочу добавить на страницу, но застрял весь день с одной маленькой ошибкой. Для справки: находится здесь .

Все работает, единственное, чего не происходит, это то, что веб-страница 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 или учебник может быть неправильным?

Прошу прощения за опечатку, которая была у меня в именах файлов в моем неотредактированном оригинальном сообщении. В каталоге отображаются все файлы с правильными именами.

Directory listing

Ответы [ 2 ]

1 голос
/ 30 июня 2019

Использование этого руководства Использование событий, отправленных сервером

Я обнаружил, что файл 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";
    }
  }
});
1 голос
/ 30 июня 2019 
<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();
...