Add comments broadcast

This commit is contained in:
Andros Fenollosa 2021-03-21 14:24:02 +01:00
parent 3229d7f255
commit 83b28bc1cb
4 changed files with 53 additions and 11 deletions

View File

@ -2,16 +2,22 @@ import json
from channels.generic.websocket import WebsocketConsumer from channels.generic.websocket import WebsocketConsumer
from django.template.loader import render_to_string from django.template.loader import render_to_string
from apps.back.models import Post, Comment from apps.back.models import Post, Comment
from asgiref.sync import async_to_sync
class BlogConsumer(WebsocketConsumer): class BlogConsumer(WebsocketConsumer):
def connect(self): 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() self.accept()
def disconnect(self, close_code): def disconnect(self, close_code):
async_to_sync(self.channel_layer.group_discard)(self.room_group_name, self.channel_name)
pass pass
def receive(self, text_data): def receive(self, text_data):
send = False
text_data_json = json.loads(text_data) text_data_json = json.loads(text_data)
selector = text_data_json["selector"] selector = text_data_json["selector"]
template = text_data_json["template"] template = text_data_json["template"]
@ -47,13 +53,38 @@ class BlogConsumer(WebsocketConsumer):
# Clean form # Clean form
data["newName"] = '' data["newName"] = ''
data["newMessage"] = '' 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 # 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( self.send(
text_data=json.dumps( text_data=json.dumps(
{ {
"selector": selector, "selector": event["text"]["selector"],
"html": render_to_string(template, data) "template": event["text"]["template"],
"html": event["text"]["html"]
} }
) )
) )

View File

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

View File

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

View File

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