Отображение строк на HTML с помощью SSE в динамике

Разрабатывается проект на Django. Установлен DRF. В ходе работы одного из процессов Backend-a генерится лог, который необходимо парсить и, выловив нужную строку, вывести на HTML страницу пользователя. Все происходит в динамике.

Вот код, который я написал. urls.py

    path('api/log-stream/', LogStreamAPIView.as_view(), name='log_stream'),

Вот часть вьюхи

class IgnoreClientContentNegotiation(BaseContentNegotiation):
    def select_parser(self, request, parsers):
        return parsers[0]

    def select_renderer(self, request, renderers, format_suffix):
        return (renderers[0], renderers[0].media_type)


class LogStreamAPIView(APIView):

    content_negotiation_class = IgnoreClientContentNegotiation

    def get(self, request):
        def stream_log():
            f = subprocess.Popen(['tail', '-F', rcvenot_log], stdout=subprocess.PIPE, stderr=subprocess.PIPE)
            p = select.poll()
            p.register(f.stdout)

            while TEST_IN_PROGRESS:
                if p.poll(0.1):
                    new_line_log = f.stdout.readline().decode('utf-8').strip()
                    for target_line in RCV_SCENARIO:
                        if target_line in new_line_log:
                            #yield f"event: {new_line_log}\n\n"
                            yield f"{new_line_log}\n"

        return StreamingHttpResponse(stream_log(), content_type='text/event-stream', status=200)

Вот часть на стороне HTML

        <div style="width: 200px; height: 200px; overflow-y: scroll;">
            <ul id="logList"></ul>
        </div>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var logList = document.getElementById('logList');

                function updateLog(newLine) {
                    var listItem = document.createElement('li');
                    listItem.textContent = newLine;
                    logList.appendChild(listItem);
                }

                var source = new EventSource('/api/log-stream/', { headers: {'Content-Type': 'text/event-stream'}});
                source.onerror = (e) => console.error(e);
                source.onopen = (e) => console.log('open', e);

                source.onmessage = function(event) {
                    console.log(event)
                    updateLog(event.data);
                };
            });
        </script>

В ходе работы в консоли браузера я вижу, что данные на запрос приходят корректные. Вот скрин

но на странице пользователя они не появляются.

Прошу помочь разобраться в чем может быть проблема.

PS Я не сильно шарю в HTML, но может ли это быть потому что я жду окончания загрузки DOM дерева document.addEventListener("DOMContentLoaded", function()?

Вернуться на верх