Solución:
Una forma sencilla de implementar un sistema de notificación puede ser:
Cuando desee mostrar un mensaje nuevo, manipule HTML usando JS tan pronto como reciba un mensaje en websocket. Y siempre que se haya interactuado con el elemento, lo que significa que el usuario ha leído la notificación, envíe un mensaje al servidor utilizando websocket.
Tu Notification
puede tener ForeignKeys
al usuario y el mensaje junto con un BooleanField
para leer el estado. Siempre que envíe el mensaje al usuario, debe agregar el notification_id junto al mensaje,
#consumer.py
async def websocket_receive(self, event):
# when a message is received from the websocket
print("receive", event)
message_type = event.get('type', None) #check message type, act accordingly
if message_type == "notification_read":
# Update the notification read status flag in Notification model.
notification = Notification.object.get(id=notification_id)
notification.notification_read = True
notification.save() #commit to DB
print("notification read")
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')
user = self.scope['user']
username="default"
if user.is_authenticated:
username = user.username
myResponse = {
'message': msg,
'username': username,
'notification': notification_id # send a unique identifier for the notification
}
...
Del lado del cliente,
// thread.html
socket.onmessage = function(e) {
var data = JSON.parse(event.data);
// Find the notification icon/button/whatever and show a red dot, add the notification_id to element as id or data attribute.
}
...
$(#notification-element).on("click", function(){
data = {"type":"notification_read", "username": username, "notification_id": notification_id};
socket.send(JSON.stringify(data));
});
Puede marcar las notificaciones individuales / no leídas como leídas según sus necesidades.
Hice algo similar para un proyecto de capacitación, puedes consultarlo para obtener ideas. Enlace de Github.