django channels invalid state error after disconnnect - ajax

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.