Блог

Главная - Вопросы по программированию - как обновить div в той же позиции, избегая повторения строки

как обновить div в той же позиции, избегая повторения строки

#javascript #html #server-sent-events

#javascript #HTML #сервер-отправленные события

Вопрос:

необходимо обновить div данными с сервера. сервер отправляет данные с отправленными сервером событиями.

все работает нормально, но данные отображаются в новых строках. мне нужно обновить тот же div в той же позиции, не добавляя больше строк.

Это html-страница:

 <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div id="result">Loading data. Please, wait...</div>

        <script type="text/javascript">
            if(typeof(EventSource) !== "undefined") {
                var source = new EventSource("demo_sse.php");

                source.addEventListener('message', function(e) {
                    document.getElementById("result").innerHTML  = event.data   "<br>";
                }, false);

                source.addEventListener('open', function(e) {
                    // Connection was opened.
                    //alert('Connection opened');
                }, false);

                source.addEventListener('close', function(e) {
                    // Connection was opened.
                    alert('Connection closed');
                }, false);

                source.addEventListener('error', function(e) {
                    if (e.readyState == EventSource.CLOSED) {
                    // Connection was closed.
                        alert('Connection closed');
                    }
                }, false);

            } else {
                document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
            }
        </script>
    </body>
</html>

и это файл php:

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

$time = date('r');
echo "retry: 1000n";
echo "data: The server time is: {$time}nn";
//error_log('XXXX');
flush();
?>

Ответ №1:

Измените строку на эту:

 source.addEventListener('message', function(e) {
                    document.getElementById("result").innerHTML = event.data   "<br>";
                }, false);
Метки: ,