From 83b28bc1cbd3fbf836bc6775234937245989ba6c Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Sun, 21 Mar 2021 14:24:02 +0100 Subject: [PATCH] Add comments broadcast --- apps/back/consumers.py | 35 +++++++++++++++++-- apps/front/templates/layouts/main.html | 16 ++++++--- .../templates/partials/blog/all_articles.html | 9 +++-- .../front/templates/partials/blog/single.html | 4 ++- 4 files changed, 53 insertions(+), 11 deletions(-) diff --git a/apps/back/consumers.py b/apps/back/consumers.py index 4f01830..8e843bc 100644 --- a/apps/back/consumers.py +++ b/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"] } ) ) diff --git a/apps/front/templates/layouts/main.html b/apps/front/templates/layouts/main.html index 661d281..dcd99be 100644 --- a/apps/front/templates/layouts/main.html +++ b/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: {} })); }); diff --git a/apps/front/templates/partials/blog/all_articles.html b/apps/front/templates/partials/blog/all_articles.html index c256e36..eb374a9 100644 --- a/apps/front/templates/partials/blog/all_articles.html +++ b/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 } diff --git a/apps/front/templates/partials/blog/single.html b/apps/front/templates/partials/blog/single.html index 0aa98bf..4d96de8 100644 --- a/apps/front/templates/partials/blog/single.html +++ b/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,