andros/demo-HTML-over-WebSockets-in-Django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comments broadcast

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/back/consumers.py
View File

@ -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": event["text"]["selector"],
"template": event["text"]["template"],
"html": event["text"]["html"]
}
)
)

10
apps/front/templates/layouts/main.html
View File

@ -40,19 +40,23 @@
});
document.$CHAT_SOCKET.addEventListener('message', (event) => {
console.log(event);
const NEW_DATA = JSON.parse(event.data);
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: {}
}));
});

9
apps/front/templates/partials/blog/all_articles.html
View File

@ -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
}

4
apps/front/templates/partials/blog/single.html
View File

@ -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,