Node.js / Socket.IO y Express

Bienvenidos sean a este post, hoy integraremos la libreria a nuestra aplicacion.

En el post anterior vimos la parte teorica de Socket.IO y mencionamos que este envuelve al objeto HTTP Server, si les suena familiar es porque ya vimos un concepto parecido cuando creamos el sniffer en este post, en ese caso asociabamos un escuchador a cualquier evento HTTP para mostrarlos, y Socket.IO usa un concepto muy similar porque escuchara las solicitudes HTTP y respondera a unos especificos mediante el protocolo de Socket.IO para comunicarse con el codigo en el navegador, para comenzar a trabajar vamos a necesitar el ultimo codigo de notas que utilizamos hasta este post, en caso de no tenerlo les dejo un link para descargarlo:

Una vez descargado simplemente extraigan los dos directorios en el PC y ya tendremos todo listo para implementarlo, en este caso tendremos un directorio llamado users que contiene un servidor de usuarios para autenticarnos de forma local en nuestra aplicacion, el otro directorio llamado notas y nuestra aplicacion en si, ingresemos en este ultimo y ejecutemos el siguiente comando:

$ npm install socket.io@2.x passport.socketio@3.7.x --save

Este nos instalara dos paquetes, el primero sera el de socket.io en si, este sera para algunas tareas, y el segundo sera la misma libreria pero para passport, recuerden que es la encargada de autenticarnos en la aplicacion, nuestro siguiente paso sera ir al archivo app.mjs y al inicio agregaremos las siguientes lineas:

import socketio from 'socket.io';
import passportSocketIo from 'passport.socketio';

Estas dos lineas se encargan de importar los paquetes que instalamos anteriormente, nuestro siguiente paso sera buscar la siguiente linea:

export const sesionCookie = 'notascookie.sid';

Y le agregaremos el siguiente segmento de codigo:

const secretoSesion = 'keyboard cat';
const almacenSesion = new FileStore({ path: "Sessions" });

Si recuerdan cuando trabajamos con passport en este post, establecimos un secreto o secret para trabajar con este, en este caso establecemos el mismo que el utilizado para passport asi como el lugar donde almacenaremos la sesion, esto debemos hacerlo asi porque vamos a integrar a Socket.IO con passport, nuestro siguiente paso sera buscar la siguiente linea:

server.on('listening', onListening);

E inmediatamente despues de esta agregaremos el siguiente segmento de codigo:

export const io = socketio(server);

io.use(passportSocketIo.authorize({
        cookieParser: cookieParser,
        key: sesionCookie,
        secret: secretoSesion,
        store: almacenSesion
}));

Primero definiremos un objeto de socket.io, que sera el encargado de crear la conexion con el servidor HTTP mediante Socket.IO y en este objeto aplicaremos al metodo authorize para autorizar el uso de socket.io en passport, observen que usamos varios elementos anteriores pero tambienn los nuevos, con nuestras propiedades establecidas solo nos resta un cambio mas, para ello deben buscar el siguiente bloque de codigo:

app.use(session({
        store: new FileStore({ path: "sessions" }),
        secret: 'keyboard cat',
        resave: true,
        saveUninitialized: true,
        name: sesionCookie
}));

Y lo modificaremos de la siguiente manera:

app.use(session({
        store: almacenSesion,
        secret: secretoSesion,
        resave: true,
        saveUninitialized: true,
        name: sesionCookie
}));

En este caso basicamente le pasamos los mismos datos que utilizamos para Socket.IO, recuerden que vamos a usar a los dos juntos, el resto sigue trabajando de la misma forma, si lo prueban deberia seguir funcionando como lo hacia hasta ahora pero la diferencia esta internamente porque ahora todo el proceso se realiza mediante Socket.IO el cual envuelve a passport, pero esto es solo el comienzo y en los siguientes posts seguiremos trabajando, antes de finalizar les dejo un archivo que contiene todos los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos visto como trabajar con Socket.IO con Express, para ello primero instalamos las librerias necesarias en nuestra aplicacion notas, luego hicimos algunas modificaciones para poder utilizar esta libreria junto a passport, espero les haya sido 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.