代码之家 › 专栏 › 技术社区 › CodingNow

当事件来自Django服务器时,不调用EventSource AddEventListener回调方法

eventsource http-streaming server-sent-events django javascript

CodingNow · 技术社区 · 6 年前

事件发生时不调用EventSource AddEventListener回调

设置: 姜戈2.0.7 铬67.0.3396.99 Macosx 10.13.6(17G65)

源代码: 在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>

从控制台日志中,我可以看到当我按下发送按钮时,会打印以下日志:
before addEventListener after addEventListener send response:"333"

但是 addEventListener event 未在日志中打印。

从HTTP数据包中,我可以看到Django服务器已经发送了包含“event:”的HTTP数据包:

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

1 回复 | 直到 6 年前

CodingNow 6 年前

我自己弄明白了原因。

这个 addEventListener 可以。我在Django的路线配置有问题(奇怪的是,Django根本没有抱怨)。

我使用大量的日志打印来查明根本原因,在Django重新配置路由后,问题解决了。