andros/ejemplo-de-chat-con-Django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update code

Browse Source
This commit is contained in:
Andros Fenollosa 2020-11-17 20:55:31 +01:00
parent 0be01da629
commit 39964255e8
3 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/chat/consumers.py
View File

@ -23,38 +23,37 @@ class ChatConsumer(AsyncWebsocketConsumer):
await self.channel_layer.group_discard(self.room_group_name, self.channel_name) await self.channel_layer.group_discard(self.room_group_name, self.channel_name)
async def receive(self, text_data): 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) text_data_json = json.loads(text_data)
name = text_data_json["name"]
text = text_data_json["text"] text = text_data_json["text"]
member_send = text_data_json["member_send"] created_at = text_data_json["createdAt"]
member_receive = text_data_json["member_receive"]
await self.save_message(member_send, member_receive, text) # Enviamos el mensaje a la sala
# Send message to room group
await self.channel_layer.group_send( await self.channel_layer.group_send(
self.room_group_name, self.room_group_name,
{ {
"type": "chat_message", "type": "chat_message",
"name": name,
"text": text, "text": text,
"member_send": member_send, "created_at": created_at,
"member_receive": member_receive,
}, },
) )
async def chat_message(self, event): async def chat_message(self, event):
''' Recibe información de la sala ''' ''' Recibimos información de la sala '''
name = event["name"]
text = event["text"] text = event["text"]
member_send = event["member_send"] created_at = event["created_at"]
member_receive = event["member_receive"]
# Send message to WebSocket # Send message to WebSocket
await self.send( await self.send(
text_data=json.dumps( text_data=json.dumps(
{ {
"type": "chat_message",
"name": name,
"text": text, "text": text,
"member_send": member_send, "created_at": created_at
"member_receive": member_receive,
} }
) )
) )

34
apps/front/templates/chat.html
View File

@ -5,8 +5,6 @@
<title>Chat</title> <title>Chat</title>
<!-- Spectre CSS --> <!-- Spectre CSS -->
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head> </head>
<body> <body>
<div class="container grid-md"> <div class="container grid-md">
@ -43,17 +41,26 @@
/* /*
* VARIABLES * VARIABLES
*/ */
// Define el nombre de la sala
const SALA_CHAT = 'python'; const SALA_CHAT = 'python';
// Conecta con WebSockets
const CHAT_SOCKET = new WebSocket('ws://localhost:8000/ws/chat/' + SALA_CHAT + '/'); 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'); const CAMPO_NOMBRE = document.querySelector('#nombre');
// Captura el contenedor que posee todos los mensajes
const MENSAJES = document.querySelector('#mensajes'); const MENSAJES = document.querySelector('#mensajes');
// Captura el campo con el nuevo texto
const CAMPO_TEXTO = document.querySelector('#texto'); const CAMPO_TEXTO = document.querySelector('#texto');
// Boton para enviar mensaje
const BOTON_ENVIAR = document.querySelector('#enviar'); const BOTON_ENVIAR = document.querySelector('#enviar');
/* /*
* FUNCIONES * FUNCIONES
*/ */
/**
* Método que añade un nuevo mensaje en el HTML (#mensajes)
*/
function anyadirNuevoMensajeAlHTML(nombre, texto, propio = false) { function anyadirNuevoMensajeAlHTML(nombre, texto, propio = false) {
// Contenedor // Contenedor
const MI_CONTENEDOR = document.createElement('div'); const MI_CONTENEDOR = document.createElement('div');
@ -72,16 +79,17 @@
MENSAJES.appendChild(MI_CONTENEDOR); 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 // Envia al WebSocket un nuevo mensaje
CHAT_SOCKET.send(JSON.stringify({ CHAT_SOCKET.send(JSON.stringify({
nombre: CAMPO_NOMBRE.value, name: CAMPO_NOMBRE.value,
texto: CAMPO_TEXTO.value, text: CAMPO_TEXTO.value,
fechaCreacion: Date.now() createdAt: Date.now()
})); }));
// Añadimos el nuevo mensaje al HTML // Limpiamos el campo donde hemos escrito
anyadirNuevoMensajeAlHTML(CAMPO_NOMBRE.value, CAMPO_TEXTO.value, true);
// Limpiamos el textarea
CAMPO_TEXTO.value = ''; CAMPO_TEXTO.value = '';
// Le volvemos a dar el foco para escribir otro mensaje // Le volvemos a dar el foco para escribir otro mensaje
CAMPO_TEXTO.focus(); CAMPO_TEXTO.focus();
@ -104,12 +112,14 @@
CHAT_SOCKET.addEventListener('message', (event) => { CHAT_SOCKET.addEventListener('message', (event) => {
console.log('Recibido nuevo mensaje'); console.log('Recibido nuevo mensaje');
const MI_NUEVA_DATA = JSON.parse(event.data); 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 // Enviar mensaje cuando se pulsa en el botón Enviar
BOTON_ENVIAR.addEventListener('click', enviarNuevoMessage); 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> </script>
</body> </body>
</html> </html>

6
mi_web/settings.py
View File

@ -113,11 +113,11 @@ LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC' 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) # Static files (CSS, JavaScript, Images)