Frequently update an angularjs frontend with real time data from django server

Question

There are some data which would be sent frequently from a django server to the angularjs, this is a data which would be modified frequently and the modification would be updated at the front end when the changes are made at the backend At the point where the data is made available I have inserted

views.py

send_event('test', 'message', {'text': dataModifiedFrequently})

asgi.py

application = ProtocolTypeRouter({
    'http': URLRouter([
        url(r'^event_url/', AuthMiddlewareStack(
            URLRouter(django_eventstream.routing.urlpatterns)
           ), { 'channels': ['test'] }),
        url(r'', get_asgi_application()),
]),

})

angular.js

$scope.EventSourceScope = function(){
    if (typeof(EventSource) !== "undefined") {
        var source = new EventSource('event_url');
        source.onmessage = function (event) {
            $scope.openListingsReport = event.data;
            $scope.$apply();
            console.log($scope.openListingsReport);
                        };
        }   
        else {
            // Sorry! No server-sent events support..
            alert('SSE not supported by browser.');
        }
    }

I used the Django EventStream package and followed the example I do not seem to see any result in the angularjs. but in my browser it gave me the error

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

I followed the example in https://github.com/fanout/django-eventstream.

Please how can I get django to send data to angularjs as it occurs