Почему лента новостей не обновляется с EventSource?

Question

Почему лента новостей не обновляется с EventSource?

Рейтинг: 0Ответов: 1Опубликовано: 20.02.2023

Мне нужно обновлять ленту новостей без использования ajax в setInterval.

Одно из решений как я понял это EventSource, но проблема в том что браузер все равно с задержкой посылает GET запросы на сервер, эта задержка контролируется полем retry.

Вопрос в том, можно ли не посылая эти бестолковые запросы на сервер, обновлять ленту в браузере только при вызове скрипта news.php? Иначе эта технология ничем не отличается от обычного setInterval

news.php:

header("Cache-Control: no-store");
header("Content-Type: text/event-stream");

echo "event: update\n";
echo "data: news\n";
echo "retry: 2000\n";
echo "\n\n";

news.js:

const eventSource = new EventSource("news.php");

В результате каждые 2 секунды посылается GET запрос, что выглядит крайне тупо. Хотелось бы не посылая запросов обновлять ленту.

javascript php ajax

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Какой-то другой код на у вас запрашивает сервер, т.к. в самой банальной реализации, никаких запросов нет. Попробуйте сделать так и проверить, а далее, доработать свою реализацию.

Серверный код (index.php):

<?php

set_time_limit(0);

header('Content-Type: text/event-stream');
header('Connection: keep-alive');
header('Cache-Control: no-store');

header('Access-Control-Allow-Origin: *');

$messageCounter = 1;

while (true) {
    if (connection_aborted()) break;
    
    echo 'data: ' . $messageCounter++ . '. Message from bigboxcode, at - ' . date('Y-m-d H:i:s');
    echo "\n\n";
    
    ob_flush();
    flush();
    
    sleep(3);
}

Клиентский код (index.html):

<html>
<head>
    <title>PHP SSE Demo</title>
</head>

<body>
<ul id="list">
    <!-- new content appears here -->
</ul>
</body>

<script>
    const eventSource = new EventSource('http://localhost:8001');

    eventSource.onmessage = function (currentEvent) {
        const listElement = document.getElementById('list');
        const newElement = document.createElement('li');
        newElement.innerText = currentEvent.data;

        listElement.appendChild(newElement)
    };
</script>
</html>

Далее, php -S localhost:8001 в директории с php файлом и в браузере откройте index.html, как разультат, должна бытьь чистая вкладка network.

Почему лента новостей не обновляется с EventSource?

Ответы