Update messages
This commit is contained in:
Andros Fenollosa
parent
8ea8476cc8
commit
11c8266b62
@ -1,11 +1,12 @@
|
|||||||
import json
|
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):
|
def connect(self):
|
||||||
''' Cliente se conecta '''
|
''' Cliente se conecta '''
|
||||||
|
print('cooooooooooooonectando')
|
||||||
# Recoge el nombre de la sala
|
# Recoge el nombre de la sala
|
||||||
self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
|
self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
|
||||||
self.room_group_name = "blog_%s" % self.room_name
|
self.room_group_name = "blog_%s" % self.room_name
|
||||||
@ -16,6 +17,17 @@ class BlogConsumer(AsyncWebsocketConsumer):
|
|||||||
# Informa al cliente del éxito
|
# Informa al cliente del éxito
|
||||||
self.accept()
|
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):
|
def disconnect(self, close_code):
|
||||||
''' Cliente se desconecta '''
|
''' Cliente se desconecta '''
|
||||||
# Leave room group
|
# Leave room group
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -1,4 +1,7 @@
|
|||||||
from django.shortcuts import render
|
from django.shortcuts import render
|
||||||
|
import uuid
|
||||||
|
|
||||||
def blog(request):
|
def all_articles(request):
|
||||||
return render(request, 'blog.html')
|
return render(request, 'layouts/main.html', {
|
||||||
|
"CHANNEL": uuid.uuid4().hex[:20].upper()
|
||||||
|
})
|
||||||
|
|||||||
@ -120,7 +120,7 @@ USE_TZ = True
|
|||||||
STATIC_URL = '/static/'
|
STATIC_URL = '/static/'
|
||||||
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
|
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
|
||||||
|
|
||||||
ASGI_APPLICATION = "asgi.application"
|
ASGI_APPLICATION = "my_demo.asgi.application"
|
||||||
|
|
||||||
CHANNEL_LAYERS = {
|
CHANNEL_LAYERS = {
|
||||||
"default": {
|
"default": {
|
||||||
|
|||||||
@ -19,5 +19,5 @@ from apps.front import views
|
|||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
path('admin/', admin.site.urls),
|
path('admin/', admin.site.urls),
|
||||||
path('', views.blog),
|
path('', views.all_articles),
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user