Django Channels: Real time application, update other rooms when any action appears

For now I’ve created a consumer that can handle one-to-one connections as a private chat. In my UI I display previous conversations and I’d love to somehow update their content if new message or conversation appears and then apply some actions, so for example slide the previous conversation to the top if it contains a new message.

So it’s like in any bigger application as instagram or facebook. When you’re chatting with someone and if any new message appears from other sender, not the one that you’re chatting with, the previous conversations are being updated, so in this case slide the previous or new conversation to the top of conversations.

I’m not really familiar with websockets and I want to find the way how can I do that. As I understand if consumer let’s two users connect to one room (layer?) how can other messages be updated? websocket does not know anything about it?

I’ve tried brainstorming, but I still didn’t get it right.

This is my consumer as i’ve mentioned before, it only can only support two connections between two users.

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.user = self.scope["user"]
        self.private_chat_room_id = self.scope['url_route']['kwargs']['private_chat_room_id']
        self.room_group_name = f'private_{self.private_chat_room_id}'

        if self.user.is_anonymous:
            await self.close()
        else:
            await self.channel_layer.group_add(
                self.room_group_name,
                self.channel_name
            )

            await self.accept()

    async def disconnect(self, close_code):
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    async def receive(self, text_data):
        data = json.loads(text_data)
        message_content = data["message"].strip()

        if message_content:
            # Create chat message object
            message_dict = await self.save_message(self.private_chat_room_id, self.user.id, message_content)
            message_dict["is_author"] = message_dict["author_id"] == self.user.pk,

            await self.channel_layer.group_send(
                self.room_group_name,
                {"type": "chat_message", "message_dict": message_dict}
            )

    async def chat_message(self, event):
        message_dict = event["message_dict"]
        message_html = render_to_string("chat/message_ajax.html", {"conversation_messages": [message_dict]})

        await self.send(text_data=json.dumps({"type": "chat", "html": message_html, "message_id": message_dict["pk"]}))

    @database_sync_to_async
    def save_message(self, room_id, author_id, message):
        return PrivateRoomChatMessage.objects.create(
            content=message,
            room_id=room_id,
            author_id=author_id,
        ).to_dict()

This is my front-end logic to handle only new messages between two users:

           const chat_socket = new WebSocket(`ws://${window.location.host}/ws/chat/{{ conversation_id }}/`);

            const spinner = $(".spinner-backdrop");

            chat_socket.onmessage = (e) => {
                let data = JSON.parse(e.data);

                if(data.type === 'chat'){
                    // Reset message form
                    message_input.val("");

                    is_form_valid = null;
                    message_form.removeClass("invalid");
                    form_submit_btn.removeClass("valid");
                    form_submit_btn.attr("disabled", false);

                    // Render new messages
                    messages.prepend(data.html);

                    // Scroll to the first image
                    $(`li#${data.message_id}`)[0].scrollIntoView();
                }
            }`

                                                                                                   '