Add comments broadcast

apps/back/consumers.py

@@ -2,16 +2,22 @@ import json
 from channels.generic.websocket import WebsocketConsumer
 from django.template.loader import render_to_string
 from apps.back.models import Post, Comment
+from asgiref.sync import async_to_sync
 
 class BlogConsumer(WebsocketConsumer):
 
     def connect(self):
+        self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
+        self.room_group_name = "blog"
+        async_to_sync(self.channel_layer.group_add)(self.room_group_name, self.channel_name)
         self.accept()
 
     def disconnect(self, close_code):
+        async_to_sync(self.channel_layer.group_discard)(self.room_group_name, self.channel_name)
         pass
 
     def receive(self, text_data):
+        send = False
         text_data_json = json.loads(text_data)
         selector = text_data_json["selector"]
         template = text_data_json["template"]
@@ -47,13 +53,38 @@ class BlogConsumer(WebsocketConsumer):
                 # Clean form
                 data["newName"] = ''
                 data["newMessage"] = ''
+                # Send Broadcast
+                async_to_sync(self.channel_layer.group_send)(
+                        self.room_group_name,
+                        {
+                            "type": "blog.new.comment",
+                            "text": {
+                                "selector": selector,
+                                "template": template,
+                                "html": render_to_string(template, data)
+                            }
+                        })
+                send = True
 
         # Send message to WebSocket
+        if not send:
+            self.send(
+                text_data=json.dumps(
+                    {
+                        "selector": selector,
+                        "template": template,
+                        "html": render_to_string(template, data)
+                    }
+                )
+            )
+
+    def blog_new_comment(self, event):
         self.send(
             text_data=json.dumps(
                 {
-                    "selector": selector,
-                    "html": render_to_string(template, data)
+                    "selector": event["text"]["selector"],
+                    "template": event["text"]["template"],
+                    "html": event["text"]["html"]
                 }
             )
         )

apps/front/templates/layouts/main.html

@@ -40,19 +40,23 @@
               });
 
              document.$CHAT_SOCKET.addEventListener('message', (event) => {
+                console.log(event);
                 const NEW_DATA = JSON.parse(event.data);
-                const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);
-                document.querySelector(NEW_DATA.selector).innerHTML = '';
-                document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
+                 if (NEW_DATA.template === document.$CHAT_TEMPLATE) {
+                    const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);
+                    document.querySelector(NEW_DATA.selector).innerHTML = '';
+                    document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
+                 }
             });
 
 
             document.querySelector('#link-about').addEventListener('click', (event) => {
 
                 event.preventDefault();
+                document.$CHAT_TEMPLATE = "partials/website/about.html";
                 document.$CHAT_SOCKET.send(JSON.stringify({
                     selector: "#main",
-                    template: "partials/website/about.html",
+                    template: document.$CHAT_TEMPLATE,
                     data: {}
                 }));
              });
@@ -60,9 +64,11 @@
             document.querySelector('#link-all').addEventListener('click', (event) => {
 
                 event.preventDefault();
+
+                document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
                 document.$CHAT_SOCKET.send(JSON.stringify({
                     selector: "#main",
-                    template: "partials/blog/all_articles.html",
+                    template: document.$CHAT_TEMPLATE,
                     data: {}
                 }));
              });

apps/front/templates/partials/blog/all_articles.html

@@ -24,9 +24,10 @@
 
     buttons.forEach((button) => {
         button.addEventListener('click', event => {
+            document.$CHAT_TEMPLATE = "partials/blog/single.html";
             document.$CHAT_SOCKET.send(JSON.stringify({
                 selector: "#main",
-                template: "partials/blog/single.html",
+                template: document.$CHAT_TEMPLATE,
                 data: {
                     id: event.target.dataset.id
                 }
@@ -40,9 +41,10 @@
 
     pagPrevious.addEventListener('click', (event) => {
         event.preventDefault();
+        document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
         document.$CHAT_SOCKET.send(JSON.stringify({
             selector: "#main",
-            template: "partials/blog/all_articles.html",
+            template: document.$CHAT_TEMPLATE,
             data: {
                 pag: {% if pag > 1 %}{{ pag }} - 1{% else %}1{% endif %}
             }
@@ -52,9 +54,10 @@
 
     pagNext.addEventListener('click', (event) => {
         event.preventDefault();
+        document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
         document.$CHAT_SOCKET.send(JSON.stringify({
             selector: "#main",
-            template: "partials/blog/all_articles.html",
+            template: document.$CHAT_TEMPLATE,
             data: {
                 pag: {{ pag }} + 1
             }

apps/front/templates/partials/blog/single.html

@@ -53,9 +53,11 @@
 
     publish.addEventListener('click', (event) => {
         event.preventDefault();
+
+        document.$CHAT_TEMPLATE = "partials/blog/single.html";
         document.$CHAT_SOCKET.send(JSON.stringify({
             selector: "#main",
-            template: "partials/blog/single.html",
+            template: document.$CHAT_TEMPLATE,
             data: {
                 id: event.target.dataset.id,
                 newName: newName.value,