[SOLVED] EventSource addEventListener callback method is not called when event comes from Django server

EventSource addEventListener callback method is not called when event comes from Django server

EventSource addEventListener callback is not called when event comes

Settings: Django 2.0.7 Chrome 67.0.3396.99 MacOSX 10.13.6 (17G65)

Source code: In my chat.html:

<script src="{% static 'django_eventstream/json2.js' %}" charset="utf-8"></script>
    <script src="{% static 'django_eventstream/eventsource.min.js' %}" charset="utf-8"></script>
    <script src="{% static 'chat/jquery-3.2.1.min.js' %}" charset="utf-8}"></script>

    <script type="text/javascript">

      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 }}');
      });
    </script>
  </head>

  <body>
    <div id="chat-input-area">
      <form id="send-form">
        <button id="send-button">Send</button>
        <span id="chat-input-span"><input type="text" id="chat-input" autocomplete="off" /></span>
      </form>
    </div>
  </body>

From console log, I can see that when I push the send button, the following log is printed:
before addEventListener after addEventListener send response:"333"

but addEventListener event is not printed in the log.

From HTTP packets, I can see that Django server has sent the HTTP packet with 'event: ' in it:

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"}]}

Solution

I figured out the reason myself.

The addEventListener is OK. Something is wrong with my route configuration in Django(curiously, Django does not complain at all).

I used heavy log printing to pinpoint the root cause and after I reconfigured my routing in Django, the problem is solved.