Потребитель канала Django дважды отправляет сообщение на фронтенд

Я пытаюсь создать простое приложение для чата с помощью django channels, используя простой websocket. оно работает нормально, но Когда я отправляю сообщение другому пользователю, оно появляется дважды на обоих концах. Я думаю, что метод consumer chat вызывается дважды. Я не могу понять, как решить эту проблему! функция групповой отправки сообщения Я думаю, что это делает эхо, которое возвращает сообщение своему пользователю и отправляет это конкретное сообщение другому пользователю

Вот потребитель

websocket frontend

<script src="{% static 'chatapp/reconnecting-websocket.js' %}"></script>
<script>
  var roomName = {{ room_name_json }};
  var username = {{ username }};
  var receiver_username = {{ receiver_username }};

  var chatSocket = new ReconnectingWebSocket(
      'ws://' + window.location.host +
      '/ws/chat/' + receiver_username + '/');

  chatSocket.onopen = function(e) {
    fetchMessages();
  }

  chatSocket.onmessage = function(e) {
      var data = JSON.parse(e.data);
      if (data['command'] === 'messages') {
        for (let i=0; i<data['messages'].length; i++) {
          createMessage(data['messages'][i]);
        }
      } else if (data['command'] === 'new_message'){
        createMessage(data['message']);
      }
  };

  chatSocket.onclose = function(e) {
      console.error('Chat socket closed unexpectedly');
  };

 // document.querySelector('#chat-message-input').onkeyup = function(e) {
  //    if (e.keyCode === 13) {  // enter, return
  //        document.querySelector('#chat-message-submit').click();
  //    }
  //};

  document.querySelector('#chat-message-submit').onclick = function(e) {
      var messageInputDom = document.getElementById('chat-message-input');
      var message = messageInputDom.value;
      chatSocket.send(JSON.stringify({
          'command': 'new_message',
          'message': message,
          'from': username,
          'to': receiver_username,
          'room_name':roomName,
      }));

      //messageInputDom.value = '';
  };

  function fetchMessages() {
    chatSocket.send(JSON.stringify(
      {
        'command': 'fetch_messages',
        'from': username,
        'to': receiver_username,
        'room_name':roomName,
      }
      
    ));
  }


 




  function createMessage(data) {
    var author = data['sender'];
    var msgListTag = document.createElement('li');
    var divTag = document.createElement('div');
    var spanTag = document.createElement('span');
    var div2Tag = document.createElement('div');
    var imgTag = document.createElement('img');

    msgListTag.className = 'clearfix';
    divTag.className = 'message-data text-right';
    spanTag.className = 'message-data-time';

    div2Tag.textContent = data.content;
    
    
    if (author === username) {

        

      imgTag.src = '/media/{{request.user|personal_profile_image }}';

      div2Tag.className = 'message other-message float-right';
    } else {
      imgTag.src = '/media/{{receiver_user|personal_profile_image }}';
      div2Tag.className = 'message my-message';
    }
    msgListTag.appendChild(divTag);
    divTag.appendChild(spanTag);
    divTag.appendChild(imgTag);

    msgListTag.appendChild(div2Tag);
    document.querySelector('#chat-log').appendChild(msgListTag);
  }

</script>

вот вывод на frontend here's the image of frontend

Вернуться на верх