Las aplicaciones en tiempo real vienen pegando muy fuerte en el ambiente del desarrollo, tal vez te ha tocado y ya tienes experiencia trabajando con esta tecnolog铆a, entonces sabes de que estamos hablando, si no as铆, no te preocupes en este post nos acercaremos un poco a ese tema pero utilizando RxDB, una base de datos en tiempo real para aplicaciones en javascript, vamos all谩!

Lo primero que debes preguntarte es a que no referimos a aplicaciones en tiempo real. Pues bien es mas sencillo de entender de lo que piensas, b谩sicamente son aplicaciones que tienen una comunicaci贸n bidireccional, din谩mica y fluida entre el cliente y el servidor, por tanto la transmisi贸n de datos entre estos dos actores debe ser inmediata.

Vamos con RxDB

Si miras a tu alrededor es com煤n encontrar bases de datos relacionales, distribuidas, orientadas a objetos, orientadas a grafos y noSQL, en esta 煤ltima categor铆a se encuentra RxDB, pues su propia p谩gina indica que esta hecha para aplicaciones en javascript como webs, aplicaciones h铆bridas y para nodeJS.

Todo esto es gracias su reactividad, es posible escuchar cambios de diversas consultas e incluso subscribirnos a cambios espec铆ficos, como por ejemplo la actualizaci贸n de un solo campo.

A la pr谩ctica

Video de vistazo practico a RxDB - El dev sin site

Vamos a ver RxDB en acci贸n, haremos un ejemplo con simplemente nodejs, por lo tanto no vamos a utilizar front solo nuestra terminal, bien, manos a la obra.

Instalaci贸n

Para instalar lo primero que debemos hacer es ejecutar los siguientes comando en la terminal:

Si usas npm:

npm install rxdb --save
npm install rxjs --save
Instalaci贸n de dependencias usando npm

Si usas yarn es muy similar:

yarn add rxdb --save
yasn add rxjs --save
Instalaci贸n de dependencias usando yarn

Necesitamos instalar las dependencias rxdb y rxjs, en tu package.json debe quedar de la siguiente forma:

RxDB y RxJS

Configurando una BD

Vamos a crear un archivo index.js, all铆 vamos a importar el paquete rxdb, de la siguiente forma:

const RxDB = require('rxdb');
Importando rxdb

La documentaci贸n oficial indica que hay que agregar un adaptador para conectarse a la base de datos, aqu铆 tienes la lista completa, lo genial esto es que puede utilizarse en memoria, en el browser o en nodejs, para nuestro caso existe pouchdb-adapter-leveldb que debe ser agregado junto al paquete leveldown, considera que RxDB no es una base de datos autocontenida por tanto generar谩 algunos archivos y carpetas dentro de nuestro sistema, bien, finalmente tu package.json ahora tendr谩 el siguiente aspecto:

Package.json de referencia

Una vez agregadas las nuevas dependencias, la configuraci贸n es simplemente a帽adir unas pocas l铆neas:

//...
RxDB.plugin(require('pouchdb-adapter-leveldb')); // plugins
const leveldown = require('leveldown');

const database = await RxDB.create({
    name: './eldevsinsiteDB', // nombre de base de datos
    adapter: leveldown // usamos adaptador
});
Configurando base de datos

En el c贸digo anterior ha agregado el plugin a RxDB y tambi茅n se le asign贸 un nombre a la base de datos, ojo recuerda a帽adir la ruta a donde va a alojarse la base de datos, luego estamos indicando que el adaptador elegido es leveldown.

Definiendo un schema y creando una colecci贸n

B谩sicamente lo 煤nico que debemos hacer es agregar un objeto json, gracias al est谩ndar json-schema, pero en pocas palabras es un clave-valor, miremos el siguiente c贸digo:

// ...
const userSchema = {
    title: 'user schema',
    version: 0,
    description: 'Some description',
    type: 'object',
    properties: {
        id: {
            type: 'string',
            primary: true
        },
        name: {
            type: 'string'
        },
        email: {
            type: 'string'
        }
    },
    required: ['id', 'email', 'name']
};
Definici贸n del esquema user

Traduciendo lo que definimos fue:

  • Tiene "user schema" como t铆tulo.
  • La versi贸n es 0(cero por si no lo parece).
  • Agregamos alguna descripci贸n.
  • Y las propiedades son un id(string, primario), name(string), email(string).
  • Los campos requeridos son id, email, name.

Para crear la colecci贸n es todav铆a mucho m谩s sencillo, pues solo debemos asignarle un nombre, y pasarle el esquema previamente creado, de la siguiente manera:

//...
const collection = await database.collection({
    name: 'user', // nombre de coleccion
    schema: userSchema // esquema user
});
Colecci贸n de usuarios

Insertando datos a RxDB

Este paso es super sencillo, el insert es el mismo tal cual como lo haces en mongo db, pas谩ndole el objeto que ser谩 almacenado:

setInterval(() => {
    collection.insert({
        id: `${Math.random()}-${Math.random()}`,
        name: 'fernando',
        email: 'jf.palacios.sz@gmail.com'
    });
    console.log('insert');
}, 2000);
Insertando datos cada 2 segundos

En nuestro caso, estamos utilizando la instancia de la colecci贸n para llamar a su funci贸n insert y crear un objeto cada 2 segundos, y por supuesto nos aseguramos de agregar un id aleatorio, recuerda que indicamos en el esquema que el id es primario, as铆 nos evitamos de errores.

Momento de la subscripci贸n (ojal谩 fuera a Netflix)

Finalmente el chiste de este ejemplo es porque queremos ver lo realtime, entonces para eso tenemos disponible subscripciones a eventos, por lo que debemos identificar la colecci贸n a la cual queremos escuchar, la siguiente linea nos permite escuchar cualquier evento de la colecci贸n que creamos en pasos anteriores:

collection.$.subscribe(changeEvent => console.dir(changeEvent));
Escuchando todos los eventos de la colecci贸n

Si necesitas escuchar eventos espec铆ficos, por supuesto que lo puedes hacer:

collection.insert$.subscribe(changeEvent => console.dir(changeEvent)); // al insertar
collection.update$.subscribe(changeEvent => console.dir(changeEvent)); // al actualizar
collection.remove$.subscribe(changeEvent => console.dir(changeEvent)); //al eliminar
Escuchando eventos espec铆ficos de la colecci贸n

Probando

Ahora si es momento de la prueba, para efectos del ejemplo vamos a ejecutar nuestro c贸digo dentro de una funci贸n as铆ncrona, de tal modo que quede as铆:

Encerrando el c贸digo en una funci贸n as铆ncrona

Ok definimos la funci贸n init, y luego hay que ejecutarla, solo colocate en tu terminal y ejecuta el archivo index.js, veremos la siguiente salida:

Funcionamiento de la subscripci贸n a eventos

Nota que el primer listen(rojo) que colocamos es para escuchar todos los eventos, y el segundo(azul) solo para la inserci贸n, ambos est谩n pintando al objeto nuevo. Genial!

Tal como lo mencionamos antes, RxDB va a a generar carpetas para sus archivos de base de datos en la direcci贸n que le asignaste, en nuestro caso lo generamos en la ra铆z del proyecto:

Carpetas de la base de datos creadas por RxDB

No se te ocurra tocarlas, porque como dice el video "si lo haces todo se va al carajo".

Y eso es todo por este post, si crees que te aport贸 valor, comp谩rtelo con para aportar a otros tambi茅n, deja tu comentario porque amamos saber que piensas, y no olvides seguirnos en nuestras redes sociales, nos vemos en el siguiente post.

Fuente GIPHY