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

Update messages

Browse Source
This commit is contained in:
Andros Fenollosa 2021-03-10 23:36:26 +01:00
parent 8ea8476cc8
commit 11c8266b62
5 changed files with 22 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/back/consumers.py
View File

@ -1,11 +1,12 @@
import json
from channels.generic.websocket import AsyncWebsocketConsumer
from channels.generic.websocket import WebsocketConsumer
from django.template.loader import render_to_string
class BlogConsumer(AsyncWebsocketConsumer):
class BlogConsumer(WebsocketConsumer):
def connect(self):
''' Cliente se conecta '''
print('cooooooooooooonectando')
# Recoge el nombre de la sala
self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
self.room_group_name = "blog_%s" % self.room_name
@ -16,6 +17,17 @@ class BlogConsumer(AsyncWebsocketConsumer):
# Informa al cliente del éxito
self.accept()
# Send message to WebSocket
self.send(
text_data=json.dumps(
{
"selector": "#articles",
"position": "appendChild",
"html": render_to_string('blog/articles.html', {'pag': 1})
}
)
)
def disconnect(self, close_code):
''' Cliente se desconecta '''
# Leave room group

125
apps/front/templates/blog.html
View File

@ -1,125 +0,0 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Chat</title>
<!-- Spectre CSS -->
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
</head>
<body>
<div class="container grid-md">
<h1 class="mt-2 text-center">Chat con Django</h1>
<div class="columns">
<aside class="column col-4">
<!-- Configurar alias -->
<div class="form-group">
<label class="form-label">
Nombre
<input id="nombre" class="form-input" type="text" placeholder="Oveja programadora...">
</label>
</div>
<!-- Fin Configurar alias -->
</aside>
<main class="column">
<!-- Mensajes -->
<section id="mensajes"></section>
<!-- Fin Mensajes -->
<!-- Enviar mensajes -->
<section class="form-group">
<input id="texto" class="form-input" type="text" placeholder="Nuevo mensaje...">
<button id="enviar" class="btn btn-block">Enviar</button>
</section>
<!-- Fin Enviar mensajes -->
</main>
</div>
</div>
<script>
/*
* VARIABLES
*/
// Define el nombre de la sala
const SALA_CHAT = 'python';
// Conecta con WebSockets
const CHAT_SOCKET = new WebSocket('ws://localhost:8000/ws/chat/' + SALA_CHAT + '/');
// Captura el campo con el nombre del usuario
const CAMPO_NOMBRE = document.querySelector('#nombre');
// Captura el contenedor que posee todos los mensajes
const MENSAJES = document.querySelector('#mensajes');
// Captura el campo con el nuevo texto
const CAMPO_TEXTO = document.querySelector('#texto');
// Boton para enviar mensaje
const BOTON_ENVIAR = document.querySelector('#enviar');
/*
* FUNCIONES
*/
/**
* Método que añade un nuevo mensaje en el HTML (#mensajes)
*/
function anyadirNuevoMensajeAlHTML(nombre, texto, propio = false) {
// Contenedor
const MI_CONTENEDOR = document.createElement('div');
MI_CONTENEDOR.classList.add(propio ? 'bg-primary' : 'bg-secondary', 'p-2');
// Nombre
const MI_NOMBRE = document.createElement('h2');
MI_NOMBRE.classList.add('text-tiny', 'text-bold', 'mt-2');
MI_NOMBRE.textContent = nombre;
MI_CONTENEDOR.appendChild(MI_NOMBRE);
// Texto
const MI_TEXTO = document.createElement('p');
MI_TEXTO.classList.add('my-2');
MI_TEXTO.textContent = texto;
MI_CONTENEDOR.appendChild(MI_TEXTO);
// Anyade todo a MENSAJES
MENSAJES.appendChild(MI_CONTENEDOR);
}
/**
* Método que envia el mensaje al consumer por medio de WebSockets
*/
function enviarNuevoMensaje() {
// Envia al WebSocket un nuevo mensaje
CHAT_SOCKET.send(JSON.stringify({
name: CAMPO_NOMBRE.value,
text: CAMPO_TEXTO.value,
createdAt: Date.now()
}));
// Limpiamos el campo donde hemos escrito
CAMPO_TEXTO.value = '';
// Le volvemos a dar el foco para escribir otro mensaje
CAMPO_TEXTO.focus();
}
/*
* EVENTOS
*/
// Conectado
CHAT_SOCKET.addEventListener('open', () => {
console.log('Conectado');
});
// Desconectado
CHAT_SOCKET.addEventListener('close', () => {
console.log('Desconectado');
});
// Recibir mensaje
CHAT_SOCKET.addEventListener('message', (event) => {
console.log('Recibido nuevo mensaje');
const MI_NUEVA_DATA = JSON.parse(event.data);
anyadirNuevoMensajeAlHTML(MI_NUEVA_DATA.name, MI_NUEVA_DATA.text, MI_NUEVA_DATA.name === CAMPO_NOMBRE.value);
});
// Enviar mensaje cuando se pulsa en el botón Enviar
BOTON_ENVIAR.addEventListener('click', enviarNuevoMensaje);
// Enviar mensaje cuando se pulsa en el teclado Enter
CAMPO_TEXTO.addEventListener('keyup', (e) => e.keyCode === 13 ? enviarNuevoMensaje() : false);
</script>
</body>
</html>

7
apps/front/views.py
View File

@ -1,4 +1,7 @@
from django.shortcuts import render
import uuid
def blog(request):
return render(request, 'blog.html')
def all_articles(request):
return render(request, 'layouts/main.html', {
"CHANNEL": uuid.uuid4().hex[:20].upper()
})

2
my_demo/settings.py
View File

@ -120,7 +120,7 @@ USE_TZ = True
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
ASGI_APPLICATION = "asgi.application"
ASGI_APPLICATION = "my_demo.asgi.application"
CHANNEL_LAYERS = {
"default": {

2
my_demo/urls.py
View File

@ -19,5 +19,5 @@ from apps.front import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.blog),
path('', views.all_articles),
]