Bienvenidos sean a este post, hoy agregaremos una opcion interesante.
Como comenta el titulo, hoy agregaremos la primera parte encargada de permitir ingresar y mostrar comentarios en nuestras notas, si vienen del post anterior en ese vimos como ahora nuestras notas muestran modificaciones en tiempo-real y cuando son eliminadas al tenerlas abiertas, estas nos envian de nuevo al listado de la pagina de inicio, como tenemos esta posibilidad aplicaremos lo comentado anteriormente, y en este post nos centraremos principalmente en el modelo que se encargara de los mensajes y para ello necesitaremos el codigo del post anterior, si no lo poseen les dejo un link para descargarlo:
Una vez descargado simplemente deben extraer ambos directorios en el PC y ya esta listo para usarse, en este caso nos centraremos principalmente en el directorio notas pero users lo necesitaremos para poder probar nuestra aplicacion ya que es la encargada de autenticarnos en esta, volviendo a este post debemos ir al directorio notas y dentro tendremos el directorio models, en este crearemos un nuevo archivo con el nombre de mensajes-sequelz.mjs y le agregaremos el siguiente codigo:
models/mensajes-sequelz.mjs
import Sequelize from 'sequelize';
import {
conectarDB as conectarSequlz,
cerrar as cerrarSequlz
} from './sequelizar.mjs';
import EventEmitter from 'events';
class EmisorMensajes extends EventEmitter {}
export const emisor = new EmisorMensajes();
import DBG from 'debug';
const debug = DBG('notas:modelo-mensajes');
const error = DBG('notas:error-mensajes');
Esta es la parte inicial donde primero importaremos los modulos necesarios, el primero sera para «sequelizar» la conexion, en el segundo caso importaremos el metodo encargado de conectarnos a la base de datos y la otra para cerrarlo desde el modulo sequelizar, que creamos y explicamos en este post, despues importaremos al EventEmitter desde events, este nos servira para trabajar con Socket.IO, y despues crearemos una clase llamada EmisorMensajes que sera heredera de EventEmitter y nos permitira accedder a todos los metodos de esta, despues tenemos un bloque encargado de mostrar las notificaciones para ver como trabaja o un error, pasemos a agregar el siguiente bloque de codigo:
let sequelizar;
export class SQMensaje extends Sequelize.Model {}
async function conectarDB() {
if (sequelizar) return;
sequelizar = await conectarSequlz();
SQMensaje.init({
id: { type: Sequelize.INTEGER, autoIncrement: true,
primaryKey: true },
de: Sequelize.STRING,
namespace: Sequelize.STRING,
room: Sequelize.STRING,
mensaje: Sequelize.STRING(1024),
fecha: Sequelize.DATE
}, {
hooks: {
afterCreate: (mensaje, opciones) => {
const aemitir = limpiarMensaje(mensaje);
emisor.emit('nuevomensaje', aemitir);
},
afterDestroy: (mensaje, opciones) => {
emisor.emit('destruirmensaje', {
id: mensaje.id,
namespace: mensaje.namespace,
room: mensaje.room
});
}
},
sequelize: sequelizar,
modelName: 'SQMensaje'
});
await SQMensaje.sync();
}
Primero declaramos una variable que usaremos en momentos, luego creamos una nueva clase que sera heredera la clase Model del paquete Sequelize, y despuues definiremos una nueva funcion que sera la encargada de conectarse a nuestra base de datos, lo primero que haremos es verificar si la variable anterior posee contenido, en caso de ser verdadero sale de la funcion de lo contrario sigue con la funcion, y en este caso la usaremos para almacenar el objeto que sera la conexion a nuestra base de datos, despues utilizaremos el metodo init para iniciar nuestra tabla para almacenar la informacion que en caso de no existir la genera, observen los datos que almacenaremos, haciendo especial enfasis en el namespace y el room para ubicar los comentarios en las notas correspondientes y a su vez usaremos al id como la clave principal y este a su vez se autoincrementara (como se hace habitualmente en sql) y en el resto simplemente establecemos los tipos de datos para cada columna, luego tenemos una propiedad llamada hooks, esta se encarga de enganchar funciones al objeto de opciones de las bases, en este caso lo asociaremos a dos acciones para despues de crear un nuevo dato y para cuando lo eliminamos, en ambos casos enviaremos un evento relacionado a cada uno de ellos.
Esto como explicamos en posts anteriores es simplemente para dar el efecto de actualizacion en «tiempo-real», ya veremos como es esto, despues le indicamos cual usaremos para sequelizar y el nombre de modelo, para finalmente con todo realizado lo sincronizamos, esto es para conectarnos a la base de datos con todo esto comentado podemos proseguir agregando el siguiente bloque de codigo:
function limpiarMensaje(msj) {
return {
id: msj.id,
de: msj.de,
namespace: msj.namespace,
room: msj.room,
mensaje: msj.mensaje,
fecha: msj.timestamp
};
}
Esta funcion solo se encarga de enrutar los datos correctamente, esto nos sera util especialmente para cuando necesitemos pasar la informacion a otras funciones, no hace mas, continuemos agregando la siguiente funcion:
export async function postear(desde, namespace, room, mensaje) {
await conectarDB();
const nuevo = await SQMensaje.create({
de: desde,
namespace: namespace,
room: room,
mensaje: mensaje,
fecha: new Date()
});
}
Esta sera la funcion encargada de agregar los nuevos comentarios en la tabla, primero nos conectaremos con la primer funcion que agregamos y luego mediante el metodo create agregaremos los nuevos datos que recibimos como argumentos, el unico curioso es la fecha de cuando es creada el comentario donde usaremos ese objeto, con todo esto comentado agreguemos la siguiente funcion:
export async function borrar(id) {
await conectarDB();
const msj = await SQMensaje.findOne({ where: { id }});
if (msj) { msj.destroy(); }
}
Esta sera la funcion encargada de borrar los comentarios, para ello solo recibira un dato y en este caso es el id del comentario, de vuelta primero se conectara a la base de datos y en ella mediante el metodo findOne buscaremos el comentario y almacenarlo en el objeto msj, en el siguiente condicional verificamos si este contiene algun elemento y en caso de ser verdero mediante el metodo destroy lo eliminaremos, por ultimo debemos agregar la siguiente funcion:
export async function recientes(namespace, room) {
await conectarDB();
const mensajes = await SQMensaje.findAll({
where: { namespace, room },
order: [ ['fecha', 'DESC'] ],
limit: 20
});
const msj = mensajes.map(mensaje => {
return limpiarMensaje(mensaje);
});
return (msj && msj.length >= 1) ? msj : undefined;
}
Esta sera la funcion encargada de mostrar los ultimos comentarios agregados, para ello recibira el namespace y el room para poder buscarlos en estos, de nuevo nos conectaremos primero a la base de datos, despues crearemos un objeto donde almacenaremos el resultado de aplicar el metodo findAll, este se encarga de devolver todos los elementos cargados en la tabla, para ello pasaremos el namespace y el room que sera el encargado de definir cuales buscaremos, luego estableceremos como ordenarlo, para finalmente limitarlo a un maximo de 20 entradas, con los datos obtenidos y almacenados definiremos un nuevo objeto donde le pasaremos el objeto anterior y mediante map crearemos un mapa, un tipo de array donde cada valor se relaciona con una clave, y para ello tomaremos cada dato y lo «limpiaremos» mediante la funcion que se dedica a eso, la comentamos casi al comienzo, para finalmente tener un condicional donde en caso de que el objeto msj existe y su longitud es mayor o igual a 1, es decir que posee aunque sea un comentario, y en caso de ser verdadero lo devolvemos de lo contrario devolvemos un undefined.
Salvo en la funcion encargada de limpiar los datos, el resto tienen la propiedad de export para que podamos poder importar estas desde otros modulos, ya entenderan el porque a partir de los proximos posts, con esto tenemos el modelo para manejarlos pero todavia nos faltan como rutearlos corrrectamente y la pagina para cargarlos pero estos seran temas en los proximos posts, antes de finalizar les dejo un link con todos los archivos del proyecto y los modificados en este post:
En resumen, hoy hemos dado el primer paso para agregar los comentarios en las notas, en este caso hemos visto como crear el modelo que se encargara del manejo de las mismas, ya sea para su creacion, borrado y mostrar las ultimas, pero esto continuara en los proximos posts sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.


Donación
Es para mantenimento del sitio, gracias!
$1.50
