JavaScript — EventSource: всегда получаю ошибку

Question

JavaScript — EventSource: всегда получаю ошибку

Чтобы начать с EventSource API я написал самый учебный пример.
Проблема в том, что я всегда получаю ошибку и не могу найти какую-либо полезную информацию о ней. Когда я загружаю home.htmlскрипт JS останавливается на source.onerror; Я печатаю его в консоли, но, анализируя объект, я не могу найти какой-либо тип ошибки или сообщения, поэтому я не знаю, что это не так. Есть ли ошибка в коде? Может ли быть ошибка, связанная с сервером?

home.html

<body>
<div id="result"></div>
<script src="sse.js"></script>
</body>

sse.js

function isSseEnabled() {
return (typeof EventSource !== "undefined");
}

if (isSseEnabled()) {
var source = new EventSource('source.php');
source.onerror = function(e) {
console.log(e);
source.close();
};
source.onmessage = function (e) {
console.log(e.data);
document.getElementById('result').innerHTML += e.data.concat('<br>');
}
} else {
throw 'SSE not enabled';
}

source.php

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

$time = date('r');
echo "Time: $time";
flush();

1

eventsource javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

(TLDR: вы не используете протокол SSE — см. Вторую половину этого ответа.)

Первое, что вам нужно сделать, это получить правильное сообщение об ошибке или, по крайней мере, посмотреть на ваш скрипт. Я бы предложил использовать curl для проверки вашего скрипта. Из командной строки:

curl http://127.0.0.1/source.php

(Я предполагаю, что ваши html и source.php находятся на вашем локальном компьютере и не используют https; отрегулируйте выше, если нет. Также настройте, чтобы добавить путь к source.php.)

Если это работает, или у вас нет доступных curl, посмотрите на инструменты разработчика в вашем браузере. Посмотрите, что происходит с подключением к source.php, что отправляется и что принимается.

Тем не менее, есть несколько способов улучшить PHP-скрипт. Сначала добавьте к сообщению префикс «data:» и добавьте пару LF после каждого сообщения; это требуется протоколом SSE.

Во-вторых, используйте бесконечный цикл со сном (в нем никогда нет смысла иметь скрипт SSE, который возвращает одну вещь и закрывается — в таком случае вы могли бы просто использовать AJAX). Так это будет выглядеть так:

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

while(true){
$time = date('r');
echo "data:Time: $time\n\n";
@ob_flush();flush();
sleep(1);
}

0