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

add

Browse Source
This commit is contained in:
Andros Fenollosa
2020-11-15 10:52:18 +01:00
commit 75de13e7a2
25 changed files with 449 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
apps/chat/__init__.py Normal file
View File

3
apps/chat/admin.py Normal file
View File

@ -0,0 +1,3 @@
from django.contrib import admin
# Register your models here.

5
apps/chat/apps.py Normal file
View File

@ -0,0 +1,5 @@
from django.apps import AppConfig
class ChatConfig(AppConfig):
name = 'chat'

60
apps/chat/consumers.py Normal file
View File

@ -0,0 +1,60 @@
import json
from channels.generic.websocket import AsyncWebsocketConsumer
from asgiref.sync import sync_to_async
class ChatConsumer(AsyncWebsocketConsumer):
async def connect(self):
''' Cliente se conecta '''
# Recoge el nombre de la sala
self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
self.room_group_name = "chat_%s" % self.room_name
# Se une a la sala
await self.channel_layer.group_add(self.room_group_name, self.channel_name)
# Informa al cliente del éxito
await self.accept()
async def disconnect(self, close_code):
''' Cliente se desconecta '''
# Leave room group
await self.channel_layer.group_discard(self.room_group_name, self.channel_name)
async def receive(self, text_data):
''' Cliente envía información '''
text_data_json = json.loads(text_data)
text = text_data_json["text"]
member_send = text_data_json["member_send"]
member_receive = text_data_json["member_receive"]
await self.save_message(member_send, member_receive, text)
# Send message to room group
await self.channel_layer.group_send(
self.room_group_name,
{
"type": "chat_message",
"text": text,
"member_send": member_send,
"member_receive": member_receive,
},
)
async def chat_message(self, event):
''' Recibe información de la sala '''
text = event["text"]
member_send = event["member_send"]
member_receive = event["member_receive"]
# Send message to WebSocket
await self.send(
text_data=json.dumps(
{
"text": text,
"member_send": member_send,
"member_receive": member_receive,
}
)
)

0
apps/chat/migrations/__init__.py Normal file
View File

3
apps/chat/models.py Normal file
View File

@ -0,0 +1,3 @@
from django.db import models
# Create your models here.

7
apps/chat/routing.py Normal file
View File

@ -0,0 +1,7 @@
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer),
]

3
apps/chat/tests.py Normal file
View File

@ -0,0 +1,3 @@
from django.test import TestCase
# Create your tests here.

3
apps/chat/views.py Normal file
View File

@ -0,0 +1,3 @@
from django.shortcuts import render
# Create your views here.

0
apps/front/__init__.py Normal file
View File

3
apps/front/admin.py Normal file
View File

@ -0,0 +1,3 @@
from django.contrib import admin
# Register your models here.

5
apps/front/apps.py Normal file
View File

@ -0,0 +1,5 @@
from django.apps import AppConfig
class FrontConfig(AppConfig):
name = 'front'

0
apps/front/migrations/__init__.py Normal file
View File

3
apps/front/models.py Normal file
View File

@ -0,0 +1,3 @@
from django.db import models
# Create your models here.

118
apps/front/templates/chat.html Normal file
View File

@ -0,0 +1,118 @@
<!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">
<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>
<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
*/
const SALA_CHAT = 'python';
const CHAT_SOCKET = new WebSocket('ws://localhost:8000/ws/chat/' + SALA_CHAT);
const CAMPO_NOMBRE = document.querySelector('#nombre');
const MENSAJES = document.querySelector('#mensajes');
const CAMPO_TEXTO = document.querySelector('#texto');
const BOTON_ENVIAR = document.querySelector('#enviar');
/*
* FUNCIONES
*/
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);
}
function enviarNuevoMessage() {
// Envia al WebSocket un nuevo mensaje
CHAT_SOCKET.send(JSON.stringify({
nombre: CAMPO_NOMBRE.value,
texto: CAMPO_TEXTO.value,
fechaCreacion: Date.now()
}));
// Añadimos el nuevo mensaje al HTML
anyadirNuevoMensajeAlHTML(CAMPO_NOMBRE.value, CAMPO_TEXTO.value, true);
// Limpiamos el textarea
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 miNuevaData = JSON.parse(event.data);
// Add message to View
this.addMessage(
myData.member_send === this.$store.state.info_user.id,
myData.text
);
});
// Enviar mensaje cuando se pulsa en Enviar
BOTON_ENVIAR.addEventListener('click', enviarNuevoMessage);
</script>
</body>
</html>

3
apps/front/tests.py Normal file
View File

@ -0,0 +1,3 @@
from django.test import TestCase
# Create your tests here.

4
apps/front/views.py Normal file
View File

@ -0,0 +1,4 @@
from django.shortcuts import render
def chat(request):
return render(request, 'chat.html')