How to delete an object in django-channels -socket? - django-channels

Question

I'm making a real-time chat app using django channels.
I want to delete an object from database using django channels. How can it be?
I tried to delete some objects by using ajax but it didn't work.
consumers.py:
import json
from django.contrib.auth.models import User
from channels.generic.websocket import AsyncWebsocketConsumer
from asgiref.sync import sync_to_async
from .models import Room, Message
class ChatConsumer(AsyncWebsocketConsumer):
async def connect(self):
self.room_name = self.scope['url_route']['kwargs']['room_name']
self.room_group_name = 'chat_%s' % self.room_name
await self.channel_layer.group_add(
self.room_group_name,
self.channel_name
)
await self.accept()
async def disconnect(self):
await self.channel_layer.group_discard(
self.room_group_name,
self.channel_name
)
# Receive message from WebSocket
async def receive(self, text_data):
data = json.loads(text_data)
print(data)
message = data['message']
username = data['username']
room = data['room']
await self.save_message(username, room, message)
# Send message to room group
await self.channel_layer.group_send(
self.room_group_name,
{
'type': 'chat_message',
'message': message,
'username': username
}
)
# Receive message from room group
async def chat_message(self, event):
message = event['message']
username = event['username']
# Send message to WebSocket
await self.send(text_data=json.dumps({
'message': message,
'username': username
}))
#sync_to_async
def save_message(self, username, room, message):
user = User.objects.get(username=username)
room = Room.objects.get(slug=room)
Message.objects.create(user=user, room=room, content=message)
room.html:
{% extends 'core/base.html' %}
{% block title %}{{ room.name }} | {% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">{{ room.name }}</h1>
</div>
<button onclick="lok()" type="button" class="like-button liked" id="lok"> salam
</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function lok() {
$.ajax({
type:'GET',
url:'/chat/uta/like/',
});
}
</script>
<div class="lg:w-2/4 mx-4 lg:mx-auto p-4 bg-white rounded-xl">
<div class="chat-messages space-y-3" id="chat-messages">
<!--from views.py :-->
{% for m in messages %}<b>{{ m.user.username }}</b>: {{ m.content }}<br>{% endfor %}
</div>
</div>
<div class="lg:w-2/4 mt-6 mx-4 lg:mx-auto p-4 bg-white rounded-xl">
<form method="post" action="." class="flex">
<input type="text" name="content" class="flex-1 mr-3" placeholder="Your message..." id="chat-message-input">
<button
class="px-5 py-3 rounded-xl text-white bg-teal-600 hover:bg-teal-700"
id="chat-message-submit"
>Submit</button>
</form>
</div>
{% endblock %}
{% block scripts %}
{{ room.slug|json_script:"json-roomname" }}
{{ request.user.username|json_script:"json-username" }}
<script>
const roomName = JSON.parse(document.getElementById('json-roomname').textContent);
const userName = JSON.parse(document.getElementById('json-username').textContent);
const chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/ws/'
+ roomName
+ '/'
);
chatSocket.onclose = function(e) {
console.log('onclose')
}
chatSocket.onmessage = function(e) {
const data = JSON.parse(e.data);
//from consumer.py:
if (data.message) {
document.querySelector('#chat-messages').innerHTML += ('<b>' + data.username + '</b>: ' + data.message + '<br>');
}
scrollToBottom();
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) {
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
e.preventDefault()
const messageInputDom = document.querySelector('#chat-message-input');
const message = messageInputDom.value;
console.log({
'message': message,
'username': userName,
'room': roomName
})
if (message) {
chatSocket.send(JSON.stringify({
'message': message,
'username': userName,
'room': roomName
}));
}
messageInputDom.value = '';
return false
};
/**
* A function for finding the messages element, and scroll to the bottom of it.
*/
function scrollToBottom() {
let objDiv = document.getElementById("chat-messages");
objDiv.scrollTop = objDiv.scrollHeight;
}
// Add this below the function to trigger the scroll on load.
scrollToBottom();
</script>
{% endblock %}
Should i use javascript?
I tried to delete some objects by using ajax but it didn't work.