I'm working with Django Framework + Javascript and want to create a server-sent event which gonna send messages to the front-end.

Here is my Js-client part:

btn.addEventListener('click', function(event){
console.log('started...');

var url = new URL('http://127.0.0.1:8000/get/stream/data/');
var source = new EventSource(url);

source.onopen = function(){
console.log('Source has been connected....');
};

console.log(source);
source.onmessage = function(event){
data = JSON.parse(event.data);

console.log('on message event', event, data);
console.log(event);

};

source.onerror = function(err) {
source.close();
console.error("EventSource failed:", err);
};

source.onclose = function(){
evtSource.close();
console.log('event source has been closed');
}
});

Python-Django part:

def prepare_stream_data():
import json
from django.core.serializers.json import DjangoJSONEncoder
while True:

    for i in range(30):
        yield json.dumps('%s' % i, cls=DjangoJSONEncoder)
        print(i)
        time.sleep(5)

def send_stream_data(request):
    stream_data = prepare_stream_data()

    response = django.http.StreamingHttpResponse(stream_data,
    content_type='text/event-stream')

    return response

urls.py

path('get/stream/data/', main_course_api.send_stream_data, name='stream_data')

Django basically works and I see the result in console...., when I click on the button, but it shows me in JS console, that event source is not connected (readyState equals to 0) and does not receive any messages) :(