Срывается соединение AsyncWebsocketConsumer при отправке сообщения

Пишу чат. Django==4.0 channels==3.0.4 channels-redis==3.3.1 При отправке сообщений происходит, срыв соединения, от чего новое сообщение не доходит, а сама страница сразу обновляется. Как исправить разрыв?

Отображение в консоли:

Код consumers.py

    from channels.generic.websocket import 
    from channels.db import database_sync_to_async
            
    @database_sync_to_async
    def new_message_create(data):
        user_object = User.objects.get(username=data['author'])
        chat_object = Chat.objects.get(id=data['chat_id'])
        new_message = Message(author = user_object, chat = chat_object, message=data['message'])
        new_message.save()
        return new_message
            
    class ChatConsumer(AsyncWebsocketConsumer):
        async def new_message(self, data):
            new_message = await new_message_create(data)
            content = {
            'command': 'new_message',
            'message': {
                'id': new_message.id,
                'author': new_message.author.username,
                'content': new_message.message,
                'timestamp': str(new_message.timestamp)
                }
             }
            await self.send_chat_message(content)
        
       commands = {
            'fetch_messages': fetch_messages,
            'new_message': new_message
        }
        
        async def connect(self):
           self.chat_id = self.scope['url_route']['kwargs']['chat_id']
           self.chat_group = 'chat_%s' % self.chat_id
           await self.channel_layer.group_add(
               self.chat_group,
               self.chat_id
           )
           await self.accept()
        
         async def disconnect(self, close_code):
             await self.channel_layer.group_discard(
                 self.chat_group,
                 self.chat_id
             )
        
         async def receive(self, text_data):
            data = json.loads(text_data)
            await self.commands[data['command']](self, data)
        
        async def send_chat_message(self, message):
            await self.channel_layer.group_send(
               self.chat_group,
               {
                 'type': 'chat_message',
                  'message': message
               }
            )
            await self.accept()
        
        async def chat_message(self, event):
                message = event['message']
                await self.send(text_data=json.dumps(message))

Js:

var chat_id = {
  {
    chat_id
  }
};
var username = '{{ username }}';

var chatSocket = new WebSocket(
  'ws://' + window.location.host +
  '/ws/chatroom/' + chat_id + '/', "protocolOne");

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

chatSocket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};

chatSocket.onmessage = function(e) {
  var data = JSON.parse(e.data);
  var message = data['message'];

  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' + 'Код: ' + e.code + ' причина: ' + e.reason);
};

function fetchMessages() {
  chatSocket.send(JSON.stringify({
    'command': 'fetch_messages',
    'chat_id': chat_id
  }));
};

document.querySelector('#chat-message-input').focus();
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,
    'author': username,
    'chat_id': chat_id
  }));

  messageInputDom.value = '';
};



function createMessage(data) {
  /// creating
}

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