title: EventSource addEventListener callback method is not called when event comes from Django server
body: <p>EventSource addEventListener callback is not called when event comes</p>
  
  <p>Settings:
  Django 2.0.7
  Chrome 67.0.3396.99
  MacOSX 10.13.6 (17G65)</p>
  
  <p>Source code:
  In my chat.html:</p>
  
  <pre><code>&lt;script src="{% static 'django_eventstream/json2.js' %}" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="{% static 'django_eventstream/eventsource.min.js' %}" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="{% static 'chat/jquery-3.2.1.min.js' %}" charset="utf-8}"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
        var testPubSub = function(user) {
          var uri = 'events/?channel=room-' + encodeURIComponent('{{ room_id }}');
          var es = new EventSource(uri, {
            lastEventId: '{{ last_id }}'
          });
  
          var firstConnect = true;
  
          es.onopen = function() {
            if (!firstConnect) {
              console.log('*** Connected');
            }
            firstConnect = false;
          }
  
          es.onerror = function() {
            console.log('*** connection lost');
          };
  
          console.log('before addEventListener');
  
          es.addEventListener('message', function(e) {
            console.log('addEventListener event');
            console.log('event: ' + e.data);
            msg = JSON.parse(e.data);
  
            console.log();
          }, false);
          console.log('after addEventListener');
  
          $('#send-form').submit(function() {
            var text = $('#chat-input').val();
            $.post('/rooms/{{ room_id }}/messages/', {from: user, text: text}
            ).done(function(data) {
              console.log('send response:' + JSON.stringify(data));
            }).fail(function() {
              alert('failed to send message');
            }).always(function() {
              $('#chat-input').val('');
              $('#chat-input').focus();
            });
  
            return false;
          });
  
          $('#chat-input').focus();
        };
  
        $(function() {
          testPubSub('{{ user|escapejs }}');
        });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="chat-input-area"&gt;
        &lt;form id="send-form"&gt;
          &lt;button id="send-button"&gt;Send&lt;/button&gt;
          &lt;span id="chat-input-span"&gt;&lt;input type="text" id="chat-input" autocomplete="off" /&gt;&lt;/span&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>From console log, I can see that when I push the send button, the following log is printed:<br>
  <code>
  before addEventListener
  after addEventListener
  send response:"333"
  </code></p>
  
  <p>but <code>addEventListener event</code> is not printed in the log.</p>
  
  <p>From HTTP packets, I can see that Django server has sent the HTTP packet with 'event: ' in it:  </p>
  
  <p><code>
  POST /publish/ HTTP/1.1
  Host: localhost:5561
  User-Agent: python-requests/2.19.1
  Accept-Encoding: gzip, deflate
  Accept: */*
  Connection: keep-alive
  Content-Type: application/json
  Content-Length: 130
  JS Objection Notation:
  {"items": [{"http-stream": {"content-filters": [], "content": "event: message\ndata: \"333\"\n\n"}, "channel": "events-room-r1"}]}
  </code></p>