From 39964255e89167db25c44b2f175673a3d0aa6642 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Tue, 17 Nov 2020 20:55:31 +0100 Subject: [PATCH] Update code --- apps/chat/consumers.py | 25 ++++++++++++------------- apps/front/templates/chat.html | 34 ++++++++++++++++++++++------------ mi_web/settings.py | 6 +++--- 3 files changed, 37 insertions(+), 28 deletions(-) diff --git a/apps/chat/consumers.py b/apps/chat/consumers.py index 17c6042..addef05 100644 --- a/apps/chat/consumers.py +++ b/apps/chat/consumers.py @@ -23,38 +23,37 @@ class ChatConsumer(AsyncWebsocketConsumer): await self.channel_layer.group_discard(self.room_group_name, self.channel_name) async def receive(self, text_data): - ''' Cliente envía información ''' + ''' Cliente envía información y nosotros la recibimos ''' text_data_json = json.loads(text_data) + name = text_data_json["name"] text = text_data_json["text"] - member_send = text_data_json["member_send"] - member_receive = text_data_json["member_receive"] + created_at = text_data_json["createdAt"] - await self.save_message(member_send, member_receive, text) - - # Send message to room group + # Enviamos el mensaje a la sala await self.channel_layer.group_send( self.room_group_name, { "type": "chat_message", + "name": name, "text": text, - "member_send": member_send, - "member_receive": member_receive, + "created_at": created_at, }, ) async def chat_message(self, event): - ''' Recibe información de la sala ''' + ''' Recibimos información de la sala ''' + name = event["name"] text = event["text"] - member_send = event["member_send"] - member_receive = event["member_receive"] + created_at = event["created_at"] # Send message to WebSocket await self.send( text_data=json.dumps( { + "type": "chat_message", + "name": name, "text": text, - "member_send": member_send, - "member_receive": member_receive, + "created_at": created_at } ) ) diff --git a/apps/front/templates/chat.html b/apps/front/templates/chat.html index e1a297a..2c2273c 100644 --- a/apps/front/templates/chat.html +++ b/apps/front/templates/chat.html @@ -5,8 +5,6 @@ Chat - -
@@ -43,17 +41,26 @@ /* * 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'); @@ -72,16 +79,17 @@ MENSAJES.appendChild(MI_CONTENEDOR); } - function enviarNuevoMessage() { + /** + * 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({ - nombre: CAMPO_NOMBRE.value, - texto: CAMPO_TEXTO.value, - fechaCreacion: Date.now() + name: CAMPO_NOMBRE.value, + text: CAMPO_TEXTO.value, + createdAt: Date.now() })); - // Añadimos el nuevo mensaje al HTML - anyadirNuevoMensajeAlHTML(CAMPO_NOMBRE.value, CAMPO_TEXTO.value, true); - // Limpiamos el textarea + // Limpiamos el campo donde hemos escrito CAMPO_TEXTO.value = ''; // Le volvemos a dar el foco para escribir otro mensaje CAMPO_TEXTO.focus(); @@ -104,12 +112,14 @@ CHAT_SOCKET.addEventListener('message', (event) => { console.log('Recibido nuevo mensaje'); const MI_NUEVA_DATA = JSON.parse(event.data); - anyadirNuevoMensajeAlHTML(MI_NUEVA_DATA.nombre, MI_NUEVA_DATA.texto, false); + anyadirNuevoMensajeAlHTML(MI_NUEVA_DATA.name, MI_NUEVA_DATA.text, MI_NUEVA_DATA.name === CAMPO_NOMBRE.value); }); - // Enviar mensaje cuando se pulsa en Enviar - BOTON_ENVIAR.addEventListener('click', enviarNuevoMessage); + // 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); diff --git a/mi_web/settings.py b/mi_web/settings.py index a23242b..713a431 100644 --- a/mi_web/settings.py +++ b/mi_web/settings.py @@ -113,11 +113,11 @@ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' -USE_I18N = True +USE_I18N = False -USE_L10N = True +USE_L10N = False -USE_TZ = True +USE_TZ = False # Static files (CSS, JavaScript, Images)