Bienvenidos sean a este post, hoy continuaremos con los comentarios.
En el post anterior comenzamos con la posibilidad de poder agregar un comentario a nuestras notas para establecer una comunicacion entre distintos usuarios y aplicar algunos de los temas que vimos en posts anteriores, para continuar con este tema necesitaremos el codigo del post anterior pero sino lo tenes te dejo un link para descargarlo:
Simplemente extrae los dos directorios en el pc para poder utilizarlos, en este caso nos centraremos unicamente en el directorio notas pero para verificar su funcionamiento necesitaremos de los dos, volviendo al tema de hoy dentro del directorio notas iremos al archivo notas.mjs en el directorio routes y al comienzo del mismo agregaremos el siguiente segmento de codigo:
import { postear, borrar,
recientes,
emisor as EventosMsj } from '../models/mensajes-sequelz.mjs';
import DBG from 'debug';
const debug = DBG('notas:home');
const error = DBG('notas:error-home');
En la primera parte importaremos las distintas funciones que creamos en el modelo del post anterior, las cuales se encargaran de manejar nuestros comentarios, despues agregamos tres lineas que son basicameente para la depuracion de nuestro codigo, ya lo explicamos en posts anteriores pero basicamente importan el modulo de debug para despues crear dos objetos que usaremos para mostrar en la consola algun mensaje y otro para indicar un error en la seccion de error de stdin respectivamente, nuestro siguiente paso sera modificar a la funcion init que tenemos al final y al final del bloque de la misma agregaremos estos dos escuchadores:
EventosMsj.on('nuevomensaje', nuevo => {
io.of(nuevo.namespace).to(nuevo.room)
.emit('nuevomensaje', nuevo);
});
EventosMsj.on('destruirmensaje', datos => {
io.of(datos.namespace).to(datos.room)
.emit('destruirmensaje', datos);
});
En este caso lo usaremos para escuchar dos eventos particulares, el primero sera para cuando ingresa un nuevo comentario donde estableceremos el namespace y el room para emitir ese mensaje nuevamente, y en el segundo caso sera para cuando borramos un mensaje, donde usaremos la misma estructura y ambos casos seran basicamente los encargados de realizar la actualizacion en «tiempo real» dado que envia el evento al navegador pero esto ya veremos como lo hace, nuestro siguiente paso sera tambien en la funcion init donde tomaremos el siguiente segmento de codigo:
io.of('/notas').on('connect', socket => {
if (socket.handshake.query.clave) {
socket.join(socket.handshake.query.clave);
}
});
Y lo modificaremos de la siguiente manera:
io.of('/notas').on('connect', async socket => {
let clavenota = socket.handshake.query.clave;
if (clavenota) {
socket.join(clavenota);
socket.on('crear-msj', async(nuevo, fn) => {
try {
await postear( nuevo.de,
nuevo.namespace,
nuevo.room,
nuevo.mensaje);
fn('ok');
} catch(err) {
error(`Error al crearlo ${err.stack}`);
}
});
socket.on('borrar-msj', async (datos) => {
try {
await borrar(datos.id);
} catch(err) {
error(`Error al borrarlo ${err.stack}`);
}
});
}
});
Nuestro principal cambio es asignar en un objeto el resultado del handshake o conexion del socket, despues tendremos el condicional donde verifica si este se realizo, en caso de ser verdadero seguiremos usando el join para este pero ahora le agregamos dos escuchadores mas, comentemos sobre el primero.
El primero sera para cuando creamos un nuevo comentario donde usaremos a la funcion postear del modulo mensajes-sequelz, y a este le pasaremos todos los datos como tenemos un try/catch si no ocurre ningun inconveniente procede a realizarlo de lo contrario nos notificara el error, el siguiente escuchador es muy similar pero es para cuando borramos un comentario y llama a su respectiva funcion pero la estructura es exactamente la misma, es decir que ahora tendremos escuchadores para cuando trabajemos con los comentarios ya sea para crearlos o borrarlos, solo nos resta unas modificaciones mas para poder probarlo, pero eso lo veremos en el proximo post antes de finalizar les dejo un link para descargar todos los archivos del proyecto asi como tambien los modificados en este post:
En resumen, hoy hemos agregado los enrutadores para nuestros comentarios, en el post anterior agregamos el modelo para manejarlos y en este los escuchadores para poder enrutarlos correctamente en base a los eventos emitidos, en el proximo trabajaremos con la ultima modificacion para verlo en accion 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
