Bienvenidos sean a este post, hoy veremos como aplicarlo a las notas.
En el post anterior vimos como establecer actualizaciones en tiempo-real para nuestra pagina de inicio, donde al crear o eliminar una nota en una sesion se veia reflejado automaticamente en otras sesiones, en este post aplicaremos lo mismo para ver como se cambia una nota automaticamente y para ello necesitaremos el codigo del post anterior, en caso de no tenerlo les dejo un link para descargarlo:
Simplemente extraigan ambos directorios en el PC y ya estamos listos para poder utilizarlo, en este caso trabajaremos con el directorio notas pero el directorio users lo necesitaremos para hacer las verificaciones pero de eso hablaremos al final, volviendo a las modificaciones iremos al directorio notas, y dentro directorio routes tomarremos el archivo notas.mjs y al inicio agregaremos la siguientes dos lineas:
import { emitirTituloNotas } from './index.mjs';
import { io } from '../app.mjs';El primero sera para importar la funcion que se encarga de emitir el evento encargado de los titulos y claves de las notas, el segundo es el objeto que nos permite establecer la conexion entre el server y el cliente mediante Socket.IO, si recuerdan en el post anterior en este archivo agregamos una funcion llamada init sin ninguna definicion, tomemos esa funcion y modifiquemosla de la siguiente manera:
export function init()
{
io.of('/notas').on('connect', socket => {
if (socket.handshake.query.clave) {
socket.join(socket.handshake.query.clave);
}
});
notas.on('notacambiada', nota => {
const aemitir = {
clave: nota.clave,
titulo: nota.titulo,
cuerpo: nota.cuerpo
};
io.of('/notas').to(nota.clave).emit('notacambiada', aemitir);
emitirTituloNotas();
});
notas.on('notaborrada', clave => {
io.of('/notas').to(clave).emit('notaborrada', clave);
emitirTituloNotas();
});
}Primero definiremos un namespace para nuestro socket.io y usaremos el evento connect donde verificaremos si tenemos una valor de clave para el query, en caso de existir lo usaremos para unirnos al room que le pasamos con ese valor, si vienen de posts anteriores hemos mencionado que Socket.IO genera namespace y rooms para la interaccion de los eventos, pero de los rooms hablaremos en un segundo. Lo siguiente es un escuchador para el evento notacambiada, en este tendremos una funcion llamada nota la cual primero genera un objeto con todos los datos de la nota, despues usaremos el objeto de stock.io para usar el namespace que definimos anteriormente pero le agregamos un to que sera para indicar el room que generamos, en este caso lo identificaremos con la clave, y despues emitiremos el objeto con los datos de la nota mediante el evento notacambiada, despues llamaremos a emitirTituloNotas, sobre esta funcion hablamos en el post anterior, el siguiente escuchador es muy similar pero en este caso sera para cuando borramos una nota, pero a diferencia del anterior no necesitamos un objeto sino simplemente pasar la clave de la nota.
Si observaron en ambos casos informamos no solamente el namespace sino tambien el room, para ello usamos la siguiente sintaxis:
objeto_socketio.to('/namespace').of(room)Primero mediante to le informaremos el namespace y luego con of le especificaremos un room, en el caso de namespace siempre lleva una nomenclatura al estilo Unix, en cambio el otro es simplemente un nombre que lo identifique, por esta razon usamos la clave de la nota, con esto comentado nuestro siguiente paso sera ir al archivo vistanota.hbs en el directorio views, buscaremos las siguientes lineas:
{{#if nota }}<h3>{{ nota.titulo }}</h3>{{/if}}
{{#if nota }}<p>{{ nota.cuerpo }}</p>{{/if}}Y las modificaremos de la siguiente manera:
{{#if nota }}<h3 id="titulonota">{{ nota.titulo }}</h3>{{/if}}
{{#if nota }}<div id="cuerponota">{{ nota.cuerpo }}</div>{{/if}}En este caso agregamos un id para el primer elemento, en el segundo caso reemplazamos el parrafo con un div y le agregamos un identificador, nuestro siguiente paso sera agregar el siguiente bloque de codigo despues del llamado footerjs en este mismo archivo:
{{#if clavenota}}
<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
let socket = io('/notas', {
query: { clave: '{{ clavenota }}' }
});
socket.on('notacambiada', nota => {
$('h3#titulonota').empty();
$('h3#titulonota').text(nota.titulo);
$('#titulonavbar').empty();
$('#titulonavbar').text(nota.titulo);
$('#cuerponota').empty();
$('#cuerponota').text(nota.cuerpo);
});
socket.on('notaborrada', clave => {
location.href = "/";
});
});
</script>
{{/if}}
Primero cargaremos el script que se encarga de socket.io, recuerden que no debemos redireccionarlo porque la misma libreria se encarga por nosotros (una masa), despues tenemos un bloque de jQuery donde primero crearemos un objeto de tipo socket.io, le pasaremos el namespace y luego los dos elementos que usabamos con handshake y haciamos la union al room, despues tenemos dos escuchadores y el primero sera para cuando cambiamos la nota, en este caso seleccionaremos tres elementos los cuales limpiaremos con empty y luego pasaremos la nueva informacion, en este caso tenemos los id que agregamos anteriormente pero hay uno que todavia no existe, esto sera para notificar que se modifico la nota y actualice en todas las sesiones al mismo tiempo, y el ultimo sera para cuando borramos una nota y este nos redirecciona al origen, solo nos resta una modificacion mas y esta es en el archivo header.hbs en el directorio partials, donde buscaremos la siguiente linea:
<span class="navbar-text col">{{ title }}</span>Y lo modificaremos de la siguiente manera:
<span id="titulonavbar" class="navbar-text col">{{ title }}</span>En este caso solamente agregamos un id, y si son observadores es el id que nos faltaba en el bloque anterior, con esto ahora si podemos pasar a probarlo para ver como trabaja, para ello primero corran desde el directorio notas al comando npm start y desde otra terminal ejecuten desde el directorio users el comando npm start para poder autenticar el usuario de nuestra aplicacion, veamos como trabaja mediante el siguiente video
En el video podemos ver como al momento de editar una nota esta se modifica en todas las sesiones al mismo tiempo, asi como cuando eliminamos la nota este automaticamente nos envio a la pagina de inicio en las sesiones donde estaba abierta la nota, con esto ya tenemos no solamente sincronicidad con nuestra pagina de inicio sino tambien con las notas, antes de finalizar les dejo un link con todos los archivos del proyecto y los modificados en este post:
En resumen, hoy hemos visto como agregar Socket.IO a las notas, esto nos permite poder actualizar las notas cuando hacemos modificaciones o eliminamos la misma, las modificaciones correspondientes tanto en el codigo como en las paginas, espero les haya resultado de utilidad 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
El blog de Tinchicus 