django channels invalid state error after disconnnect

Question

Im using django-channels to implement chat message box and connecting to websocket via ajax since the chat box doesn't take up a full screen . Im connecting to a particular socket when one user is selected and the messages are sending through the first time and its getting saved.When i close the chatbox im calling websocket close and disconnnect is executing,but when i close and reopen again im getting error

reconnecting-websocket.js:293 Uncaught INVALID_STATE_ERR : Pausing to 
reconnect websocket

And also the messages can be seen in other channels as well when i open the chatbox.Is there any chance the websocket are remaining connected and channels aren't being discarded after disconnect is called?

My code:

class ChatConsumer(AsyncConsumer):

    async def websocket_connect(self, event):
        print("connected", event)
        other_user = self.scope['url_route']['kwargs']['username']
    me = self.scope['user']

    thread_obj = await self.get_thread(me, other_user)
    self.thread_obj = thread_obj
    chat_room = "thread_{}".format(thread_obj.id)
    self.chat_room = chat_room
    await self.channel_layer.group_add(
         chat_room,
         self.channel_name
    )
    await self.send({
        "type": "websocket.accept"
    })

async def websocket_receive(self, event):

    print("MEssage received",event)
    front_text = event.get('text', None)
    if front_text is not None:
        loaded_dict_data = json.loads(front_text)
        msg = loaded_dict_data.get('message')
        me = self.scope['user']

        myResponse ={
            'message': msg,
            'username': me.username
        }
        if msg is not "":
            await self.create_chat_messages(me,msg)
        await self.channel_layer.group_send(
            self.chat_room,
            {
                "type": "chat_message",
                "text":  json.dumps(myResponse)

            }
        )
async def chat_message(self, event):
    await self.send({
        "type": "websocket.send",
        "text": event['text']
    })

async def websocket_disconnect(self):
    await self.channel_layer.group_discard(
        self.chat_room,
        self.channel_name
    )
    print("disconnected")

@database_sync_to_async
def get_thread(self,user,other_username):
    return Thread.objects.get_or_new(user,other_username)[0]

@database_sync_to_async
def create_chat_messages(self,me,msg):
    thread_obj = self.thread_obj
    if msg is not "":
        print("MESSAGE",msg)
        print(thread_obj)
        print(me)
        chat_message = ChatMessage.objects.create(thread=thread_obj, user=me, message=msg)
        return chat_message
    else:
        return None

In my script i have:

$('.chatblob').click(function(e){
e.preventDefault();
$chatbox.removeClass('chatbox--empty');
var username = $(this).find('p:first').text();
console.log(username);
var loc = window.location;
var formData=$('#form');
var msgInput = $('#textmessage');
var wsStart = 'ws://';

if (loc.protocol == 'https:'){
wsStart ='wss://';
}
var endpoint = wsStart + loc.host+"/messages/"+username+"/";
 console.log("endpoint: ",endpoint);
console.log("MESSAGE IS",msgInput.val());
 $.ajax({
      type: 'POST',
      url:'/messages/'+username+"/",
      data: {
      'username': username,
      'message': msgInput.val(),
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
       },
       dataType: 'jsonp',
       jsonpCallback: "localJsonpCallback"

      });


   $.ajax({
      type: 'POST',
      url:"/student/get-thread/"+username,
      data: {
      'username': String(username),
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
       },
      dataType:'json',
      success:function(e){
       console.log(e);
       console.log(e.success.queryset);
       $('.chatbox__body').empty();
       $('.chatbox__body').append(e.success.queryset);    
        },
      error: function(e){
         console.log(e)
      }
      });
     function localJsonpCallback(json) {
        if (!json.Error) {
           console.log("success");
        }
        else {
            console.log("Error");
    }
    }
 var socket = new ReconnectingWebSocket(endpoint);
 chatHolder= $('.chatbox__body');
 var me = $('#myUsername').val();
 sockets.push(socket);
 socket.onmessage = function(e){
 var chatDataMsg=JSON.parse(e.data);
 console.log("chatmessage",chatDataMsg);
 chatHolder.append(chatDataMsg.message);
}
socket.onclose = function(e){
console.log("CLosing",e);
}
socket.onopen = function(e){
  console.log("open",e);
  formData.submit(function(event){
  event.preventDefault();
  var msgText = msgInput.val()
      var finalData = {
      'message' :msgText
   }
  console.log(msgText);
  socket.send(JSON.stringify(finalData));
  console.log(JSON.stringify(finalData))
  console.log(endpoint);
  formData[0].reset();
 });

}
socket.onerror = function(e){
console.log("error",e);
}
socket.onclose = function(e){
console.log("Closers",e);
}
});
});

Answer 1

It seems to have been a problem with using Reconnecting websocket since im using ajax. I changed to normal Websocket and now it is working fine.